Firebug 1.10 - new features

On July 13, simultaneously with the release of the new version of Firefox, the new version of Firebug ( install ), the most advanced and recognized front-end debugger, was announced. Together with team leader Jan “Honza” Odvarko ( his blog and other articles on Firebug, where there are a lot of interesting things), we will look at its new features. This is all the more interesting because the browser itself is slowly gaining strength in debugging, and where to go - Chrome's competitor drives and overtakes, and now even quite enough standard debugging tools are available - showing and walking on the DOM, for example, in the 10th version is already that to investigate bugs, the Firebug add-on is not necessary, but in the 15th version, the JS debugger is promised , fast and does not affect page performance, with remote debugging tools (important for mobile devices). The same path goes Opera. (- approx. transl.).

Let me tell you about the new features of the released release Firebug 1.10.

First of all, let us specify which versions of Firefox include the latest versions of Firebug:
Firefox 5.0 - 13.0 works with Firebug 1.9 ,
Firefox 13.0 - 16.0 works with Firebug 1.10 .

Firebug 1.10 is a true collective product, so let me introduce all the developers:

')
More details:

Installation without rebooting the browser

Installed, pressed F12 - and it is ready to go.
When upgrading from version 1.9, the browser will still have to be restarted.

Delayed addon loading

Now Firebug does not slow down the browser at startup! It turns on, if only the user will need it. Now it starts only the start button and menu commands.

Cook Management

(Previously, numerous Firebug plug-ins and independent plugins did this - Note.) You can disable cookies for specific sites, edit, filter, switch to the debugger when some cookies change their meaning (to see what has changed), and more !

See the full list of cookie related functions .

Syntax Highlighting in Multiline Input Console

It is also called the “Command Editor” - now there is syntax highlighting.

Autocomplete variables

Firebug auto-completion has never been this advanced. It works when editing CSS, when searching for variables in Watch when tracing, when searching for breakpoints - any numbers, colors, fonts, etc .. Just try changing your page through Firebug and see for yourself.

In the figure, when characters are entered into the Watch panel, auto-completion offers available variables from the current Javascript environment (scope).

Style tracing

Look at all the places in the computed styles that were affected by a particular CSS rule through the HTML menu -> Computed on the right side of the panel. It now also contains hints of colors, patterns and fonts.

See 3 places in which the rule tries to set the font size? In one place he succeeded. The blue text on the right is clickable, leading to descriptions of the rules. See detailed description (eng.) . (Applause - the information content of this panel increases - note of translation.)

Help console command

To show the descriptions of the Firebug commands embedded in the command line (yes, there are such, a couple of dozen, I recommend to look at - approx. Transl.) , Type " help " in the console. A list of commands appears with a short description.

Green command names are links to the Firebug wiki with details and examples.

Link to the description of web fonts in CSS

To make a quick transition to the description of custom, custom fonts, right-click on the font name, select Inspect Declaration , and you will be taken to the " CSS " panel, neatly on the font declaration, as shown in the figure.

Query support @ import

CSS @ import media queries are displayed in the " CSS " panel and can be edited. Of course, both line completion and arrow control work. For example, I clicked on “400px” when I took a screenshot, and then the key - the up arrow; It turned out "401px".

Entities Impression Options

In the " HTML " menu, 3 items appeared to change the presentation format of the Entities (descriptions of special characters).

MathML entities are also supported.

Color format display

In 3 menus: " CSS ", HTML -> Style and HTML -> Computed change the viewing format of the color (Hex, RGB, HSL):

Tips for menu items

Trifle, but useful for orientation: hints appeared to each menu line.

Support for the pseudo-class CSS ": focus"

In addition to the long-existing pseudo-classes : hover and : active , in the menu HTML -> Style appeared : focus . This helps to see the result of the action styles without the action itself: do not direct the element to see all the rules applied to it : hover . No need to focus to see all the : focus styles for this item in the right block in the " HTML " section (panel). It is extremely useful if, at the same time, with focusing, we want to copy individual rules - in fact, by clicking on the Firebug panel, we lose focus or pointing in the browser window.

HTTP requests from BFCache

The Firebug " Net " panel now displays HTTP requests from a specific BFCache (Back-Forward Cache). This cache in the browser provides quick navigation while walking through the history (the Forward - Back buttons) and it has no connection with the browser cache.

As you can see in the figure, we have changed the background for requests from this cache, so it is easy to distinguish them from real server requests. (In the picture - only the last request comes from the server.)

To see these requests, you need to set the Show BFCache Responses setting.

Delete CSS rules Delete CSS Rule

Right-click on the rule, another click - and there is no it ... (And before that it was necessary to click on all the properties - approx. Transl.)

---

A total of 79 bugtracker bug fixes were made. Follow our twitter to keep abreast of news.

* http://getfirebug.com/
* Firebug Weblog - all versions and innovations (English) .
* For reference: The whole truth about Chrome (and not only) Web Inspector. Part 1 , @ z6Dabrat, May 14, 2012