Developer Edition 44: New visual editing and memory management tools

This month marks the one-year anniversary of Firefox Developer Edition. To celebrate, we’re excited to show you some new tools – and some improvements to existing tools – that let you work with the Web in a visual and intuitive way.

As the Web becomes a more dynamic, interactive and mobile experience, visual designers are more than ever experimenting with animation – and the latest Firefox Developer Edition has tools to make working with animations faster and easier. Firefox Developer Edition now gives visual designers and animators a set of visual editing tools that work like they do. We are addressing the technically challenging aspects of animation with a set of visceral, powerful, interactive tools that are comfortable for designers to use. Visual editing tools should appeal to animators, not just to programmers.

DevTools Challenger

Reading about our new tools is great, but trying them out yourself is even better! To help you get started, we partnered with acclaimed Web animation engineer and advocate Rachel Nabors to create DevTools Challenger. Check out DevTools Challenger for hands-on exercises with all of our new visual design tools. Remember to keep scrolling until you get to the ocean floor!

Screenshot of the Devtools Challenger demo website

Animation & CSS Filter Tools

The Page Inspector’s animation panel makes it easy to scrub, pause, and visualize each animation on a webpage. Thanks to its tight integration in the DOM inspector, you can switch between a global view of every animation, or drill down to just a few nodes.


Once you’ve found the animation you want, our visual cubic-bezier editor is just a click away. Packed with useful presets, the editor will ensure your animation moves perfectly.

Screenshot of the visual cubic-bezier curve editor

We’ve also built a similar editor for CSS filters, allowing you to visually add, remove, re-order, and adjust filters with live feedback from the page.


Measurements & Colors

Firefox Developer Edition also features two brand new tools for fine-tuning layout: you can now enable pixel rulers along the page margins, or use our new measurement tool to drag-and-measure arbitrary regions of the page.

The Inspector now defaults to displaying CSS colors “as authored,” and shift-clicking on a color swatch cycles between authored styles and equivalent hex, rgb, and hsl values. There’s even an eyedropper tool to pick colors right from the page.

Memory Snapshots

The new Memory tool helps front-end engineers better understand and optimize the way pages allocate and retain memory. The tool works by taking a snapshot of the heap, then allows you to drill down by retained object type, allocation stack, or internal representation. We think you’ll like it, and we’ve got many more features and enhancements in the works!

Screenshot of the DevTools memory panel

WebSocket Debugging API

Lastly, we’re extremely excited to announce that Firefox now exposes an API for monitoring WebSocket frames (Bug 1203802), which is the first step on the path to a full-fledged WebSocket inspection tool. Developer Tools engineer Jan Odvarko has built an experimental add-on for inspecting WebSocket traffic. Install the add-on and give it a try, we’d love your feedback.

Screenshot of the experimental WebSocket Debugger add-on

Firefox Developer Edition is available at firefox.com/developer. Let us know what you think about these features by commenting below or following @FirefoxDevTools on Twitter!

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Live Editing Sass and Less in the Firefox Developer Tools

Sass and Less are expressive languages that compile into CSS. If you’re using Sass or Less to generate your CSS, you might want to debug the source that you authored and not the generated CSS. Luckily you can now do this in the Firefox 29 developer tools using source maps.

The Firefox developer tools use source maps to show the line number of rules in the original source, and let you edit original sources in the Style Editor. Here’s how to use the feature:

1. Generate the source map

When compiling a source to CSS, use the option to generate a sourcemap for each style sheet. To do this you’ll need Sass 3.3 (Currently in pre-release, gem install sass --pre) or Less 1.5+.


sass index.scss:index.css --sourcemap


lessc index.less index.css --source-map

This will create a .css.map source map file for each CSS file, and add a comment to the end of your CSS file with the location of the sourcemap: /*# sourceMappingURL=index.css.map */. The devtools will use this source map to map locations in the CSS style sheet to locations in the original source.

2. Enable source maps in developer tools

Right-click anywhere on the inspector’s rule view or in the Style Editor to get a context menu. Check off the Show original sources option:

Enabling source maps in devtools

Now CSS rule links will show the location in the original file, and clicking these links will take you to the source in the Style Editor:

Original source showing in Style Editor

3. Set up file watching

You can edit original source files in Style Editor tool, but order to see the changes apply to the page, you’ll have to watch for changes to your preprocessed source and regenerate the CSS file each time it changes. To set watching up:


sass index.scss:index.css --sourcemap --watch


For Less, you’ll have to set up another service to do the watching, like grunt.

4. Save the original source

Save the original source to your local file system by hitting the Save link or Cmd/Ctrl-S:

Saving source to disk

Saving source to disk

The devtools will infer the location of the generated CSS file locally and watch that file for changes to update the live style sheet on the page.

Now when you edit an original source and save it, the page’s style will update and you’ll get immediate feedback on your Sass or Less changes.

The source has to be saved to disk and file watching set up in order for style changes to take effect.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Live editing WebGL shaders with Firefox Developer Tools

If you’ve seen Epic Games’ HTML5 port of ‘Epic Citadel’, you have no doubt been impressed by the amazing performance and level of detail. A lot of the code that creates the cool visual effects you see on screen are written as shaders linked together in programs – these are specialized programs that are evaluated directly on the GPU to provide high performance real-time visual effects.

Writing Vertex and Fragment shaders are an essential part of developing 3D on the web even if you are using a library, in fact the Epic Citadel demo includes over 200 shader programs. This is because most rendering is customised and optimised to fit a game’s needs. Shader development is currently awkward for a few reasons:

  • Seeing your changes requires a refresh
  • Some shaders are applied under very specific conditions

Here is a screencast that shows a how to manipulate shader code using a relatively simple WebGL demo:

Starting in Firefox 27 we’ve introduced a new tool called the ‘Shader Editor’ that makes working with shader programs much simpler: the editor lists all shader programs running in the WebGL context, and you can live-edit shaders and see immediate results without interrupting any animations or state. Additionally editing shaders should not impact WebGL performance.

Enabling the Shader Editor

The Shader Editor is not shown by default, because not all the web pages out there contain WebGL, but you can easily enable it:

  1. Open the Toolbox by pressing either F12 or Ctrl/Cmd + Shift + I.
  2. Click on the ‘gear’ icon near the top edge of the Toolbox to open the ‘Toolbox Options’.
  3. On the left-hand side under ‘Default Firefox Developer Tools’ make sure ‘Shader Editor’ is checked. You should immediately see a new ‘Shader Editor’ Tool tab.

Using the Shader Editor

To see the Shader Editor in action, just go to a WebGL demo such as this one and open the toolbox. When you click on the shader editor tab, you’ll see a reload button you will need to click in order to get the editor attached to the WebGL context. Once you’ve done this you’ll see the Shader Editor UI:

The WebGL Shader Editor

  • On the left you have a list of programs, a vertex and fragment shader corresponds to each program and their source is displayed and syntax highlighted in the editors on the right.
  • The shader type is displayed underneath each editor.
  • Hovering a program highlights the geometry drawn by its corresponding shaders in red – this is useful for finding the right program to work on.
  • Clicking on the eyeball right next to each program hides the rendered geometry (useful in the likely case an author wants to focus solely on some geometry but not other, or to hide overlapping geometry).
  • The tool is responsive when docked to the side.

Editing Shader Programs

The first thing you’ll notice about Shader program code is that it is not JavaScript. For more information on how Shader programs work, I highly recommend you start with the WebGL demo on the Khronos wiki and/or Paul Lewis’ excellent HTML5 Rocks post. There also some great long standing tutorials on the Learning WebGL blog. The Shader Editor gives you direct access to the programs so you can play around with how they work:

  • Editing code in any of the editors will compile the source and apply it as soon as the user stops typing;
  • If an error was made in the code, the rendering won’t be affected, but an error will be displayed in the editor, highlighting the faulty line of code; hovering the icon gutter will display a tooltip describing the error.

Errors in shaders

Learn more about the Shader Editor on the Mozilla Developer Network.

Here is a second screencast showing how you could directly edit the shader programs in the Epic Citadel demo:

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

HTML Editing and other improvements in Firefox 17 Developer Tools

Firefox 17 has recently hit the Aurora channel, and with it comes a number of  improvements to the built-in web developer tools.

HTML Editing

This is one of the most-requested features for our tools, and we’re happy with the solution we have for you. With the Style panel in the Page Inspector, you can easily manipulate the styles on the page. When you’re working on a layout, however, you sometimes need to manipulate the DOM of the page as well. The new “Markup panel” lets you do just that.

The new Markup Panel

To open the Markup panel, open the Page Inspector and click on the button that looks like an outline and appears right next to the “breadcrumbs” in the toolbar. In the screenshot above, that button is the third from the left. You can also press ctrl-M to open the Markup Panel.

As before, you can choose elements to inspect in the Style panel by clicking on them in the Markup panel. You can also right-click on the elements in the Markup panel to access a couple of handy features (copy HTML, delete the node).

What’s new in this version of the Markup panel? Previously, you could double click on an attribute value to change that value. Now you can double click almost anywhere to change anything. Double click on text to change the text. Likewise for the tag itself. See that space just before the closing “>” of a tag? Double click there and you can add new attributes.

You’ll also find that keyboard navigation for getting around and editing the DOM is easy to work with. You can use the tab key to move around within a tag and the arrow keys to move between nodes.

Note: the screenshot above shows the Markup panel with a dark theme. The plan is to replace this with a light theme before the feature is released.

More to love in the Web Console

The Web Console remains a favorite tool among web developers, and we’re happy to have even more improvements for you in this release.

Updated Web Console theme

The most visible change in the Web Console is the refreshed toolbar. The Web Console now has an appearance in line with the rest of the Firefox developer tools.

The screenshot above also shows off another improvement: better autocompletion. We’ve found and fixed some cases (like string objects) where the Web Console wasn’t giving as much help as it could.

Another important change to note: the Web Console comes with a helper function called $. Previously, that function was an alias for document.getElementById. In conjunction with other browser consoles, we’re changing it to be document.querySelector which is far more useful. To get the behavior you had before, just add a # at the beginning of the argument you pass in (for example, $("#myElementID")). You can continue to use $$ as an alias for document.querySelectorAll. If you’re using jQuery, the $ helper function will be replaced by jQuery, so this change won’t affect you.

Want to be able to see the Web Console’s text a bit more clearly? You can now zoom the Web Console using the same controls you use to zoom the browser window (ctrl-+, ctrl– and ctrl-0 to reset on Windows/Linux. Use cmd-+, cmd– and cmd-0 on Mac).

Using the built-in console.log function is a very handy way to add tracing to your web application. Now, if you send an object to console.log, you can now click on that object in the output area of the Web Console in order to inspect it.

Also in the screenshot above, you’ll see the “More Tools” button in the Developer Toolbar at the bottom of the window. That button gives you quick access to the rest of the developer tools. (Sharp-eyed readers might notice a mysterious “JSTerm” button on my Developer Toolbar. That’s Paul Rouget’s JSTerm add-on, which is really nice to use. Check it out!)

Page Inspector Visual Update

We’ve been listening to feedback from web designers since the Page Inspector made its debut on the Aurora channel last November. We found that the appearance of the dark “veil” over everything but the selected element was striking, but also making it harder for designers to see styling changes they made in the context of their overall design. We added options to turn off the page dimming a few months ago, but in this update we’ve got a lighter approach:

Updated highlighting in the Page Inspector

Instead of darkening the whole page, we highlight the selected element using a subtle dashed line and the useful node toolbar. Even better, when you move your cursor to the Style panel to try out style changes, the highlighting fades away entirely so that you can focus entirely on the styling.

Debugger Improvements

The Latest Debugger

The Debugger has had tons of improvements, some visible and some not, since it hit Aurora three months ago. One of the visible changes that you can see in the screenshot above: search across all scripts! Just go to the find box and start your search with “!” (exclamation point) and you’ll rapidly find matches across all of the scripts in the area just below the toolbar.

If you want more space to look at your code, there’s a new button in the toolbar (the second button on the left in the screenshot) that will close the two side panels to give your code all of the room it needs.

Finally, we’ve got more keyboard shortcuts to make using the Debugger quicker than ever:

  • alt-shift-P (Windows), ctrl-shift-P (Mac) to focus the search box
  • alt-shift-T (Windows), ctrl-shift-T (Mac) to do a string (token) search
  • F6 for continue
  • F7 for step over
  • F8 for step in
  • shift-F8 for step out

Update: One more debugger improvement to call out: as noted in the Firefox 15 release notes, there was a problem with the debugger not hitting its breakpoints on page reload. This is fixed in Firefox 16 (which is now in Beta).

Try Aurora: it’s good for you!

All of these changes are available today on the Aurora channel and are scheduled for release later in the year. I think you’ll find that Aurora works quite well, so give it a try and let us know what you think via the Feedback button!

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)