Firefox 15 is now in the Aurora channel and has some big new features and improvements to the built-in tools for web developers.
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.
When the Debugger has Paused Your Script
[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
- It’s remotable! You can connect the debugger user interface to a debugger backend running somewhere else.
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.
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.
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.
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.