Mozilla

Debugger, Responsive Design View and more in Firefox Aurora 15

Firefox 15 is now in the Aurora channel and has some big new features and improvements to the built-in tools for web developers.

JavaScript Debugging

Firefox now ships with a Debugger (available via the Web Developer menu, or with the ctrl-shift-S/cmd-opt-S keyboard shortcut). Use this tool to quickly hunt down problems in your JavaScript code.

Quickly Get to the Source

When you open the Debugger, all of the page’s scripts are listed in a menu. Using the search box, you can quickly jump to a file by typing part of its filename. Even better, we’ve taken some inspiration from Sublime Text: add “:<line number>” or “#<search string>” to immediately jump to a part of the file. For example, the screenshot above is from the Backbone.js version of the TodoMVC demo. Typing “dovi” will jump to the “todoView.js” file. “dovi:20″ will jump to line 20. “dovi#togglecom” will search for “togglecom” in the file. Press the enter key to move on to the next match, and you’ll be in roughly the same spot shown in the screenshot.

Of course, there are two other easy ways to get to the source you care about. One is to add a “debugger” keyword to your JavaScript. That’s a signal to start debugging at that line of the file. Another is to use the “Pause on exceptions” feature. If your code is encountering an unhandled exception, you just need to check that box in the toolbar and the Debugger will pause when it hits the exception.

Once you are looking at the source you care about, you can set a breakpoint by clicking to the left of the line number in the view of the JavaScript source.

When the Debugger has Paused Your Script

Once your script has been paused by the Debugger, the stack frames are listed in the pane on the left and the in-scope variables are displayed in the pane on the right. The toolbar features the standard set of debugger controls: resume, step over, step in and step out. Use these to control how execution of your JavaScript proceeds so that you can watch how your program works.

As you step through your program, you’ll see variables displayed in the variables pane flash as their values change. You can even change the value of a variable by clicking on the value. Whatever you enter for the value of the variable is evaluated as JavaScript, so you can put [1,2,3,4] in as the value, and the variable will be set to an array. The debugger also tells you whether the variable has a property descriptor controlling its behavior. You can see this information in the tooltip in the screenshot above.

Under the Hood

This new Debugger is not just a new user interface over the functionality that Firefox’s JavaScript engine (SpiderMonkey) has been providing to tools like Firebug for years. The entire debugging interface in SpiderMonkey has been completely redesigned. There are two big things that web developers get because of the new debugger backend:

  1. It’s fast! JavaScript applications running with the Debugger open will run nearly as fast as they do without the Debugger.
  2. It’s remotable! You can connect the debugger user interface to a debugger backend running somewhere else.

The second point above is exciting, because it means that you’ll be able to debug JavaScript that is running in Firefox for Android or Firefox OS, all from the comfort of Firefox on your desktop or laptop computer.

In a future article, we’ll show you how to do that.

Responsive Design View

These days, powerful web devices come in many shapes and sizes and people have turned to responsive web design as one way to accommodate these many different screens. The new Responsive Design View in Firefox makes it easy to resize just the page you’re viewing.

Responsive Design View showing Twitter Bootstrap

With the Responsive Design View, you can work on your designs without constantly pulling out your mobile phone to see how it looks. And,  you can try out your designs without shrinking your browser’s tools, toolbars and other tabs.

Chris Heilmann put together a video showing the Responsive Design View (and the Layout view, discussed below) in action.

Layout View

Ever since we first introduced the Style Inspector it has been possible to use the built-in tools to see how the margins, padding and border are set for a node. When working on a layout, however, having those values all together in one view is a big help. Now, that view is available as part of the Style Inspector.

By default, the Layout view is collapsed to a single line showing you the size of the element. Click the triangle to see the whole view which shows margins on the outside, border width, and then padding on the inside of the box.

Other Improvements

We’ve had a lot of feedback on the Page Inspector since it was introduced a few months back. Many people like the attractive way it highlights the element you’re working on. On the other hand, there are times when you need the tool to move aside so that you can see just your page as it is presented to your users. Now, it’s easy to turn off the fancy highlighting behavior using the new options menu on the toolbar:

Finally, the Web Console has gotten a major boost in performance. Whether you have the Web Console open or not, every console.log() call is now much, much faster. Give it a try and see!

Where to Learn More

We have lots more in development and still more planned for the future. Here on Hacks, we’ll let you know about releases, but you can get in touch directly with the developers if you’re interested in sharing your opinion or hacking on the code. Check out our Get Involved page for some of the contact points that are available.

23 comments

Comments are now closed.

  1. 13xforever wrote on July 6th, 2012 at 06:17:

    Debugger hot key on Windows is Ctrl-Shift-S

    1. Kevin Dangoor wrote on July 6th, 2012 at 06:38:

      Oops! I’ve fixed that in the post. Thanks!

  2. Martin wrote on July 6th, 2012 at 13:35:

    Can´t find the Twitter Button…

  3. Hossein zolfi wrote on July 6th, 2012 at 14:23:

    Thanks Kevin for introducing this nice features.
    There is much improvements, thanks contributors.

  4. Jason Lotito wrote on July 7th, 2012 at 07:01:

    Yay! A native JS Debugger! Thank you so much Dev tools team!

  5. WebUser wrote on July 7th, 2012 at 08:30:

    Well done! Now I’m waiting for Web Storage, IndexedDB, and Offline Cache inspector.

  6. Usef wrote on July 8th, 2012 at 05:38:

    The progress being made is fantastic, thanks guys! The biggest thing missing for me now is the ability to edit the dom/inner-html from the inspector.

  7. Kris wrote on July 10th, 2012 at 02:20:

    A native debugger finally!

    Will it be able to debug add-ins and extensions? That would be really helpful.

    1. Kalle wrote on December 2nd, 2012 at 09:06:

      Does it?

    2. Kevin Dangoor wrote on December 3rd, 2012 at 06:14:

      If you set devtools.chrome.enabled to true in about:config you will be able to use Scratchpad today for helping to develop addons. In Firefox 19+, there’s a Browser Debugger that lets you do debugging in the context of browser chrome.

      1. Kalle wrote on December 3rd, 2012 at 10:40:

        Thanks, I’ll check that out. I already thought Mozilla just reinvented the wheel instead of something really necessary (after Venkman development stopped).

  8. Jeff Schwartz wrote on July 10th, 2012 at 06:23:

    Looks awesome. Can’t wait to get my hands on it.

  9. Gregor wrote on July 11th, 2012 at 08:40:

    The Responsive Design and Layout Views are going to be a huge help on the front-end – really awesome stuff to have built-in! The JavaScript Debugger doesn’t seem to be working for me though. When I try to open it I see a flash of white where it should be, and then nothing happens.

    1. Kevin Dangoor wrote on July 12th, 2012 at 00:35:

      Please file a bug report with as much info as possible to help reproduce the problem (add-ons you’ve got installed, for example).

      https://bugzilla.mozilla.org/

    2. Ed S wrote on August 28th, 2012 at 11:18:

      Gregor,

      I had the same problem. Disabling Page Speed 1.12.9 fixed it for me.

  10. Hossein zolfi wrote on July 11th, 2012 at 13:36:

    What is future of Firebug!? Will it be Firebug killer!? I dont know what happen to Firebug.

    1. Kevin Dangoor wrote on July 12th, 2012 at 00:32:

      Firebug is still going strong. Watch for the 1.10 release soon with some nice new features. Future releases will take advantage of the new debugger backend that’s now available in SpiderMonkey.

      1. Keith wrote on August 28th, 2012 at 13:47:

        I’d actually love it if someone were to do a side-by-side comparison of the two, showing what one can do that the other can’t. Bonus points for comparing details and performance of what they can both do.

  11. Bastian wrote on August 11th, 2012 at 12:53:

    I’m waiting for this debugger (the same as for the rest native developer’s tools) with hope… For some reason Firebug (which generally is great) cause 100% CPU utilisation when playing with js debugger (FF 14 + Linux). This drives me crazy and push me to use native tools. We well see..

  12. Marc wrote on October 9th, 2012 at 10:09:

    Totally useless if you can’t open it in its own window.

    1. Kevin Dangoor wrote on October 9th, 2012 at 11:09:

      I wouldn’t personally say “totally useless”, but I do know that many people would like to be able to use the tools in a separate window. That work is underway!

      http://paulrouget.com/e/devtools-toolbox/

  13. mark wrote on October 13th, 2012 at 07:03:

    I like the new web developer bar. I have tried using the native JS debugger but it doesn’t appear to have a watcher window where I can add variables to watch. Maybe I am missing something but without that feature I will have to keep using Firebug.

    1. Kevin Dangoor wrote on October 14th, 2012 at 09:11:

      Watches aren’t there yet. They’re definitely on the to-be-done list, though!

Comments are closed for this article.