Explore Firefox developer tools
Being a “developers friendly” browsers. Firefox aims to provide as many tools as possible to make life healthier for developers file. Healthier in the sense that developers get to do their job effectively and deliver the product on time. Freeing up more time to do stuffs like exercising, spending time with family or planting trees.
This article will explore the developer tools available in the Firefox standard browser. The developer tools are there to assist web developer to examine, edit and debug HTML, CSS and JavaScript. If you need more advance tools and features, do check out Firefox Developer Edition Browser.
Accessing the developer tools.
Let's face it, we developers just want to get things done fast and usually the most common developer tool that we use is the “Inspect Element” tool.
However, Firefox do offer a variety of developer friendly tools that can do magic such as :
1. Execute JavaScript
There are times when we just want to write and test a line or two of JavaScript and see how it executes on a page. Firefox's Scatchpad allows you do to just that. Click the ☰
icon on the top-right corner, then click Developer
and scroll down to Scratchpad
or use the keyboard shortcut Shift
+ F4
to access Scratchpad.
2. See how webpage behaves in different screen sizes
Gone all the days when web developers only need to worry about fitting their web page to a single display resolution. Web pages need to be responsive to different screen sizes and you can test a web page responsiveness by using the Responsive Design View
tool. Click ☰
> Developer
> Responsive Design View
or with the keyboard shortcut : Ctrl
+ Shift
+ M
.
Toggle the screen resolution to view how the web page response.
3. Check security setting of web page content
There are times when you want to know encryption protocol that the elements on the web page are encrypted with or which elements caused the page HTTPS to load insecure content . There is a Security tab under the ☰
> Developer
> Network
or with the keyboard shortcut : Ctrl
+ Shift
+ Q
that allow you to do just that. The secure content are marked with green locks and insecure content are marked with lock with red stripe.
4. Disable JavaScript
Want to see how a web page looks like without JavaScript? Firefox allows you to disable JavaScript for the current session. To disable JavaScript, click "Toolbox Options", look under "Advanced settings" and tick the "Disable JavaScript*" checkbox.
5. View a webpage in 3D mode
One of my favourite developer tool is Firefox ability to render a web page in 3D mode. Viewing in 3D mode helps a lot in troubleshooting layout problems. It is not enable by default. To enable it, you need to click "Toolbox Options", look under "Available Toolbox buttons” and tick “3D View”.
6. Pick color HEX code off web page
As web developers, we surf a lot of web pages to get inspirations and there are times we want to take a look at a color HEX code from a webpage with a very unique color scheme. Firefox has the “Eyedropper” tool that will allow web developer to pick up the color HEX (hexadecimal) value off the webpage.
There are more awesome developer tools available on Firefox that are not listed here. You can check out more features at https://developer.mozilla.org/en-US/docs/Tools
Reference :
By AdamNg
IF you gain some knowledge or the information here solved your programming problem. Please consider donating to the less fortunate or some charities that you like. Apart from donation, planting trees, volunteering or reducing your carbon footprint will be great too.
Advertisement
Something interesting
Advertisement
Tutorials
+9.5k Golang : Ordinal and Ordinalize a given number to the English ordinal numeral
+13.7k Golang : Check if a file exist or not
+4.7k Golang : Display packages names during compilation
+6.8k Golang : Array mapping with Interface
+4.8k Golang : Customize scanner.Scanner to treat dash as part of identifier
+7.6k Golang : Get all countries phone codes
+18.3k Golang : convert int to string
+13.7k Elastic Search : Mapping date format and sort by date
+45.3k Golang : Read tab delimited file with encoding/csv package
+7k Golang : Check to see if *File is a file or directory
+14.6k JavaScript/JQuery : Detect or intercept enter key pressed example
+20k Golang : Read directory content with os.Open