Improved JavaScript debugger in WebStorm 7

The new WebStorm 7 comes with a redesigned debugger for Google Chrome which supports the latest features of WebKit Remote Debugging Protocol and V8 Debugger Protocol.

Though this change mainly affects the debugger’s backend, WebStorm 7 users will definitely notice improvements in its performance, as well as some very useful updates. You can quickly learn about these in the screencast or read this post for more details.

Before jumping into the updates, let’s go over some basics. To start JavaScript Debug Session for any HTML file:

  • In the file context menu, click Debug file. The Run/Debug Configuration will be created automatically and the file will be opened in the browser.
  • OR
  • In the main toolbar, select any configuration that you’ve already used or create a new one, and then click Debug.

Start debug

Updates and improvements in WebStorm 7

Live Edit

Live Edit allows you to see all the changes that you make in your HTML or CSS files instantly in the browser, without reloading the page (check out our demo). Currently it is available in Google Chrome only, via installing the Google Chrome Extension JetBrains IDE Support.

In WebStorm 7 we have significantly redesigned the Live Edit workflow making it more coherent and predictable. Now it is available in JavaScript Debug Session only. You can enjoy Live Edit for any HTML file and even if you are running a Node.js app.

Elements tab

A new Elements tab was added to the debugger. It shows the live HTML content of the page that is being updated. You’ll be able to inspect DOM and see new DOM elements added to the page with JavaScript.

Elements tab

From the Elements tab you can easily navigate to the source files and to the declaration, by pressing Ctrl (Cmd for Mac) and clicking a file name or classe.

Variables view

Variables have a new improved presentation in the debug window.

The first nice update is that values are now displayed in the same format as in the editor that makes them easier to read. Arrays now have a folded presentation to give you quick access to the element you need.

Second, variables are now grouped into local, closure and global scopes and are separately grouped by functions.

Another important update in Variables view is that now you can see the __proto__ object and inspect its properties.

Scope and proto

Try the improved debugger right now in WebStorm 7 Release Candidate.

Develop with pleasure!

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Cool Feature. Bookmark the permalink.

16 Responses to Improved JavaScript debugger in WebStorm 7

  1. J says:

    Is the new debugger also implemented onto the new PhpStorm 7?

  2. Andrii Dieiev says:

    Very useful.
    Is it hard to make Live Edit to work with Opera 15+? It is possible to install chrome extension, but plugin isn’t configured for Opera :(

  3. Benj says:

    does these new improvements also work on coffeescript files (with source maps if needed) ?

  4. Miha-ha says:

    On live editing russian word “привет” is displayed as “?@825B”…
    how do I edit in Russian?

  5. Pingback: PhpStorm 7 Web Toolkit Series – npm, Karma, istanbul | JetBrains PhpStorm Blog

  6. mnova says:

    Does Live Reload work with node.js apps?
    I am running webstorm 7.0.1., I’ve installed the default chrome extension and checked “Live Edit” under the View tab but my changes are not reflected until I manually reload the page.

    • Ekaterina Prigara says:

      Yes, Live Edit works for Node.js apps.
      To run Node.js apps you use Node.js Run/Debug Configuration. Now it has a tab Browser/Live Edit, select with JavaScript debug to be able to use Live Edit and see changes you make in HTML and CSS files.

  7. Zsolt Almasi says:

    I downloaded Webstorm 7.0.2 for evaluation, being interested in the Live Edit feature, installed latest Chrome (31.0.1650.63 m) on Windows7, created an html file, started a debug session, but Live Edit doesn’t work. Only when I refresh manually the page in Chrome, the page is updated correctly.
    When I start the debugging session, in the console I get the following message:
    event.returnValue is deprecated. Please use the standard event.preventDefault() instead. chrome-extension://nnbmlagghjjcbdhgmkedmbmedengocbn/jquery.min.js

    Any workaround for that?

Leave a Reply

Your email address will not be published. Required fields are marked *