1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
Mozilla recently released a new version of its Firefox web browser.
To some that will no doubt sound like the start of a bad joke. A browser walks into a bar....
But, unlike the majority of Firefox releases -- which come at the blistering pace of every six weeks -- this one is actually a significant update with some great new tools for web developers.
For some time web developers have been abandoning Firefox in favor of Google's Chrome browser, which has put much of its development effort into creating great tools for web developers. Firefox fell behind, both in tools available and in developer mindshare.
Recent releases of Firefox have been changing that though and this one is no exception. Among the new tools for web developers in this release are an editable box model dialog, support for Sublime Text keybindings in the code editor and a new global eyedropper tool that makes it simple to grab a color from anywhere in the browser.
The latter will need to be enabled in the developer tools settings. Look for the option to "Grab a color from the page" and make sure it's selected. Once you've enabled it, you'll see a new eyedropper icon in the top right corner of the developer tools panel. Click the icon to activate it and a small loupe will appear allowing you to select any color in the browser window. The eye dropper is also available when you click on colors with in the CSS inspector pane, making it easy to change the color of an element to match others on the page.
The editable box model means you can now select an element and begin to manipulate it directly, without hunting down the specific CSS that applies to it. Instead you can just change the values in the box model pane and your margin, padding and border values will be applied to the selected element. You can also increment values by 1 with the Up/Down keys (hold up Alt to increment by 0.1 and Shift to increment by 10).
Firefox has long shipped with a developer tools editor (based on <a href="http://codemirror.net/">Codemirror</a>). This release includes Codemirror 4, which brings support for Sublime Text key-bindings, Rectangle selection, Undo selection and Multiple selection.
This release also adds a new canvas element debugger that can inspect 2D and 3D graphics by recording and then scrolling through the executed code frame by frame. Mozilla has a <a href="http://www.youtube.com/watch?v=pcW8Ry5OVA0">video demo</a> of this feature in action.
There are also a couple of smaller new features in the dev tools, including Copy as cURL, which will copy any network request in the Network Monitor in cURL format. Just paste that into your terminal and you can inspect headers and other data using cURL.
The latest version of Firefox has a couple new features for non-developers as well, including native handling of video (.ogg files anyway) and PDF files on Windows. That means, if you haven't explicitly told Firefox to open such files with another application, Firefox will open them for you.
Firefox 31 shows rumors of Mozilla's slide into irrelevancy might be exaggerated -- for web developers anyway. Provided you can overlook some of the organization's exceedingly poor decisions in the last year, the latest version of Firefox has some great tools for web developers, some of which, for now anyway, you won't find in developer darling Google Chrome.
|
