If the browser is closed when starting a debugging session in the IDE, PhpStorm will install the extension automatically. This step can be skipped by closing all browser windows the first time a debugging session is started after installing PhpStorm.
Installing the JetBrains Chrome extension can be done as follows:
Once installed, we're good to go.
In the editor, we can set breakpoints. Breakpoints are lines of code in which the debugger will pause execution and allows us to see what's going on inside our code. We can set breakpoints by clicking the gutter at a specific line of code or by placing the cursor on a line of code and using the keyboard shortcut, Ctrl+F8 or CMD+F8 on Mac OS X, to toggle the breakpoint. The IDE shows breakpoints as a big red dot in the left gutter.
This will create the debug configuration for us, and will also launch the browser.
Once the browser has been launched, we can start debugging. PhpStorm will pause execution at our breakpoint and highlight the line of source code which is about to be executed.
In the IDE, a new tool window is opened. From here, we can navigate through the running code and inspect variables.
Using the toolbar buttons or the keyboard shortcuts, we can step through code. Step Into (F7) follows every statement and lets us inspect them one by one. Step Over (F8) just executes the active statement as a whole without stepping deeper down the execution stack. If we just want to run until the next breakpoint, we can do so pressing F9.
If we want to pin a variable for inspection, we can add it to the watches list so we can see the value of that variable whenever it is in scope while stepping through our code. This makes it easier to just inspect the variables we are interested in.
Imagine debugging a loop. If we place the breakpoint inside the loop body, it will be hit with every iteration. If we are only interested in seeing what's going on in our code for a specific iteration, we can make the breakpoint a conditional breakpoint.
Using the Run | View Breakpoints menu or press Ctrl+Shift+F8 (CMD+Shift+F8 on Mac OS X), we can specify the condition when the breakpoint is valid and the debugger should pause execution. For example, when our iterator variable i is equal to 3.
We can do much more with breakpoints! As we can see in the previous screenshot, we can log a message to console when the breakpoint is hit, optionally not pausing execution but just showing us a trace of the code execution. We can also remove a breakpoint after it has been hit, or enable it only if another breakpoint was hit first.
While debugging, it may be useful to be able to alter variables while executing code. For example, we can change a variable to test a specific condition. Variables can be edited at runtime by using the Set value... context menu in the debug tool window, or using the F2 keyboard shortcut.
We can then enter any value we want the variable to contain and continue execution of our code with it.
Using Evaluate Expression..., we can evaluate any expression during runtime. This can be useful to quickly test a condition, call another function and so on.
For example when using a minified version of jQuery, we can start debugging and step into jQuery code. Even though it is minified, PhpStorm will recognize the source map is present and will show us the full jQuery code instead of the minified version.
If we enable the Spy-js plugin in PhpStorm, we can debug it without breakpoints and profile it without any specialized tools. Spy-js uses historical execution data to provide us with a debugging experience after we ran our code. Read more about Spy-js on our blog.