More dev tools, Chrome import, and more in latest Firefox update

Mozilla has released a new update for Firefox, identified as version 11 for those counting, which introduces a few important new features.

You can now import cookies, bookmarks and history from Chrome. Considering Chrome’s growing market share (even surpassing Firefox by some accounts) it makes sense to make it easier it for Chrome users to move (back) to Firefox. You will be prompted when doing a first install, or you can opt later from the Library window.

Import settings from Chrome in Firefox 11 screenshto

Continue reading More dev tools, Chrome import, and more in latest Firefox update

New JavaScript Debugger coming to Firefox

Firefox is adding a JavaScript debugger to its web developer toolbox, that is, the ability to pause and play JavaScript code execution, and watch variables, a critical feature for programmers.

Important pieces of the debugger have been landing to Firefox code since Firefox 8, but a few weeks ago user interface pieces have made their way as well, making it usable for the first time. As Panoagiotis Astithas warns in a related post, it is not quite ready for general usage, but it works and here’s a video where you can see it in action: Continue reading New JavaScript Debugger coming to Firefox

Firefox to get more powerful web development tools

Aurora, Firefox alpha development branch, has just got some important additions to its web development tool set.

Among these, perhaps the highlighter is the single most important feature of the group. With highlighter, you enter into inspect mode, where you just need to hover web page elements to highlight them, while breadcrumbs in the lower part of the screen tell you the exact path to that element. You switch from inspect to no-inspect mode by pressing Esc. Pretty easy.

I have seen similar tools before (including the great and simple Aardvark), but Firefox’s implementation is just and plainly smooth: the transition from highlight to highlight makes it just as fun to see as it is informative. Whatever it is doing, we need the same for everything in the user interface: tab animations, location bar menu, tab groups, Firefox menu, etc.

Firefox with highlighter screenshot

For more details, press the Style button in the bottom toolbar to see the rules that are applying to the current element and the effective properties. You can edit the rules and see the changes in real time

Firefox with highlighter, HTML code and CSS view screenshot

To see the HTML code of the selected item, press the HTML button in the inspect toolbar.

Firefox with highlighter and HTML code screenshot

The web console is now more powerful thanks to additional objects now available for debugging. If you have previously used Firebug, you should recognize a few of them, like console.dir, console.time, console.group. For example, enter console.dir(window) to see all the window object properties.

Finally, a more powerful code editor is now available for Scratchpad making it easier to write scripts for the current page.

A complaint I have is styling among the several web tools. The web console looks dull. The highlighter looks on fire. So together they seem part of completely different products. Hopefully, this will get sorted out in the Aurora or Beta phases to make them look good as they work.

Don’t hold your breathe for these tools though. Aurora means we are getting all the cool stuff in Firefox 10, scheduled for release on January 31st. If you feel ready to try them, check Mozilla’s Aurora web page.