Translation: firebug 1.10 New Features

ArticleDirectory

• No need to restart after installation
• Delayed Loading
• Cookie Management
• Syntax coloring in the command line editor
• Automatic completion
• Style tracking
• New command: Help
• Link to web font Definition
• Support for media queries
• Entity display format
• Color Display format
• Menu tooltip
• Support for "Focus" CSS pseudo classes
• HTTP request from bfcache
• Delete CSS rules

Address: http://hacks.mozilla.org/2012/07/firebug-1-10-new-features/

Today, I installed Firefox 16, which was just released. I found that firebug is unavailable. Check that the original 1.9 version is not compatible with the current firefox version.

I downloaded the new version of firebug 1.10 and found many new features. However, I did not see a complete Chinese introduction on the Internet. Simple translation for your convenience.

Firebug 1.10 has been officially released. Let's take a look at the new features introduced in this version.

 

First, check the following compatibility list:

• Firefox 5.0-13.0WithFirebug 1.9
• Firefox 13.0-16.0WithFirebug 1.10

Firebug 1.10 is realCommunityFirst, let me introduce all the developers who have contributed to firebug 1.10.

Jan odvarko Sebastian zartner Simon Linde Harutyun amirjanyan Steven roussey Joe Walker Stampolidis Anastasios Heather Arthur

Farshid Beheshti Leon Sorokin Florent fayolle Vladimir zhuravev Hector Zhao Bharath thiruveedula Nathan mische

New Features

No need to restart the browser after installation Delayed Loading Cookie Management Syntax coloring in the command line editor Automatic completion Style tracking New command: Help Link to web font Definition Support for media queries Entity display format Color Display format Tooltip for menu items Support for "Focus" CSS pseudo classes HTTP request from bfcache Delete CSS rules

No need to restart after installation

To install firebug, you no longer need to restart the browser, install it, And then F12, firebug is immediately started at your fingertips.

If you upgraded from the previous version 1.9, You need to restart the browser.

Delayed Loading

Firebug will not slow down the start time of Firefox at all! It will be loaded immediately when you are using it for the first time. When you start the browser, only the firebug buttons and start menu will be loaded.

Cookie Management

Firebug allows you to view and manage cookies in a browser. you can disable cookies for specific sites, filter cookies, create new and delete existing cookies. when a specific cookie value changes, you can switch to the debugger to view the script that causes the change.CodeLine, and more! View the complete list of cookie-related features.

Syntax coloring in the command line editor

The Command Line Editor (also known as multiline command line) supports syntax coloring.

Automatic completion

The auto-completion feature has never been so good in firebug. This feature helps you edit CSS attributes, monitor window variables, condition breakpoints, any numbers, colors, fonts, and so on. You only need to edit the page through the firebug interface, and you will see it!

Take a look at the screenshot. When input in the monitoring panel, the current range of variables will be provided automatically.

Style tracking

This feature allows you to track all source locations that affect a specific style. This feature is part of the computing style, and all CSS can be expanded. The computing style also supports color, image, and font prompts.

Look !, Here, we try to set the font size of the selected element in three locations (black ). of course, the blue text on the right and the source location are clickable. You can navigate to the correct location. For details, see detailed explanation.

New command: Help

If you are interested in the availability of commands in the command line (in the console Panel), you only need to enter:Help. You will see the command list with instructions.

The green command name is the link to navigate the user to firebug wiki. More information about the clicked command is provided (including the how-to example)

Link to web font Definition

This feature allows you to quickly check Custom font definitions. All you need to do is right-click your font value and clickInspect DeclarationThen, you will be automatically directed to the CSS panel to display the font-defined position, as shown below.

Support for media queries

@ Import the media query of CSS rules can be displayed and edited in the CSS panel. Of course, it can also work automatically in this case. (For example, when I made a screenshot, I clicked on the PX value and then pressed the up cursor key, which is the reason for 401px ).

Entity display format

The HTML Panel provides new options that allow you to change the display format of HTML objects.

In this way, MathML entities are also supported.

Color Display format

You can also change the display format of CSS colors. Firebug provides three options: Hex, RGB, and HSL. These options exist in CSS, style, and computed panels.

Menu tooltip

There are also many small but clean improvements. All menu items have tooltip to introduce related functions. This is especially useful for options.

Support for "Focus" CSS pseudo classes

BesidesHoverAndActiveCSS pseudo-class, firebug also supports:Focus.

This feature is helpful when you want to view CSS rules only when the element gets the focus effective. You need to do so.

1. Use firebug viewer to select your element
2. Open the style option menu (click the triangle button next to it)
3. Click: FocusOption
4. Currently, firebug simulates the focus State. Any selected element style using the focus CSS rule will be displayed.

HTTP request from bfcache

The firebug network panel can display requests from the bfcache (back-forward cache). This cache allows fast page requests to be accessed and forwarded. Note that nothing is done for the browser cache.

Taking a look at the screenshot, we changed the background from bfcache, so we can easily distinguish it from other requests. In the screenshot, only the last request is from the server.

To view these requests, You must selectShow bfcache responses.

Delete CSS rules

Other beautiful features include deleting the entire CSS rule, including all its defined attributes. You only need to right-click the CSS rule...

View All 79 extensions in firebug 1.10.

Jan 'honza 'odvarko