Archived video

This video is archived and won't be updated. We're keeping it online for now as a courtesy.

JavaScript Debugging in PhpStorm

Video loading...

  • 0:04
    PhpStorm Video Tutorial JavaScript Debugging in PhpStorm
  • 0:12
    With PhpStorm and WebStorm,
  • 0:14
    we can easily debug JavaScript code.
  • 0:17
    Debugging JavaScript code makes use of a Chrome or Firefox
  • 0:21
    extension which is ultimately installed
  • 0:23
    into the selected browser.
  • 0:27
    In the editor, we can set breakpoints.
  • 0:30
    Breakpoints are lines of code in which a debugger will pause
  • 0:33
    execution, and allows us to see what's going on inside our code.
  • 0:37
    We can set breakpoints by clicking the gutter at a specific line
  • 0:41
    of code, or by placing the cursor on a line of code
  • 0:44
    and using the keyboard shortcuts to toggle the breakpoint on or off.
  • 0:48
    Let's add some breakpoints and start the debugger.
  • 0:54
    Once the debugger hits the first breakpoint,
  • 0:56
    a new tool window is opened.
  • 0:59
    From here, we can navigate through the running coded
  • 1:01
    and inspect variables.
  • 1:04
    If we want to pin a variable for inspection,
  • 1:06
    we can add it to the Watches list.
  • 1:09
    This makes it easier to just see the variables we are
  • 1:11
    interested in instead of the long list
  • 1:13
    which the debugger may show you.
  • 1:16
    Using the toolbar buttons or the keyboard shortcuts,
  • 1:18
    we can step through code.
  • 1:21
    The Step Into function follows every function call.
  • 1:24
    Step Over just executes the function call
  • 1:27
    and keeps us in the current piece of code.
  • 1:31
    In the loop we have in our code, the breakpoint
  • 1:33
    is hit in every iteration of the loop.
  • 1:36
    If we are only interested in seeing what's
  • 1:38
    going on in our code for a specific iteration,
  • 1:41
    we can make the breakpoint a conditional breakpoint.
  • 1:44
    Using the Run View Breakpoints menu or the keyboard shortcut,
  • 1:48
    we can specify the condition when the breakpoint is valid.
  • 1:53
    Note that we can also disable the breakpoint until another breakpoint
  • 1:56
    has been hit first, which may be useful in larger code bases.
  • 2:01
    Let's run our code again.
  • 2:03
    As you can see, the breakpoint is only
  • 2:06
    hit when the condition we specified earlier matches.
  • 2:10
    While debugging, it may be useful to be
  • 2:12
    able to alter variables while executing codes.
  • 2:15
    We can do this by selecting the variable we want to change
  • 2:18
    and using the F2 keyboard shortcut to change the value of it.
  • 2:29
    The PhpStorm and WebStorm JavaScript debuggers
  • 2:32
    also feature working with source maps.
  • 2:35
    Consider the example shown on screen.
  • 2:38
    We're using a minified version of jQuery loaded
  • 2:41
    from the Google content delivery network.
  • 2:44
    If we start debugging and step into jQuery code,
  • 2:47
    we will be presented with the full jQuery code instead
  • 2:50
    of the minified version that we were actually using.
  • 2:53
    The debugger does this by following the source
  • 2:55
    maps that are available for jQuery.
  • 2:58
    The debugger will then download the full version of the code,
  • 3:00
    and it can map the minified version of jQuery
  • 3:03
    to the non-minified version which we see in the debugger.
  • 3:07
    Source maps are also used when working with TypeScript
  • 3:10
    or CoffeeScript--two languages that translate into JavaScript.
  • 3:15
    We can set break points in our CoffeeScript or TypeScript code
  • 3:18
    and start a debugging session.
  • 3:21
    Using source maps, the debugger will know how to map the executed
  • 3:24
    JavaScript into the original file, and it will hit the breakpoints
  • 3:28
    that we specified in CofeeScript or TypeScript,
  • 3:31
    even if the browser is actually executing JavaScript code.
Loading ...

JavaScript Debugging in PhpStorm


PhpStorm also provides tools for debugging your JavaScript using a Chrome or Firefox extension with the IDE. This lesson shows how to set your breakpoints and walks you through the client-side debug process.

Additional resources: 

Please note that this series covers PhpStorm versions 6 and 7 only.

For the latest documentation (including up-to-date videos), see JetBrains documentation.