Opening and Closing Firebug
- Open Firebug: F12 or clicking on the
bug at the right of the right of the browser status bar. - Close Firebug: F12 or clicking on the bug at the right of the right of the browser status bar or clicking on the
in the upper right hand corner of the firebug window. - Undock Firebug into its own window: click on the
in the top right corner of the firebug window or Ctrl+F12.
Firebug Window Overview
- Console Tab: Contains command line javascript, shows javascript error message log, can enter JavaSript commands after the >>> at the bottom
- HTML Tab: Shows HTML as an indented hierachy of DOM nodes, which you can open and close to see or hide child nodes.
- CSS Tab: CSS inspector, view all loaded style sheets, modify styles on the fly. See list of styles sheets and select one to view from this pane by clicking on the drop down list on the top of Firebug window, to the right of "Edit".
- Script Tab: Shows the javascript files and the calling document. See list of included JavaScript files and select one to view from this pane by clicking on the drop down list on the top of Firebug window, to the right of "Inspect". Set breakpoints and conditions underwhich break points appear.
- DOM Tab: Shows all the page objects and properties of the window. As variables are properties of the window object, Firebug displays all JavaScript variables and their values.
- Net Tab: Shows all the downloads, how long each resource took to download, the HTTP request headers and server response sent for each resource.
Firebug is always just a keystroke away, but it never gets in your way. You can open Firebug in a separate window, or as a bar at the bottom of your browser. Firebug also gives you fine-grained control over which websites you want to enable it for.
Inspect & edit html
Firebug makes it simple to find HTML elements buried deep in the page. Once you've found what you're looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.
You can change text nodes by selecting the text node with the "inspect" function and then clicking on the text node in the HTML panel.
Firebug is both an inspector and an editor. All objects in the HTML, CSS and JavaScript files can be edited with a single or double click. As you type, the changes are immediately applied in the browser window providing instant feedback.
Tweak CSS to perfection
Firebug's CSS tabs tell you everything you need to know about the styles in your web pages, and if you don't like what it's telling you, you can make changes and see them take effect instantly.
When you inspect an element, the left panel displays the HTML, and the right panel shows the CSS. Next to the CSS label at the top of the right panel is a tab labeled "Layout". This Layout tab illustrates the CSS box model as it applies to the selected element.Firebug allows you to edit attributes and attribute values: To change an attribute or the value of an attribute, click on the term or value, and edit it. Pretty simple! The effect of the change will be immediately visible in the browser window.
One of the best components of this feature is figuring out exact positioning, padding and margins. Firebug provides wonderful support for changing numeric values. Simply click on the numeric value you want to change and change it with the numbers on your keyboard, or click on the up or down arrow to increment or decrement the value by one.
Firebug allows you to easily inspect ancestor elements: To the right of the keyterm "inspect", Firebug displays all the ancestors of the currently selected element. To inspect an ancestor, simply click on it in the list. The left and right panels will both change to display the properties of the newly selected element.
Debug and profile JavaScript
Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and have look at the state of the world. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast.
The "Script" tab allows you to pause execution on any line. Clicking on the line number in the script tab sets a breakpoint. You can make that breakpoint conditional by setting a statement that if true will trigger the breakpoint. Simply right click to the left of the line number to set an expression (where you had left clicked to set the breakpoint) or right click on the line and select "Edit breakpoint condition": "this breakpoint will stop only if this expression is true" is the message you should see. You can contine, step over, step into or step out of a line.
Quickly find errors
When things go wrong, Firebug lets you know immediately and gives you detailed and useful information about errors in JavaScript, CSS, and XML.
Explore the DOM
The Document Object Model is a great big hierarchy of objects and functions just waiting to be tickled by JavaScript. Firebug helps you find DOM objects quickly and then edit them on the fly.
The DOM inspector provides information about all the properties of all the objects in your document. The coolest feature of Firebug is that while making dynamic updates to your page will not alter the content visible in the "view source" feature of the browser, it will update the content in the Firebug panels. So, dynamically created content is visible not only in the browser (as it should be), but the generated code is inspectible (is that a word?) in Firebug.
great
ReplyDelete