Through it we can interact with a web page by executing JavaScript expressions in the context of the page. To access it, just press the keyboard shortcut Control + Shift + K.
For its part, the Browser Consoleit’s like the Web Console, but applies to the entire browser as a whole instead of a single content tab. Thus, it logs the same type of information as the Web Console (network requests, JavaScript, CSS, security errors and warnings, and messages logged explicitly by JavaScript code).
However, its main difference is found in that, instead of registering this information for a single content tab, it registers information for all content tabs, plugins and the browser’s own code. To activate it, just press the keyboard shortcut Control + Shift + J.
Useful plugins for web developers
Although it is true that both with the tool for Firefox developers, as well as the Web Console and the Browser Console we can carry out almost any operation, the truth is that there are more complicated options than others, so, to facilitate your work, we can go to to extensions developed by third parties.
Web Developer, specialized in web development
There are many occasions where a web developer needs to have access to all kinds of functions and tools to be able to perform tasks such as hiding or showing all the photos or activating or deactivating the scripts. To help us with this task, the Web Developer extension extends the features of Firefox by adding a toolbar to the top of any website with various options to work with web pages.
For example, with this bar we will be able to perform HTML and CSS code modifications of a page. You also have the option to inspect the CSS styles of the page elements which will tell us what CCS attributes they have and what styles affect them. In addition, we can change your resolution and even activate or deactivate JavaScript. We can download Web Developer from the Firefox Browser Add-ons.
Window Resizer, change the size and position of the current window
We are talking about a plugin that will allow us to easily change the size and position of the current window in which we find ourselves. We’ll be able to test different sizes and resolutions quickly and accurately so we can see how our designs appear at standard resolution sizes. We simply have to open the user interface and select the desired design (size and position), entere the 20 predefined designs available to choose from and the window will position and resize to the chosen layout.
We can also add a new custom layout to be added to the UI. Of course, we must be clear that its mission is to change the size of the window, but not the page we are looking at. Against it, it must be said that its user interface is not as friendly as we would surely want. If we want to try Window Resizer, all we have to do is download its latest available version.
Aardvark, select and edit elements of a website
This Firefox extension is aimed at front-end web developers. Through it, it allows us to select elements of the web page and edit them, change their size, using quick editing controls for this. For this, it offers us several options such as modifying its colors, which can come in handy when printing. It can also be used for view the source code of one or more elements, and see how the page is created, block by block.
Once installed, we simply have to slide the mouse over the page to see a red rectangle located under each element of the cursor. In turn, it shows us a yellow legend that informs us of the type of HTML element and its class, if it exists. By pressing different letters on the keyboard we can carry out different actions such as removing the selected element from the page, isolating the element or moving the selection rectangle towards the element that contains it. Download the latest version of Aardvark to start using it.
ColorZilla, to perform color tasks
We are talking about an add-on for Firefox specially focused on helping web developers and graphic designers with tasks related to color, both basic and advanced. With it we will be able to determine the colors with which our website is made. With ColorZilla you can get a color reading from anywhere in your browser, quickly adjust this color and paste it into another program.
The most important thing is that this plugin has such important tools as the “Advanced Eyedropper”, the “Color Picker”, a “Gradient Generator”, among others. with his integrated palette browser, we can choose the colors as a whole and predefined colors, as well as save those that we use the most to be able to create our own personalized palette. We can download ColorZilla for free from the Firefox website.
FireShot, create screenshots of our website
It is an add-on for Firefox specially indicated for web developers, with which you can create screenshots of your own web page, offering a set of editing and annotation tools to work with it. Among its features, it should be noted that it allows save screenshots to PDF files Single or multi-page hyperlinked, text-searchable. It also allows you to capture all the tabs with a single click and has a function to crop and change the size of the capture.
It is possible to download a free version of FireShot, although for the most demanding users there is also a paid version that will be necessary to take advantage of all its features. This Pro version has a free trial period of 30 days and its price is 39.95 euros.
Greasemonkey, improves the web reading experience
This extension for Firefox allows us modify the appearance, function and execution of a web page by using short snippets of JavaScript and DHTML code. For this we have hundreds of scripts that will be essential to download to improve the use of this complement. Through its use we can improve our reading experience, adding new functions, correcting errors or improving its search services, among other features.
This complement also allows us to create our own scripts, although for this it will be necessary to have the appropriate programming knowledge. If we want to install Greasemonakey in our Firefox browser, we can do it for free from the Firefox Store.
User-Agent Switcher, use a user agent switcher
This add-on for Firefox is especially focused on developers who need, for example, to make a website work in both mobile browsers and desktop browsers. This user agent switcher spoofs and mimics the strings of a user agent in our browser. In addition, it also allows us configure specific URLs that we want to change whenever we need it.
Depending on our user agent, some web pages can determine whether we are using a mobile or desktop browser, they also require us to log in to view their content, but in return they give search engines access to read it. If we want to change our user agent we can download User-Agent Switcher from the Firefox Browser Add-ons.
HTTPS Everywhere, enable HTTPS encryption automatically
This Firefox add-on takes care of encrypt all communications of the most important websites. Although many sites already support HTTPS, you can still use the classic HTTP, so you can use encrypted pages with links that take us to other unencrypted sites. By using this plugin, we can fix the issues by rewriting all HTTPS requests.
With this extension we can protect our communications by automatically enabling HTTPS encryption on sites that support it, even when we type URLs or links that omit the https prefix for added security. To use it, simply download its latest available version.
