码迷,mamicode.com
首页 > Web开发 > 详细

Firebug 2.0 正式发布,网页开发插件

时间:2014-06-13 06:46:35      阅读:334      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   java   http   

  • Firebug 2.0 is compatible with Firefox 30 – 32

Firebug 2 UI:

bubuko.com,布布扣

The screenshot shows Win OS theme other OSes (Linux and Mac) have own custom theme.

New Features

Firebug 2 introduces many new features and bug fixes also because we completely removed dependency on the ancient Firefox debugging engine (aka JSD1) and incorporated new debugging engine known as JSD2.

 

Syntax Highlighting

One of the most visible new features is probably that the Script panel supports JavaScript syntax highlighting.

bubuko.com,布布扣

Syntax coloring is also there if you edit HTML as a free text by clicking on the Edit button in the toolbar. The same for CSS source edit mode…

bubuko.com,布布扣

Pretty Print

The Script panel also supports pretty-printing and if you deal with minified JavaScript code you’ll find this feature extremely useful.

bubuko.com,布布扣

DOM Events Inspector

Firebug 2 integrates existing EventBug extension and introduces new Events side panel within the existing HTML panel. This panel lists all of the event handlers on the page grouped by event type for the currently selected DOM element. The panel is nicely integrated with other Firebug panels and allows to quickly find out which HTML element is associated with specific event listener or see the JavaScript source code (read more).

bubuko.com,布布扣

Searching in HTML Panel

Search in the HTML panel has been improved and the user can now use CSS selectors or regular expressions to find specific elements.

bubuko.com,布布扣

bubuko.com,布布扣

Code Auto Completion

Code auto-completion system has been improved across Firebug 2 UI on several places. It’s now available in the Command Editor (within the Console panel) where you can press the <tab> key to open a little completion popup window.

bubuko.com,布布扣

Auto completion works even in breakpoint-condition popup dialog where it offers variables in the current scope.

bubuko.com,布布扣

You can enjoy auto-completion when editing HTML attributes (works for SVG attributes too) and also within HTML style attribute. All these little details make Firebug and awesome tool to use!

bubuko.com,布布扣

bubuko.com,布布扣

JavaScript Expressions Inspector

When debugging and stepping through your code you can quickly inspect and explore details of any JavaScript expression you see in the Script panel. Just hover your mouse over the expression or selected piece of code and see the result in the tooltip.

bubuko.com,布布扣

You can also right click on an expression (or again on the current selection) and pick Use in Command Line or Inspect in DOM Panel actions.

bubuko.com,布布扣

Console Log Grouping

There is new option in the Console panel that allows to group console logs coming in a row from the same location (on by default).

bubuko.com,布布扣

Inspect JavaScript Function Return Value

This feature allows to examine and modify return value of a JavaScript function. See an example:

function myFunction() {
return foo();
}

The usual problem in other debuggers and tools is is how to examine the return value of foo(). Firebug allows that by stepping through a return statement and displaying the value within the Watch side panel. It even allows you to modify the return value through the Watch panel just like other values (read more).

bubuko.com,布布扣

Show/Hide Firebug Panels

One change we introduced in Firebug 2 is the way how to hide/show individual panels. Check out the next screenshot that depicts how it’s done.

bubuko.com,布布扣

Displaying Original CSS Color Values

Another nice enhancement allows displaying original CSS color values. There is a new option Colors As Authored in the CSS panel that allows displaying CSS color values as they were defined. This makes it easier to compare the styles interpreted by the browser with the ones inside the original CSS source file. While this new option is now the default, you still have the possibility to switch to hexadecimal, RGB or HSL formatting.

bubuko.com,布布扣

Quickly create new HTML attribute

There is a new way how to quickly create new attributes for HTML elements. All you need to do is hover mouse cursor over the closing arrow bracket of an element you want to add a new attribute to. See, the cursor changes its shape into a hand.

bubuko.com,布布扣

Click on the closing tag to open an inline editor and start typing an attribute name.

bubuko.com,布布扣

The rest works as usual. After you typed the name press the tab key and type the attribute value.

bubuko.com,布布扣

Inspect Registered Mutation Observers

The existing getEventListeners() command (see a Firebug tip) has been extended and it now displays also registered mutation observers for given element.

bubuko.com,布布扣

You can use this test page to try it yourself.

Firebug 2.0 正式发布,网页开发插件,布布扣,bubuko.com

Firebug 2.0 正式发布,网页开发插件

标签:style   class   blog   code   java   http   

原文地址:http://www.cnblogs.com/legend2012/p/3781250.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!