10 Useful Firefox Developer Tools You Should Know

Firefox being “developer’s browser” has many great tools to help make our work easier. You can find more on its tool collection on the Firefox Developer Tools webpage and can also try their Developer Edition Browser which has more features and tools that are being tested.

For this post, I’ve listed 10 handy tools you might like from its developer tools collection. I’ve also demonstrated what these tools can do with GIFs plus how to access them for quick reference.

1. View horizontal and vertical rulers

Firefox tool - ruler

Firefox has a ruler tool that displays both horizontal and vertical rulers with pixel units on the page. The tool is useful for arranging your elements across the page.

To access rulers through the menu:

  1. Go to: ☰ > Developer > Developer Toolbar (shortcut: Shift + F2).
  2. Once the toolbar appears at the bottom of the page, type rulers.
  3. Pess Enter.

To make this appear on the developer tools window:

  1. Go to “Toolbox Options”.
  2. Under the “Available Toolbox Buttons” section, check the “Toggle rulers for the page” checkbox.

2. Take screenshots using CSS selectors

Firefox tool - screenshot

Although the Firefox toolbar lets you take screenshots of the full page or visible portions, in my opinion the CSS selector method is more useful for capturing screenshots of individual elements as well as for elements that are visible on mouse-hover only (like menus).

To take screenshots through the menu:

  1. Go to ☰ > Developer > Developer Toolbar (shortcutShift + F2).
  2. Once the toolbar appears at the bottom of the page, type screenshot --selector any_unique_css_selector.
  3. Press enter.

To make this appear on the developer tools window:

  1. Click “Toolbox Options” and under “Available Toolbox Buttons” section.
  2. Check “Take a fullpage screenshot” checkbox.

3. Pick colors from web pages

Firefox tool - colorpicker

Firefox has a built-in color picker tool by the name of “Eyedropper”.

To access the “Eyedropper” tool through menu go to ☰ > Developer > Eyedropper.

To make this appear on the developer tools window: click “Toolbox Options” and under “Available Toolbox Buttons” section check “Grab a color from the page” checkbox.

4. View page layout in 3D

Firefox tool - 3d view

Viewing webpages in 3D helps with layout problems. You’ll be able to see the different layered elements much more clearly in 3D view. To view the webpage in 3D, click the “3D View” tool button.

To make this appear on the developer tools window, click “Toolbox Options” and under “Available Toolbox Buttons” section check the”3D View” checkbox.

5. View browser style

Firefox tool - browser style

Browser Styles consist of two types: the default style a browser assigns for every element, and the browser-specific styles (the ones with the browser prefix). By taking a look at the browser styles you’ll be able to diagnose any override issues in your stylesheet and also come to know of any existing browser specific styles .

To access “Browser styles” through menu:

  1. Go to ☰ > Developer > Inspector.
  2. Click the “Computed” tab in the right section.
  3. Check the “Browser styles” checkbox.

You can also open the “Inspector” tab through the shortcut Ctrl +Shift + C and then accessing “Browser styles”.

6. Disable JavaScript for current session

Firefox tool - disable JS

For best practice and screen reader compatibility it is always advised to code any website in such a way that its functionality is not hindered in a javascript-disabled environment. To test for such environments, you can disable the JavaScript for the session you’re working in.

To disable JavaScript for current session click “Toolbox Options” and under “Advanced settings” section check the “Disable JavaScript*” checkbox.

7. Hide CSS style from the page

Firefox tool - disable style

Just like JavaScript, due to accessibility concerns it is best to design websites in such a way that the pages should still be readable even without any styles. To see how the page looks without any style, you can disable them in the developer tools.

To remove any CSS style (inline, internal or external) applied on a webpage, just click on the eye symbol of the listed stylesheets in the “Style Editor” tab. Click it again to revert to the original view.

To access “Style Editor” through menu go to ☰ > Developer > Style Editor (shortcut: Shift + F7.

8. Preview the HTML content response to a request

Firefox tool - preview response

Firefox developer tools has an option to preview the HTML content type responses. This helps the developer to preview any 302 redirects and check whether any sensitive information has been rendered or not in the response.

To access “Preview” through menu:

  1. Go to ☰ > Developer > Network (shortcut: Ctrl +Shift + Q.
  2. Open the webpage of your choice or reload the current page, click on the desired request (with HTML response) from the list of requests.
  3. Click the “Preview” tab in the right section.

9. Preview webpage in different screen sizes

Firefox tool - responsive

To test a webpage for its responsiveness use the “Responsive Design View”, which can be accessed by ☰ > Developer > Responsive Design View or with the shortcut: Ctrl +Shift + M.

To make the “Responsive Design Mode” tool button appear, click “Toolbox Options” and under the “Available Toolbox Buttons” section, check “Responsive Design Mode” checkbox.

10. Run JavaScript on pages

Firefox tool - responsive

For quick JavaScript executions on any webpage simply use the “Scratchpad” tool of Firefox. To access “Scratchpad” through the menu go to; ☰ > Developer > Scratchpad or use the keyboard shortcut Shift + F4.

To make the “Scratchpad” tool button appear on the developer tools window for quick use: click “Toolbox Options” and under the “Available Toolbox Buttons” section check the “Scratchpad” checkbox.

The post 10 Useful Firefox Developer Tools You Should Know appeared first on Hongkiat.

How to Hack & Personalize Your Firefox Developer Tools Theme

Themes are a personal thing for us developers, it’s not just about beautification of editors or tools. It’s about making the screen that we’ll be staring at (without blinking much) more bearable to work at for hours on end and in a productive manner. Firefox has two themes for developer tools: dark and light. Both are great, but the options are still limited without a way to personalize them.

Now, Firefox uses a combination of XUL and CSS for its UI, which means most of its appearance can be tweaked using just CSS. Mozilla provides a way for users to configure its products’ appearance with a CSS file called “userChrome.css”. You can add custom style rules to that CSS file and it’ll be reflected on the Mozilla products.

In this post we will be making use of that same CSS file to personalize the developer tools in Firefox.

First, we need to find that CSS file, or make one and put it in the right place. One quick way to find the folder that will house “userChrome.css” is by going to about:support in the browser and clicking the “Show Folder” button next to the label “Profile Folder”. This will open Firefox’s current profile folder.

In the profile folder, you’ll see a folder named “chrome”. If it’s not there, create one and create a “userChrome.css” in it. Now that the setting up of the file is done, let’s move onto code.

:root.theme-dark {
  --theme-body-background: #050607 !important;
  --theme-sidebar-background: #101416 !important;

  --theme-tab-toolbar-background: #161A1E !important;
  --theme-toolbar-background: #282E35 !important;
  --theme-selection-background: #478DAD !important;

  --theme-body-color: #D6D6D6 !important;
  --theme-body-color-alt: #D6D6D6 !important;
  --theme-content-color1: #D6D6D6 !important;
  --theme-content-color2: #D6D6D6 !important;
  --theme-content-color3: #D6D6D6 !important;

  --theme-highlight-green: #8BF9A6 !important;
  --theme-highlight-blue: #00F9FF !important;
  --theme-highlight-bluegrey: white !important;
  --theme-highlight-lightorange: #FF5A2C !important;
  --theme-highlight-orange: yellow !important;
  --theme-highlight-red: #FF1247 !important;
  --theme-highlight-pink: #F02898 !important;
}

What you see above is the code that I added to my “userChrome.css” file to change the appearance of developers tools from this

devtool ui

to this:

devtool new ui

I only wanted to improve the contrast a bit more with darker background and brighter text in the dark theme (also I’m not good at color schemes), so I stayed with some basic colors typically used in dark themes. If you are better with colors, experiment on your own with the colors as you see fit to find a better match for the theme you are using.

The code is just a list of CSS color variables used to color the various UI parts of DevTools. We found the code in a file called “variables.css” in a compressed file named “omni.ja”:

In Windows, the file is located at:

F:/firefox/browser/omni.ja. Replace the F: with the drive where you’ve installed your Firefox in.

In OSX, the file is located at:

~/Applications/Firefox.app/Contents/Resources/browser/omni.ja.

These are compressed Java files. In Windows, you can rename the .ja extension to .zip and use the native Windows Explorer extract utility to unload the files within it. In OSX, go to Terminal and run unzip omni.ja. Bear in mind to make a copy of the file in another directory before doing so.

Once omni.ja has beeen extracted, you can find the file at /chrome/devtools/skin/variables.css; yes, the Firefox DevTools skin is under a folder named chrome. In the variables.css, you’ll see a bunch of color variables used for both the light and dark themes as follows

:root.theme-light {
  --theme-body-background: #fcfcfc;
  --theme-sidebar-background: #f7f7f7;
  --theme-contrast-background: #e6b064;

  --theme-tab-toolbar-background: #ebeced;
  --theme-toolbar-background: #f0f1f2;
  --theme-selection-background: #4c9ed9;
  --theme-selection-background-semitransparent: rgba(76, 158, 217, .23);
  --theme-selection-color: #f5f7fa;
  --theme-splitter-color: #aaaaaa;
  --theme-comment: #757873;

  --theme-body-color: #18191a;
  --theme-body-color-alt: #585959;
  --theme-content-color1: #292e33;
  --theme-content-color2: #8fa1b2;
  --theme-content-color3: #667380;

  --theme-highlight-green: #2cbb0f;
  --theme-highlight-blue: #0088cc;
  --theme-highlight-bluegrey: #0072ab;
  --theme-highlight-purple: #5b5fff;
  --theme-highlight-lightorange: #d97e00;
  --theme-highlight-orange: #f13c00;
  --theme-highlight-red: #ed2655;
  --theme-highlight-pink: #b82ee5;

  /* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. */
  --theme-graphs-green: #85d175;
  --theme-graphs-blue: #83b7f6;
  --theme-graphs-bluegrey: #0072ab;
  --theme-graphs-purple: #b693eb;
  --theme-graphs-yellow: #efc052;
  --theme-graphs-orange: #d97e00;
  --theme-graphs-red: #e57180;
  --theme-graphs-grey: #cccccc;
  --theme-graphs-full-red: #f00;
  --theme-graphs-full-blue: #00f;
}

:root.theme-dark {
  --theme-body-background: #14171a;
  --theme-sidebar-background: #181d20;
  --theme-contrast-background: #b28025;

  --theme-tab-toolbar-background: #252c33;
  --theme-toolbar-background: #343c45;
  --theme-selection-background: #1d4f73;
  --theme-selection-background-semitransparent: rgba(29, 79, 115, .5);
  --theme-selection-color: #f5f7fa;
  --theme-splitter-color: black;
  --theme-comment: #757873;

  --theme-body-color: #8fa1b2;
  --theme-body-color-alt: #b6babf;
  --theme-content-color1: #a9bacb;
  --theme-content-color2: #8fa1b2;
  --theme-content-color3: #5f7387;

  --theme-highlight-green: #70bf53;
  --theme-highlight-blue: #46afe3;
  --theme-highlight-bluegrey: #5e88b0;
  --theme-highlight-purple: #6b7abb;
  --theme-highlight-lightorange: #d99b28;
  --theme-highlight-orange: #d96629;
  --theme-highlight-red: #eb5368;
  --theme-highlight-pink: #df80ff;

  /* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */
  --theme-graphs-green: #70bf53;
  --theme-graphs-blue: #46afe3;
  --theme-graphs-bluegrey: #5e88b0;
  --theme-graphs-purple: #df80ff;
  --theme-graphs-yellow: #d99b28;
  --theme-graphs-orange: #d96629;
  --theme-graphs-red: #eb5368;
  --theme-graphs-grey: #757873;
  --theme-graphs-full-red: #f00;
  --theme-graphs-full-blue: #00f;
}

Pick the theme and variables you want to target and add them to your “userChrome.css”.

Here are some more screenshots of my developer tools’ window.

devtool debugger
devtool new ui
devtool store
devtool style

How to Hack & Personalize Your Firefox Developer Tools Theme

Themes are a personal thing for us developers, it’s not just about beautification of editors or tools. It’s about making the screen that we’ll be staring at (without blinking much) more bearable to work at for hours on end and in a productive manner. Firefox has two themes for developer tools: dark and light. Both are great, but the options are still limited without a way to personalize them.

Now, Firefox uses a combination of XUL and CSS for its UI, which means most of its appearance can be tweaked using just CSS. Mozilla provides a way for users to configure its products’ appearance with a CSS file called “userChrome.css”. You can add custom style rules to that CSS file and it’ll be reflected on the Mozilla products.

In this post we will be making use of that same CSS file to personalize the developer tools in Firefox.

First, we need to find that CSS file, or make one and put it in the right place. One quick way to find the folder that will house “userChrome.css” is by going to about:support in the browser and clicking the “Show Folder” button next to the label “Profile Folder”. This will open Firefox’s current profile folder.

In the profile folder, you’ll see a folder named “chrome”. If it’s not there, create one and create a “userChrome.css” in it. Now that the setting up of the file is done, let’s move onto code.

:root.theme-dark {
  --theme-body-background: #050607 !important;
  --theme-sidebar-background: #101416 !important;

  --theme-tab-toolbar-background: #161A1E !important;
  --theme-toolbar-background: #282E35 !important;
  --theme-selection-background: #478DAD !important;

  --theme-body-color: #D6D6D6 !important;
  --theme-body-color-alt: #D6D6D6 !important;
  --theme-content-color1: #D6D6D6 !important;
  --theme-content-color2: #D6D6D6 !important;
  --theme-content-color3: #D6D6D6 !important;

  --theme-highlight-green: #8BF9A6 !important;
  --theme-highlight-blue: #00F9FF !important;
  --theme-highlight-bluegrey: white !important;
  --theme-highlight-lightorange: #FF5A2C !important;
  --theme-highlight-orange: yellow !important;
  --theme-highlight-red: #FF1247 !important;
  --theme-highlight-pink: #F02898 !important;
}

What you see above is the code that I added to my “userChrome.css” file to change the appearance of developers tools from this

devtool ui

to this:

devtool new ui

I only wanted to improve the contrast a bit more with darker background and brighter text in the dark theme (also I’m not good at color schemes), so I stayed with some basic colors typically used in dark themes. If you are better with colors, experiment on your own with the colors as you see fit to find a better match for the theme you are using.

The code is just a list of CSS color variables used to color the various UI parts of DevTools. We found the code in a file called “variables.css” in a compressed file named “omni.ja”:

In Windows, the file is located at:

F:/firefox/browser/omni.ja. Replace the F: with the drive where you’ve installed your Firefox in.

In OSX, the file is located at:

~/Applications/Firefox.app/Contents/Resources/browser/omni.ja.

These are compressed Java files. In Windows, you can rename the .ja extension to .zip and use the native Windows Explorer extract utility to unload the files within it. In OSX, go to Terminal and run unzip omni.ja. Bear in mind to make a copy of the file in another directory before doing so.

Once omni.ja has beeen extracted, you can find the file at /chrome/devtools/skin/variables.css; yes, the Firefox DevTools skin is under a folder named chrome. In the variables.css, you’ll see a bunch of color variables used for both the light and dark themes as follows

:root.theme-light {
  --theme-body-background: #fcfcfc;
  --theme-sidebar-background: #f7f7f7;
  --theme-contrast-background: #e6b064;

  --theme-tab-toolbar-background: #ebeced;
  --theme-toolbar-background: #f0f1f2;
  --theme-selection-background: #4c9ed9;
  --theme-selection-background-semitransparent: rgba(76, 158, 217, .23);
  --theme-selection-color: #f5f7fa;
  --theme-splitter-color: #aaaaaa;
  --theme-comment: #757873;

  --theme-body-color: #18191a;
  --theme-body-color-alt: #585959;
  --theme-content-color1: #292e33;
  --theme-content-color2: #8fa1b2;
  --theme-content-color3: #667380;

  --theme-highlight-green: #2cbb0f;
  --theme-highlight-blue: #0088cc;
  --theme-highlight-bluegrey: #0072ab;
  --theme-highlight-purple: #5b5fff;
  --theme-highlight-lightorange: #d97e00;
  --theme-highlight-orange: #f13c00;
  --theme-highlight-red: #ed2655;
  --theme-highlight-pink: #b82ee5;

  /* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. */
  --theme-graphs-green: #85d175;
  --theme-graphs-blue: #83b7f6;
  --theme-graphs-bluegrey: #0072ab;
  --theme-graphs-purple: #b693eb;
  --theme-graphs-yellow: #efc052;
  --theme-graphs-orange: #d97e00;
  --theme-graphs-red: #e57180;
  --theme-graphs-grey: #cccccc;
  --theme-graphs-full-red: #f00;
  --theme-graphs-full-blue: #00f;
}

:root.theme-dark {
  --theme-body-background: #14171a;
  --theme-sidebar-background: #181d20;
  --theme-contrast-background: #b28025;

  --theme-tab-toolbar-background: #252c33;
  --theme-toolbar-background: #343c45;
  --theme-selection-background: #1d4f73;
  --theme-selection-background-semitransparent: rgba(29, 79, 115, .5);
  --theme-selection-color: #f5f7fa;
  --theme-splitter-color: black;
  --theme-comment: #757873;

  --theme-body-color: #8fa1b2;
  --theme-body-color-alt: #b6babf;
  --theme-content-color1: #a9bacb;
  --theme-content-color2: #8fa1b2;
  --theme-content-color3: #5f7387;

  --theme-highlight-green: #70bf53;
  --theme-highlight-blue: #46afe3;
  --theme-highlight-bluegrey: #5e88b0;
  --theme-highlight-purple: #6b7abb;
  --theme-highlight-lightorange: #d99b28;
  --theme-highlight-orange: #d96629;
  --theme-highlight-red: #eb5368;
  --theme-highlight-pink: #df80ff;

  /* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */
  --theme-graphs-green: #70bf53;
  --theme-graphs-blue: #46afe3;
  --theme-graphs-bluegrey: #5e88b0;
  --theme-graphs-purple: #df80ff;
  --theme-graphs-yellow: #d99b28;
  --theme-graphs-orange: #d96629;
  --theme-graphs-red: #eb5368;
  --theme-graphs-grey: #757873;
  --theme-graphs-full-red: #f00;
  --theme-graphs-full-blue: #00f;
}

Pick the theme and variables you want to target and add them to your “userChrome.css”.

Here are some more screenshots of my developer tools’ window.

devtool debugger
devtool new ui
devtool store
devtool style

10 Useful Firefox Developer Tools You Should Know

Firefox tool - ruler

Firefox being “developer’s browser” has many great tools to help make our work easier. You can find more on its tool collection on the Firefox Developer Tools webpage and can also try their Developer Edition Browser which has more features and tools that are being tested.

For this post, I’ve listed 10 handy tools you might like from its developer tools collection. I’ve also demonstrated what these tools can do with GIFs plus how to access them for quick reference.

1. View horizontal and vertical rulers

Firefox has a ruler tool that displays both horizontal and vertical rulers with pixel units on the page. The tool is useful for arranging your elements across the page.

Firefox tool - ruler

To access rulers through the menu, go to: ☰ > Developer > Developer Toolbar (shortcut: Shift + F2). Once the toolbar appears at the bottom of the page, type rulers and press Enter.

To make this appear on the developer tools window, Go to “Toolbox Options”. Under the “Available Toolbox Buttons” section, check the “Toggle rulers for the page” checkbox.

2. Take screenshots using CSS selectors

Although the Firefox toolbar lets you take screenshots of the full page or visible portions, in my opinion the CSS selector method is more useful for capturing screenshots of individual elements as well as for elements that are visible on mouse-hover only (like menus).

Firefox tool - screenshot

To take screenshots through the menu, go to ☰ > Developer > Developer Toolbar (shortcutShift + F2). Once the toolbar appears at the bottom of the page, type screenshot --selector any_unique_css_selector and press enter.

To make this appear on the developer tools window: click “Toolbox Options” and under “Available Toolbox Buttons” section, check “Take a fullpage screenshot” checkbox.

3. Pick colors from web pages

Firefox has a built-in color picker tool by the name of “Eyedropper”. To access the “Eyedropper” tool through menu go to ☰ > Developer > Eyedropper.

Firefox tool - colorpicker

To make this appear on the developer tools window: click “Toolbox Options” and under “Available Toolbox Buttons” section check “Grab a color from the page” checkbox.

4. View page layout in 3D

Viewing webpages in 3D helps with layout problems. You’ll be able to see the different layered elements much more clearly in 3D view. To view the webpage in 3D, click the “3D View” tool button.

Firefox tool - 3d view

To make this appear on the developer tools window, click “Toolbox Options” and under “Available Toolbox Buttons” section check the”3D View” checkbox.

5. View browser style

Browser Styles consist of two types: the default style a browser assigns for every element, and the browser-specific styles (the ones with the browser prefix). By taking a look at the browser styles you’ll be able to diagnose any override issues in your stylesheet and also come to know of any existing browser specific styles .

Firefox tool - browser style

To access “Browser styles” through menu, go to ☰ > Developer > Inspector. Then click the “Computed” tab in the right section and check the “Browser styles” checkbox.

You can also open the “Inspector” tab through the shortcut Ctrl +Shift + C and then accessing “Browser styles”.

6. Disable JavaScript for current session

For best practice and screen reader compatibility it is always advised to code any website in such a way that its functionality is not hindered in a javascript-disabled environment. To test for such environments, you can disable the JavaScript for the session you’re working in.

Firefox tool - disable JS

To disable JavaScript for current session click “Toolbox Options” and under “Advanced settings” section check the “Disable JavaScript*” checkbox.

7. Hide CSS style from the page

Just like JavaScript, due to accessibility concerns it is best to design websites in such a way that the pages should still be readable even without any styles. To see how the page looks without any style, you can disable them in the developer tools.

Firefox tool - disable style

To remove any CSS style (inline, internal or external) applied on a webpage, just click on the eye symbol of the listed stylesheets in the “Style Editor” tab. Click it again to revert to the original view.

To access “Style Editor” through menu go to ☰ > Developer > Style Editor (shortcut: Shift + F7.

8. Preview the HTML content response to a request

Firefox developer tools has an option to preview the HTML content type responses. This helps the developer to preview any 302 redirects and check whether any sensitive information has been rendered or not in the response.

To access “Preview” through menu go to ☰ > Developer > Network (shortcut: Ctrl +Shift + Q. Then open the webpage of your choice or reload the current page, click on the desired request (with HTML response) from the list of requests and click the “Preview” tab in the right section.

Firefox tool - preview response

9. Preview webpage in different screen sizes

To test a webpage for its responsiveness use the “Responsive Design View”, which can be accessed by ☰ > Developer > Responsive Design View or with the shortcut: Ctrl +Shift + M.

To make the “Responsive Design Mode” tool button appear, click “Toolbox Options” and under the “Available Toolbox Buttons” section, check “Responsive Design Mode” checkbox.

Firefox tool - responsive

10. Run JavaScript on pages

For quick JavaScript executions on any webpage simply use the “Scratchpad” tool of Firefox. To access “Scratchpad” through the menu go to; ☰ > Developer > Scratchpad or use the keyboard shortcut Shift + F4.

Firefox tool - responsive

To make the “Scratchpad” tool button appear on the developer tools window for quick use: click “Toolbox Options” and under the “Available Toolbox Buttons” section check the “Scratchpad” checkbox.

A Look Into: Firefox Developer Edition

After a short tease, Mozilla has officially released Firefox Developer Edition. It’s a new browser aimed specifically at web developers. Although it hasn’t been announced officially, it looks like it will be replacing Firefox Aurora at some point.

Judging from the name, the official announcements and the landing page it looks like Firefox Developer Edition is the first large browser built for development, not just supporting it. It contains a multitude of debuggers, panels and other utilities, plus it uses its own profile so it can be run alongside regular Firefox more easily. Let’s take a look at what it offers.

User Interface

The interface changes in the Developer Edition already hint at a developer-centric approach. The toolbar is noticeably narrower than both Chrome and regular Firefox while adding more buttons by default.

It’s fairly obvious that the new default theme is dark, which is possibly the result of some clever UI testing. It is extremely important to find everything at a glance while developing. A one second delay in finding something could amount to hours a month. I personally prefer the light colors for casual use, but the dark UI was great in my initial tests.

If you prefer the default theme you can switch the developer edition theme off very quickly using the “Use Firefox Developer Edition Theme” button by going to Menu -> Customize.

On the other hand, there are some interface choices which puzzle me. I’m fairly sure that bookmarking will be far less used in this version and most developers know the Ctrl / Cmd + D key combination to make it happen. The fact that there is a dedicated button for this; the bookmarks section, the downloads section, even the Developer Edition start page seems a bit unnecessary.

First Impressions

My first impression was that there’s nothing I haven’t seen before here. This is even reinforced by Mozilla on the landing page:

“It’s everything you’re used to, only better”

Developer tools handle about the same as they do on regular Firefox, WebIDE and Valence can already be used. Only slight cosmetic changes make the Developer Edition different than Firefox.

That being said, there is an underlying feeling of a good direction here. It seems very much like Mozilla has been waiting to create this version of Firefox for a while, they were just waiting for a critical mass of developer tools and know-how. It feels like they’ve created a framework in which to place future tools and methodologies and put them to the test.

In more developer-friendly lingo: it seems like the Developer Edition is a fork of the regular version which was made just now, with a few tweaks. From here on out, development will intensify and focus specifically on this product, separating it from regular Firefox and making it the go-to place for developers. Or at least that is the intention.

One of the biggest indications of how Mozilla plans to position the Developer Edition is the inclusion of Valence (more on this later). Mozilla’s stance on Valence is this:

“The Adapter is still in its early stages, and is available only as a preview. We do not yet recommend using it for day-to-day work.”

It seems that the Developer Edition will receive tools earlier than regular versions of Firefox. While it doesn’t seem likely that Mozilla will remove developer features from Firefox, perhaps some upcoming ones will only be added to the new Developer Edition. I for one support keeping bloat out of browsers and welcome this new direction.

WebIDE

One of the most prominently advertised features is WebIDE. Added in Firefox 34, it is a replacement for the App Manager – it enables you to run edit and debug Firefox OS applications using the Firefox OS simulator or an actual device. In other words, it is what Xcode is for iOS.

Valence

Valence is essentially a cross-browser debugging tool. It allows the developer tools to work with a wide array of browsers. At the moment the main targets for Valence are Chrome on Android and Safari on iOS. The technical details of this are a bit difficult to comprehend, so have a look at this video done by Mozilla:

Developer Tools

If you’re familiar with developer tools in regular Firefox, then it’s pretty much what you’d expect. Invoke it using Ctrl / CMD + I or right-click on an element and click “Inspect Element”.

Inspector

The Inspector gives you a collapsible tree view of the page DOM. When you hover over an element in the DOM, it is highlighted on the page which is super-helpful for figuring out dimensions and where things are in general.

Doing it the other way around is even more helpful. By clicking on the top right icon as per in the screenshot above, you can cruise through the page and elements will be highlighted under your cursor. In many cases, this is a more viable way of inspecting something when it is in the midst of overlapping elements.

The Inspector allows you to double-click to edit the contents or properties of an element. One trick which may be useful to know is that the DOM can be traversed using the arrow keys, you can even delete and undelete using the delete key and Ctrl / Cmd + Z command.

Clicking and dragging in the DOM will highlight a portion of the DOM, the bounds will be shown on the web page, another great tool for visualizing your HTML structure and CSS code.

The CSS rules for any given element shows up in the sidebar giving you a quick read and easy editing access.

Console

The console is a window that shows aggregate information from CSS, JS, Net, Security and Logging. It is mostly used for Javascript debugging and tracking down missing resources but can also be used to issue commands, even via jQuery.

Debugger

The console is great for quickly logging some script issues and making sure your code works on the first try. If you want to figure out some more complex problems, you’ll need to use the debugger.

By setting breakpoints in your code, you can pause the execution of the Javascript code before that point. You can view where the execution is in the code and you can modify variables before moving on.

This not only enables you to figure out bugs but also lets you test various use cases pretty quickly. It won’t replace unit testing but it will give you deeper insight and a great companion to them!

Style Editor

The style editor is a great place to write styles and see the results applied live. You can select any of the stylesheets loaded or you can import and create new ones on the fly. Any modified file can be saved easily.

While this is an amazingly handy feature for little tweaks, it isn’t so convenient for more complex environments that work with preprocessors. These environments can be set up, but the overhead of doing so is about the same as using a preprocessor which has live reload enabled.

Performance

The performance tool was introduced with Firefox 34 and is a replacement for the JavaScript sampling profiler. It allows you to create extremely detailed performance profiles down to the the toll that reflows and paints, Javascript and CSS parsing takes and more.

Profiles can be saved and imported easily, so you can compare profiles to make your applications streamlined to the extreme!

Timeline

The timeline tool is not available in the regular version of Firefox by default, it enables you to see what operations are performed by the browser engine. The tool will display reflows (layout), restyle, paint, console and DOM events.

Network

The Network tab is great for gaining insight into the requests that your website makes while it loads and while it is being used by users. It provides an overview of resources and status codes, along with the time it took to load and when the loading took place.

The bottom filter allows you to look at specific asset types, a particularly useful tool for figuring out AJAX calls using the XHR type.

Clicking on any asset displays its response and request headers, cookies, parameters, response and timings.

One of the most useful features is the ability to start a performance analysis on your website by right clicking and choosing the appropriate option. This will bring up two pie charts which compare a cached and an un-cached load.

Responsive Design Mode

The responsive design mode allows you to view how your site will look in different sized windows. This is not a true emulator so results may vary somewhat, but it is great for previewing the outcome of media queries.

Once in responsive mode you can switch between preset screen sizes, click and drag for custom sizes, change orientation and simulate touch events.

When developing, I usually change the browser window width and leave it be until I’m done but I find that the responsive design mode is great for final checks and for looking at states in-between breakpoints.

Conclusion

In a nutshell: while there aren’t a lot of brand-spanking new features for developers who keep up with Mozilla news, the direction is very promising. I look forward to a lot of tool-specific features like Coffeescript, Sass, Less and others.

Perhaps even compiler and other processing tools could be added to make Firefox Developer Edition a true developer package, and not just something we use to look at our end result with.

As a seasoned developer, I already have tools to compile my scripts, create final builds, automate general programming tasks, error-check my code and live-reload my browser. If a browser would offer some of these features, it may make some aspects of my work a lot faster. I’ll be following this project with great interest and I suggest you do too.

If you have any thoughts or already have some experience with the Firefox Developer Edition, let us know what you think in the comments.