1. Installing the JetBrains Chrome extension
Installing the JetBrains Chrome extension can be done as follows:
- Open Chrome, go to the settings and click the Extensions item. Alternatively, open Chrome and navigate to chrome://extensions/.
- Search for the JetBrains IDE Support extension and click the install button (+ FREE near the top).
- Confirm adding the new extension to Chrome.
Once installed, we're good to go.
2. Setting Breakpoints
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.
3. Starting a Debugging Session
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.
4.1. Stepping through Code
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.
4.3. Breakpoint Options and Conditional Breakpoints
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.
4.4. Altering Variables while Executing Code
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.
(optional) Source maps
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.