PhpStorm 2017.2 Help

Debugging

Overview

This section describes the procedures that are common for various types of applications.

For details on debugging applications in the supported frameworks, refer to Web Technologies.

PhpStorm provides a full range of facilities for debugging your source code:

  • Breakpoints in PHP.
  • Breakpoints in HTML, and JavaScript.
  • Multiple simultaneous debugging sessions.
  • Customizable breakpoint properties: conditions, pass count, etc.
  • Frames, variables, and watches views in the debugger UI.
  • Runtime evaluation of expressions.
  • Support for Xdebug.

If you want to see a list of all currently debugging applications, select Run | Show Running List from the main menu. Refer to the section Viewing Running Processes for details.

General debugging steps

  1. Configure the debugger options.
  2. To debug CoffeeScript, TypeScript, and Dart code, you need source maps generated in addition to the JavaScript code.

    Source maps set the correspondence between lines in your original code and in the generated JavaScript code, otherwise your breakpoints will not be recognised and processed correctly.

    JavaScript and source maps are generated by compiling the original code either manually using the File Watcher of the type CoffeeScript, or by the built-in compiler (for TypeScript), or through integration with the pub serve tool (for Dart). After that, you can debug the output JavaScript code. See Compiling CoffeeScript to JavaScript, Compiling TypeScript to JavaScript, and Integration with the Pub Tool for details.

  3. Depending on your debugging mode, create a run/debug configuration, see PHP Debugging session.
  4. Create breakpoints in the source code.
  5. Launch a debugging session, see PHP Debugging Session.
  6. Pause or resume the debugging session as required.
  7. During the debugger session, step through the breakpoints, evaluate expressions, change values on-the-fly , examine suspended program, and set watches .

After you've started a debug session, the /help/img/idea/2017.2/debug.png icon that marks the Debug tool window toggles to /help/img/idea/2017.2/debug_active.png to indicate that the debug process is active.

See Also

Last modified: 19 July 2017