Firebug is an extension under firefox, be able to debug all site languages such as Html, Css, etc., but the most attractive is FireBug javascript debugging features, ease of use, and in a variety of browsers can be used (IE, Firefox , Opera, Safari). In addition, other very powerful features, such as html, css, dom viewing and debugging, analysis, and so the whole site. In short, it is a complete and powerful WEB development tools. Then there is its open-source software.
Firebug is a development class extends under the web browser Mozilla Firefox, now part of one of the five highly recommended extension for Firefox. It is set to view and edit HTML, Javascript console, network status monitor in one, it is the development of JavaScript, CSS, HTML and Ajax right-hand man. Firebug as a delicate Swiss Army knife, from different angles analysis of the level of detail of internal Web pages, Web developers to bring great convenience. Such as Yahoo! Web page speed optimization suggestion tool YSlow. Firebug is a debug tool. Users can use it to debug, edit, and even deletion of any site CSS, HTML, DOM, and JavaScript code.
(Firebug as a delicate Swiss Army knife, from different angles analysis of the level of detail of internal Web pages, Web developers to bring great convenience .Firebug is a debugging tool.
Users can use it to debug, edit, and even deletion of any site CSS, HTML, DOM, and JavaScript code. )
The main function:
CSS debugging
Each style definition in which style file. You can directly add this viewer, modify, delete some CSS style sheet properties, and see the results of the modified directly on the current page.
A typical application is the page of a block position somewhat a misnomer, it needs to move a few pixels. This time with the CSS debugging tools can easily edit its location - you can move freely pixels as needed.
Tip: use CSS style sheets if you are learning, but always remember what common style sheet values, you can try to select a debugger CSS style sheet properties, and then use the up and down arrow keys to change its value, it I will go along all the possible values for you to see.
CSS -foot mark
We can use Firebug to view the page in a block of CSS style sheets, if further expand the right side of the Layout tab, then it will be marked
In the form of the current block foot area occupied by clearly identifies it to the nearest pixel, more surprising is that you can directly modify the value of each pixel in the visual interface, the location of the page on the block It will vary with changes. When certain elements appear misaligned on the page or area beyond the expected value, the function can provide effective help, you can take this to analyze the relationship between the offset, margin, padding, size, and to find solutions to problems.
Network Monitor
Perhaps one day your boss or clients to find you, you complain crafted web page excruciatingly slow, how do you respond? You might say that this could be a network problem, or the computer configuration problem, or is the program too slow, or say so is their character issues? Anyway, in the end you may be required to solve this problem there are several possible.
Network Health Monitor can help you solve this difficult problem. Firebug Network Monitor is equally powerful, it will be a page in the CSS, javascript and web pages referenced images load time consumed in moments like map revealed, perhaps where you can pick them slow down the culprit of your web page, and then tune to the page, and finally the boss satisfied customers happy, your job and thus also secure.
Network Monitor There are other details of features such as preview pictures, look at each external file or even xmlHttpRequests requested http header and so on.
JS debugger
This is a very nice javascript script debugger little space, but single-stepping, setting breakpoints, variable view window is not a little. As the saying goes small but perfectly formed.
If you have a site that has been built, but it has javascript performance problems or is not perfect, you can count the time each piece of script to run through the Profile panel, see in the end is what the statement execution time is too long, step by step to troubleshoot the problem.
Console Console
Console can display the current page javascript errors and warnings, and prompts the file and line number where the problem, easy to debug, these error error than the browser itself provides a more detailed tips and a reference value. But also particularly useful when debugging Ajax applications, you can see every XMLHttpRequests request parameter post out of the program URL, http header and content feedback, the original seems to work behind the scenes is clearly in the black box console display in front of you.
Like the C shell or Python shell, as you can see in the console variable content directly run javascript statement, even if javascript large segment of the program can be run properly and get information about running period.
The console also has an important role is to see the log of the script, in the past you may be accustomed to using alert to print variable, but Firebug has brought us a new friend - console.log, grammar easiest print log is of:
console.log ( "hello world") If you have a bunch of combined output parameters need to be written like this:
console.log (2,4,6,8, "foo", bar). Firebug's log output have a variety of alternative formats and syntax, and even customize color output, compared to the monotonous alert, clearly more convenient, limited space, here is not described in detail, but the reader debug help improve efficiency, Firebug can go to the official site (see Appendix) view a more detailed tutorial.
Edit HTML
The first time I saw Firebug powerful HTML code viewer, I felt something special, compared to Firefox comes with the HTML Viewer, its powerful lot.
The first thing you see is already formatted HTML code, it has a clear hierarchy, you can easily distinguish a slave parallel relationship between each label, the label folded function can help you focus on the analysis code. Source code also marked above the level of the DOM.
It clearly lists the html element of a parent, child, and root element, with built-in Firebug CSS Viewer uses, will give div + css page analysis written a great deal of benefits. You can also directly modify the HTML source code in the HTML Viewer, and the first time to see the effect of changes in the browser, even with this page designers will make many dead set on becoming a fan of Firebug.
Sometimes the page, such as a mouse onmouseover javascript will dynamically change the background color of some style sheets or HTML elements based on user actions, change the HTML Viewer will be caught down the page content, and highlighted in yellow marker and let web page black-box operation completely become history.
Inspect the use of checking, we can also use the mouse to select a number of blocks on the page directly, view the HTML source code and CSS style sheets, to achieve true WYSIWYG, if you use an external editor to modify the current page , you can click the reload picture Firebug reload the page, it will continue to follow before you use Inspect the selected block, to facilitate debugging.
DOM Viewer
DOM (Document Object Model) inside Object, and contains a large number of functions, events in the past, you want to be found from the required content, trivial, and it is like you go to a huge library, want to find a few this name is not very precise little book, many choices will let you know what to do. The use Firebug's DOM inspector was able to easily view the internal structure of the DOM, DOM helps you quickly locate the object. Double-click a DOM object, you can edit its variable or value, edit the same time, you may find that it also has auto-complete function, when you enter document.get, press the tab key can be filled as document.getElementById, Very convenient. If you think that filled was not ideal, press shift + tab will be restitution. With the Firebug's DOM inspector, your javascript driven from found objects, Web developers might become a pleasure.
Details Firebug Tutorial: Ali Cloud University - developers classroom