Firefox has long been the preferred browser for web development. There are a number of useful add-ons to do the job. In this post, we are going to look into a few add-ons that I think is essential to be installed if you are going to do web development. Also we are going to uncover some of the features in these add-ons that can help.
First of all, we need to install the Firebug.
Recommended Reading: 50 Time Saving Firefox Add-ons
Firebug
Firebug is a must-install add-on for web development. Assuming that you don’t know where to get Firebug, you can install it here. Probably, you need to restart your Firefox before it is activated.
After that, you can view the Firebug through one of the following ways: follow this menu Tools > Web Developers > Firebug, right-click on the web page and choose “Inspect Element with Firebug”.
Alternatively, you can find a Firebug icon in Firefox and click on it, this will show the firebug window;
Firebug is quite identical to Chrome Developers Tools. it has a panel to see the HTML structure and the styles, and also a Console panel to see the errors, warnings and logs. But, I have a few more tips that hopefully you may find useful.
Adjusting Box Sizing
HTML element is made up with CSS box model that consist of margin, padding and object dimension (width/height). There are times when we may need to modify these properties. In that case, you can select one of the elements you want it to change, then go to the Layout panel.
In this panel, you will find an illustration of a CSS box model along with its information, including the width and height. Even though these two properties are not specified in CSS, this tool is clever enough to determine the value. If you need to modify them, you can simply click on the value and use the up or down arrow key to increase or decrease the value.
Computed styles
In many situations, you probably are wondering why certain styles are not applied. One of the easier and faster ways, particularly when you have thousands of lines of styles, is by inspecting it from the Computed Style panel. This example shows that the anchor tag text color is overwritten by .button class, while the background of the .button class is overwritten by .button.add.
Inspecting Font Family (the easy way)
You probably often find something like this in font-family property in CSS with various font families. Unfortunately, this won’t tell us specifically which font the browser takes. To make the identification easier we can install this Firebug extension namely FireFontFamily.
After the installation is done, load your webpage, and now we can clearly see which font family is applied. In our case it is in fact Helvetica Neue (see shot).
Analyzing Performance
This might be platitude, but Site Speed is now one of Google parameters (algorithm) in deciding website quality; the website that loads faster is considered to be well developed and ranked higher in terms of content. So speed is not something that should be overlooked.
Net Panel
The first place that you might need to visit to inspect your website performance is the Net panel. This panel will record the HTTP request of your website when it is loaded. This screenshot below shows a webpage that loads 42 request and takes around 4.36 seconds to load.
You can then sort the HTTP request upon their type like HTML, CSS, and Images.
Yslow!
Furthermore, you can also install YSlow, an extension for Firebug from Yahoo!. After it is activated, you will find an additional panel expressively called Yslow!.
Similar to Net panel, Yslow! will record the webpage performances when it’s being loaded, but then it will also tell you why the webpage is slow and what can we do to solve it. In this example, we run a test to a webpage and it is scored 86 for overall performance, which is considered OK.
Page Speed
Alternatively, you can also install Page Speed from Google. Similar to Yslow!, it tests website speed performance, albeit the test result may be slightly different. This example shows that the same webpage scored 82 according to Page Speed.
For More: Tools, Tips and Best Practices for Web Optimization
Web Developer Tools
Web Developers Tools is obviously for web developers and it has a bunch of features packed in this toolbar. But this one below is one of my favorites.
Image Inspection
There are times when we may need to get image information from the webpage. I commonly see people do this by stumbling across the browser or by right-clicking the image and select View Image Info, like so:
But this way is not quite efficient when we need to get the information from many images. In that case, we can utilize the Images feature from the add-on. This feature is easily accessible from the Image menu from the toolbar.
And, this example shows how we show the image dimension and image file size simultaneously:
Firefox Built-in Tools
In recent versions, Firefox has tremendously enhanced its built-in features for web developers, some of them are:
Native Inspect Element
This native Inspect Element from Firefox may look similar to “Inspect Element in Firebug”, but it actually acts in different ways.
This time, I will not go through this feature further, as it is essentially identical to Firebug HTML and CSS panel, albeit with a difference in layout and design. But, there is one distinctive feature that is worth trying out, the 3D view.
Using 3D view you can view the webpage structure in depth. To activate this view, you can find the button at the bottom right of the “Firefox Native Inspect Element”. This is how the 3D view looks like.
I don’t use it as often as other features though, but it’s quite an innovative feature from Mozilla I admit, and certainly very useful in certain situations.
Web Design View
Since the increasing popularity in Responsive Web Design, Firefox has initiated a Responsive Bookmarklet to the Browser. This tool will allow us to test our responsive website in different viewports without resizing the browser window.
This view is available from this menu: Tools > Web Developer > Web Design View. And, this how the view looks like.
Style Editor
Lastly, if you are working with CSS frequently, you will likely fall in love with this feature. Since the version of 11, Firefox had added Style Editor in its native developer tools.
This feature is as cool as the Web Design View, it allows you to edit the CSS, see the impact instantly on the browser and save the changes that directly affects the CSS source file.
The Style Editor is available from the following menu: Tools > Web Developer > Style Editor.
Final Thought
There is a bunch of features packed in these Firefox add-ons and those discussed here are just some of the features I utilize quite frequently during web development. Nonetheless, you may have some other tips that might be useful to increase web development productivity in Firefox.
What features do you use frequently? You can share your thoughts in the comment box below.
A Look Into: Essential Firefox Tools For Web Developers
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.