How To Use Firefox Developer Toolbar

On with 0 Comment
Firefox now includes a powerful graphical command line interface (toolbar) for developers and advanced users. You can activate this toolbar through SHIFT + F2 key combination. There are several interesting and useful options available in this toolbar that can be used by general users as well. This handy toolbar is ideal for fast debugging and web page analysis while designing a website. It can also be used for taking screenshots, managing cookies & addons. We'll be discussing some of the most useful and handy features of this toolbar that are easy-to-use and delivers instant information and results. This toolbar sits nicely at the bottom of the browser leaving the entire canvas available for results and data. Let's see how we can leverage the powerful features of this useful developer toolbar.

Test Responsive Design Page Elements

As more and more websites are switching to a responsive layout, testing and designing them is a big challenge for the web developers. This becomes more challenging due to the large array of mobile and tablet devices with different screen dimensions. Fortunately, you can easily test your responsive design through this toolbar without any need to switch to device emulators. While using this feature, you can resize the testing canvas on the fly and can see how your target page element renders in different screen sizes.

Responsive design testing through Firefox developer toolbar

You can perform these tests by combining 'inspect' and 'resize' commands available in the toolbar. First you need to target the page element you want to monitor in different canvas size. Let's say a menu has the id 'primary-nav' and the home page link has the class 'home-link' associated with it. Now you want to monitor how this home link renders in different screen dimensions. First use the inspect command like this.

inspect "#primary-nav a.home-link"

Notice the tag 'a' associated with the class 'home-link' because we're going to monitor a hyperlink in the primary navigation menu. Once you use this command in the developer toolbar, that page element will be highlighted denoting that it has been selected successfully for monitoring purpose. The next step simply involves resizing the canvas to targeted dimensions so that you can see how your targeted web element (home link in our case) renders and changes in different canvas sizes. Use the following 'resize' command to change canvas size.

resize to 300 600

This command tells the browser to change the canvas size of 300x600 px. This way, you can use any value to change the size of canvas to test select web elements on your responsive design. When you're finished with testing, make sure you've used 'resize off' command to come to the normal mode.

Take Custom Screenshots of Web Pages

Another handy feature of these toolbar is the ability to take custom screenshots of different areas of the web page. You can either select entire web page or you can target a specific page element so that only that specific area in included in the screenshot. This is very handy tool to capture selective portions of the web page. Let's say you want to capture the subheading with h3 CSS selector. You can use the following command to capture only that part of the entire web page.

screenshot sample.png 0 false h3

This command will save the subheading screenshot in a file sample.png in the default saving directory. If you want to capture the current canvas, you can simply omit the last three options. The 0 present in the command indicates the delay in seconds before capturing the image and false ensures that anything outside the canvas is not included in the screenshot.

Modify and Test Page Elements in Bulk

Firefox developer toolbar has another powerful command that can be used to test web pages in an effective way. For example, you've applied a custom class to a page element with browser-specific CSS attributes. But, you want to be sure that unsupported browsers must render that respective page element in a reasonably correct way instead of garbling it due to absence for support of custom class CSS attributes.

Instead of opening different browsers again and again to test such kind of features, you can use the 'pagemod' command. Let's say you have a featured post section with a custom class 'featured-post' through which you've decorated the entire section. Now let's say you want to test how this section will look without the effect of the custom class. You can test this through a simple command.

pagemod remove attribute class featured-post

If you want to remove entire class attribute from the entire web page, simply use the wild card to see the effect.

pagemod remove attribute class *

Notice the star symbol at the end of the command that instructs to remove all class attributes applied on the current web page. This handy testing mechanism is boon for test engineers who regularly check for cross-browser compatible web pages.

Edit CSS Code On The Fly

The combination of 'edit' command and the style editor lets you quickly edit selective CSS code used on the current web page. This CSS code can be present on multiple external style sheets, in the head of the document or can be present in the form of inline CSS. Whatever is the case, while using the edit command, you'll get the complete clickable list of editable CSS code portions that will be opened in a user-friendly CSS editor.

CSS editor

To edit the see the changes live on a webpage simple use the following command in the developer toolbar.

edit [URL of CSS file] [line number - optional]

The square brackets shown above are not the part of the command. Now you may question about the difficulty in using this command. How can one type the entire URL of a CSS file every time the editing needs to be done. Fortunately, the command automatically pop ups a slider with hyperlinks to all CSS files used on the current web page. Simply click and select the right file and you can start editing CSS and can see results live on the page.


Post a Comment