Log in Register now

Debugging with firebug

Firebug is a required plug-in for web developers. Now I just can not imagine any normal work without this plugin. Its functionality is so broad that it is difficult to imagine that he is also free. By the way I used to use Opera and Firebug one of the key functional, thanks to which I moved to Firefox. So a brief overview of the features.

If you open up window Firebug extension is at the top of the plug is a set of tabs that implement its main features are:
  •     console JavaScript (Console);
  •     source code editor (HTML);
  •     Stylesheet Editor CSS;
  •     Script Debugger JavaScript (Script);
  •     Inspector DOM;
  •     Tab to the statistics download individual page elements (Net).
JavaScript console in general similar to the built in browser. Using the Options menu you can select the types of errors are displayed (errors and warnings JavaScript, errors CSS, XML error and requests XMLHTTPRequest).
DOM (Document Object Model) - Document Object Model.

DOM Inspector lets you view the structure of the document as a tree with detailed information on each element.

For more information about the item page, click the Inspect button in the plugin menu, then click on the item page. In the HTML editor will be highlighted code for this item.

In the right pane displays information about the styles of CSS, use this element.

But the most useful feature of Firebug is a debugger scripts JavaScript, located on the tab, Script. After setting a breakpoint in the right place refresh the page to trigger a breakpoint.

For stepping script, use the buttons on the toolbar plug-in:

  •     continue execution until next breakpoint (Continue);
  •     go inside the block or function (Step Into);
  •     exit from the block or function (Step Out);
  •     go to the next statement without being logged into the unit (Step Over).

The current values ​​of script variables can be viewed on the tab, Watch, and the list of breakpoints - tab Breakpoints.

Net tab displays the load time of each element on the page (the type of items displayed in the menu you can select the plugin), as well as script input parameters (Params), request headers (Request Headers) and Response (Response Headers) and the contents of the response (Response).

Good luck:)

comments (0)

Only registered users can add comments. Please, Login or Register.