Improved JavaScript debugger in WebStorm 7

Posted on by Ekaterina Prigara

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.

http://www.youtube.com/watch?v=HwH0p9WHXgM

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!

Comments below can no longer be edited.

16 Responses to Improved JavaScript debugger in WebStorm 7

  1. J says:

    September 20, 2013

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

    • Ekaterina Prigara says:

      September 20, 2013

      Yes, sure. It’s available in PHPStorm EAP.

  2. J says:

    September 20, 2013

    Cheers!

  3. Andrii Dieiev says:

    September 20, 2013

    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 🙁

    • Ekaterina Prigara says:

      September 20, 2013

      Right now Live Edit works with Google Chrome only and plugin doesn’t support Opera.

  4. Benj says:

    September 22, 2013

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

    • Ekaterina Prigara says:

      September 23, 2013

      Hi, yes, sure. Here is short screencast about debugging CoffeeScript in WebStorm with sourcemaps: http://youtu.be/Sl1Uk3zT5Fg

      • Benj says:

        September 23, 2013

        Great !
        This was really usefull

  5. Miha-ha says:

    October 17, 2013

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

    • Ekaterina Prigara says:

      October 17, 2013

      This is a recent Chromium issue. We’ve already submitted it and hope that it will be fixed soon.
      Here you can find more info: http://youtrack.jetbrains.com/issue/WEB-9538

      • Miha-ha says:

        October 17, 2013

        Thanx!

  6. PhpStorm 7 Web Toolkit Series – npm, Karma, istanbul | JetBrains PhpStorm Blog says:

    October 21, 2013

    […] A demo video and more detailed information about these features is available from the WebStorm blog. […]

  7. mnova says:

    October 26, 2013

    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:

      October 26, 2013

      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.

  8. Zsolt Almasi says:

    December 11, 2013

    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?
    Thanks,