Learn about Firefox's Web Developer Tools

TipsMake.com - In the following article, we will introduce and guide you how to exploit and use the supported Web Developer toolkit available in Firefox . This component includes an application for analyzing, checking websites, implementing any kind of JavaScript code, requests and messages via HTTP . Recently, Mozilla has integrated the Inspector tool and updated Scratchpad in Firefox 10 version. This combination has made 'fire fox' one of the few ideal browsers for online application developers and web developers.

Page Inspector:

Check specific sections on any web page by selecting that area, right-clicking and selecting Inspect (press Q ), or you can start Inspector directly from the Web Developer menu:

Learn about Firefox's Web Developer Tools Picture 1

You will see a toolbar displayed at the bottom of the screen used in the Inspector control. When selecting certain components, all the rest will be blurred:

Learn about Firefox's Web Developer Tools Picture 2

If you want to select a new detail, click the Inspect button on the toolbar, move the cursor, select a new element and Firefox will highlight it immediately below the mouse position:

Learn about Firefox's Web Developer Tools Picture 3

Besides, the simple and appropriate layout of Inspector also helps us easily distinguish different parent and child objects.

HTML Inspector:

Click the HTML button to display the currently selected HTML code:

Learn about Firefox's Web Developer Tools Picture 4

Here, we can expand or shrink HTML tags. If you want to see the entire code in a simple way, select View Page Source from the Web Developer menu .

Learn about Firefox's Web Developer Tools Picture 5

CSS Inspector:

Click the Style button to display the CSS formatting being applied on the selected part.

Learn about Firefox's Web Developer Tools Picture 6

There is also a CSS properties panel, users can switch between them by clicking the Rules button or Properties , if you want to search for information quickly, enter the corresponding data in the Search box.

Learn about Firefox's Web Developer Tools Picture 7

Or directly edit CSS quickly and easily from the Rules panel, uncheck any box to turn off the rule, click the corresponding link to change the rule, manually assign a new Rule. object from the top panel. For example, here we have added the CSS font-weight: bold attribute ; to make the text bold.

Learn about Firefox's Web Developer Tools Picture 8

JavaScript Scratchpad:

The new Scratchpad feature has been integrated into Firefox 10 by Mozilla developers, and now comes with the ability to mark the necessary syntax and commands.

Learn about Firefox's Web Developer Tools Picture 9

After selecting a certain piece of code, select Execute> Run menu, and the selected code will run directly on the open tab.

Learn about Firefox's Web Developer Tools Picture 10

Web Console:

In fact, this is an alternative to the Error Console section on older browser versions - which will be quickly removed in new Firefox versions.

Learn about Firefox's Web Developer Tools Picture 11

The main console section displays four different types of notifications:

1. Requests, signals sent in the network.
2. JavaScript error message.
3. CSS error message.
4. Notice from the Web Developer section.

So what is the notification from Web Developer? These are simply messages displayed from the window.console object. For example, we can run the JavaScript code window.console.log ('Hello World'); directly in Scratchpad to print this message to Console . Besides, web developers can integrate this function with JavaScript to improve debugging ability.

Learn about Firefox's Web Developer Tools Picture 12

Refresh the current page, and we will see the network requirements created by the system as well as many other notifications.

Learn about Firefox's Web Developer Tools Picture 13

Use the Search box to filter data, click on a request to display details, specifically:

Learn about Firefox's Web Developer Tools Picture 14

In Firefox 10, the Web Console can work in tandem with the Page Inspector. The parameter $ 0 is the selected object in the Inspector table. Therefore, if you want to hide any object, just select and run the command $ 0.style.display = 'none' in the Console section.

Learn about Firefox's Web Developer Tools Picture 15

If you want to learn more about how to use the Console and its associated functions, please go to the official Developer Network website of Mozilla.

Get More Tools:

In addition, the Get More Tools option will switch to Web Developer 's add on Toolbox on the Mozilla Add-Ons website system, including a lot of utilities for programmers, web application developers, some applications Support like Firebug or Web Developer Toolbar.