ie 下 firebug怎么使用 -优快云博客

本文详细介绍了 Firebug Lite 1.3 的新特性和改进，包括用户界面、CSS 功能、控制台、核心模块、插件系统等，并提供了详细的安装方法和选项配置指南。

http://uicss.cn/r.php?hr=http://getfirebug.com/lite.html

Overview

This version was conceived to put the Firebug Lite in a new level, by allowing code reuse from Firebug's original source. A new core was created to accomplish the following goals:

Performance - the core of Firebug Lite 1.3 was rewritten from scratch taking the performance into account in the first place.

Modularity - the code is now more modular, making it easier to add new features and UI components such as panels, buttons, menus etc. The modularity also helps the development process. Once the modules can be isolated it is easier to detect the cause of complicated problems like memory leaks.

Shared code - the core was designed to make it possible to port some code directly from the Firebug source with as few as possible modifications. As a result some features and UI elements behave exactly as in Firebug.

Compatibility - the new core is compatible with XHTML and XML+XSLT documents. Thanks to the new context-independent approach it supports now the experimental persistent popups feature (popups that "live" across different page loads of the same domain).

What's New?

User Interface

Port of Firebug's Visual Object Representation (aka Reps)
Recreation of Firebug 1.3 User Interface with pixel precision
Menu options
Resizable Side Panel
Skinnable Interface

CSS

CSS cascading view
CSS inheritance view
Live editing CSS rules and properties
Autocomplete as you type feature, with smart suggestions (you'll get only the suggestions you need for each property)
Increment/decrement with UP/DOWN and PAGE UP/PAGE DOWN keys

Inspector

Full BoxModel Highlight including margin, border, padding and content boxes
The BoxModel is highlighted when you move your mouse over a representation of a HTML element, in any of the place of the User Interface
Elements are selected on-the-fly while using the Inspect tool

Console

console.group() , console.groupCollapsed() and console.groupEnd()
console.trace() (now with file name and line numbers for some browsers)
Command line API functions $() , $$() , and dir()
Command line shortcuts $0 and $1 for recent selected elements
Autocomplete (tab, shift+tab)
can capture console messages before DOM document creation (when installed at the HTML header)

Core

XHR watcher (with Headers, Response, Post and Params tabs)
Port of Firebug Library (aka Lib, FBL)
Port of Firebug DOM Templates Engine (aka Domplate), the magic behind Reps
Plugin system like Firebug
Context-independent (will allow cross-iframe debugging, and persistent popups)
Persistent popups
Synchronization across different windows (iframe, popup)

And more...

For a complete list of changes, check the changelog .

1.3. What's Not in Lite?

Some features are not included in Firebug Lite 1.3, but due the new core that supports code sharing from Firebug, are likely to be included in the Firebug Lite 1.4 version:

Live editing for all panels
Layout Side Panel
Context menu options
Tooltips (to show colors and images)
Search feature

Other features though are too dependent in browser internals and will not be supported (at least in a near future*), such as:

Javascript debugger / Javascript profiler
Net panel / HTTP and XHR monitor
Access to restricted URI resources
Highlight HTML changes

*Discussions about remote debugging indicates that should be possible to support JavaScript debugging in browsers like Google Chrome and Opera in the future.

Install

Bookmarklet

Bookmark the following links:

Stable channel

Firebug Lite
Firebug Lite debug

Beta channel

Firebug Lite beta

Live link

You can also link directly to the hosted version at getfirebug.com. Copy the following code, and paste it in the TOP of the HEAD of your document:

Stable channel

Firebug Lite: <script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>

Firebug Lite debug: <script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script>

Beta channel

Firebug Lite beta: <script type="text/javascript" src="https://getfirebug.com/firebug-lite-beta.js"></script>

Local link (offline)

If you need using Firebug Lite while offline, download the code , copy it to a local destination, and link the firebug-lite.js in the TOP of the HEAD of your document:

If you want to debug the local installation, use the firebug-lite-debug.js file instead:

Options

The properties you can change include (with respective default values):

saveCookies - false
startOpened - false
startInNewWindow - false
showIconWhenHidden - true
overrideConsole - true
ignoreFirebugElements - true
disableWhenFirebugActive - true
enableTrace - false
enablePersistent - false

Here is the list of methods you can use to change the options, in ascendant order of priority, that is, a particular method will override the options of preceding methods:

<html debug="true">

For backwards compatibility you can still use the debug="true" attribute in the <html> tag to make Firebug Lite starts opened, like:

<html debug="true"
>

Script URL options

You can also set the options using URL fragments, specially handy to tweak options in your bookmarklet.

https://getfirebug.com/firebug-lite.js#enableTrace

Options are separated by commas (, ), and values are informed using the equals to (= ) symbol. If no value is informed, "true " is assumed.

path/to/firebug-lite.js#enableTrace,overrideConsole=false

is equivalent to:

path/to/firebug-lite.js#enableTrace=true,overrideConsole=false

Script JSON options

It is possible to set options using a JSON object inside the linked script:

<script type="text/javascript" 
src="https://getfirebug.com/firebug-lite.js">
{
    overrideConsole: false,
    startInNewWindow: true,
    startOpened: true,
    enableTrace: true
}

</script>

Cookies

Finally, you can override the options using cookies, via User Interface, by clicking in the Firebug icon in the upper-left corner.

Extensions

If you are familiar with Firebug extension development, you will see that developing an extension for Firebug Lite is very similar. In a Firebug extension all code is encapsulated in a strange at first glance but very clever way:

FBL.ns(function() { with (FBL) {

// extension code

}});

In a Firebug Lite extension the code is encapsulated in a similar way but using Firebug.extend instead, once the FBL module (Firebug internal's library) is not exposed to the global namespace:

Firebug.extend(function(FBL)
 { with (FBL) {

// extension code

}});

If you are not familiar with Firebug extension development, I suggest looking at Honza's series of tutorials, including Firebug Tutorial and Domplate Tutorial .

Here's a sample of how to create a new panel in Firebug Lite:

Firebug.extend(function(FBL) { with (FBL) {
// ***********************************************************************

function PluginPanel(){};

PluginPanel.prototype = extend(Firebug.Panel,
{
    name: "Plugin",
    title: "Plugin",
    
    initialize: function(){
        Firebug.Panel.initialize.apply(this, arguments);
        
        this.panelNode.innerHTML = "Hello World!";
    }
});

Firebug.registerPanel(PluginPanel);

// ***********************************************************************
}});

Debug mode

The debug mode helps detecting errors in Firebug Lite. When in debug mode, Firebug Lite will behave as explained below:

Firebug Lite starts opened.
The internal library used by Firebug Lite (aka FBL ) is exposed to the global namespace allowing the inspection of its content.
Firebug Lite will be forced to open even when Firebug is active (which is not the default behavior), so you can use Firebug to debug it.
The "Trace Panel" is enabled (in which internal log messages of Firebug Lite are printed).

The debug mode will be activated when you run the Firebug Lite debug bookmarklet, and when you the load the "firebug-lite-debug.js" or "firebug-lite-dev.js" files. You can also activate it manually by setting a special option "debug" to "true" , using the Script URL or Script JSON methods.

Development mode

If you want to debug Firebug Lite, fix a bug or add a new feature, you will want to run Firebug Lite in development mode. To do so, first checkout the latest version in our repository, and then insert a script at the TOP of the HEAD of your document.

When in development mode, some things behave quite differently to make the development process easier, such as:

All script files are loaded separately, without compression.
The internal library used by Firebug Lite (aka FBL ) is exposed to the global namespace allowing you to inspect its content. It is also exposed the domplate and its classes, and the FBTrace object
The skin is loaded in a separated file allowing you to rapidly change the style and/or markup of the User Interface.
Firebug Lite will be forced to open even when Firebug is active (which is not the default behavior), so you can use Firebug to debug it.
The "Trace Panel" is enabled (in which internal log messages of Firebug Lite are printed).
A new "Dev Panel" will be available with tools to compress the skin and the source code of the application in a single file.