The dev tools are getting better and better, but Firefox still has some catching up to do

Nov 7, 2013 19:21 GMT  ·  By

Firefox 27 hit the Aurora channel and should be making its way to users running Aurora releases. The latest Firefox comes with a few new developer centric features. One addition is the option to break on DOM events in the JavaScript debugger.

Also new is the ability to edit HTML straight from the browser and set a preferred default color format. There are also new options for displaying colors and previewing images from the source code.

"You can now automatically break on a variety of DOM events, without needing to manually set a breakpoint," Mozilla explained.

"To do this, click on the 'Expand Panes' button on the top right of the debugger panel (right next to the search box). Then flip over to the events tab. Click on an event name to automatically pause the next time it happens," it added.

One interesting new feature in the latest Firefox 27 is the ability to edit elements in a page at the HTML level. With the Inspector open, you can right click on any element and select "Edit as HTML." This makes it possible to make modifications to the page's source code and see their effects live.

Working with CSS is easier in the new Firefox 27. On the one hand, all color codes now have a color swatch next to them, which makes it possible to see the color used. In that same vein, hovering over image links in the source code will open up a preview box of the actual images.

The dev tools are also getting an updated code editor. Firefox now relies on Codemirror, an HTML5-based code editor that the Firefox dev tools use in the Style editor, Debugger, Inspector (Edit as HTML) and Scratchpad.

The Firefox dev tools are getting better and better and Mozilla is putting a lot of emphasis on code editing and doing as much in the browser as possible. Firefox is available for download on Softpedia.