Using firebug: Debugging JavaScript, HTML, and CSS

Firebug provided free of charge is an excellent development plug-in for Firefox. It is an integrated tool for monitoring and debugging JavaScript, HTML, and CSS. Next, let's take a look at the functions and advantages of firebug.

Firebug Overview

Firebug is very interesting because it is closely integrated with Firefox. You can open firebug in a browser or in a separate window. If it is opened in a browser, firebug will be placed at the bottom of the web page-a separate instance that can be attached to different pages through a separate tab or window.

There are four tabs on the interface (the original one is like this-the Translator's note)-HTML, CSS, script, Dom, and net-each correspond to different content on the page, there is also a console for error and log information. You can select each tab to view the corresponding page elements.

UseCode

The HTML, CSS, script, and Dom tabs allow you to view various code conditions on the page. The HTML tab represents the HTML elements of the page. You can expand and/or collapse these elements to view or hide child elements. The same is true for JavaScript and Dom tabs. This helps you easily understand the pageSource code.

Debugging

Firebug provides a reliable Debugger for using JavaScript. You can set a breakpoint in a specific part of the script to terminate the operation, or set a conditional breakpointProgramTerminate the operation when certain conditions are met. In addition, the debugger allows you to perform one-step debugging on one line at a time to closely monitor execution.

When using the debugger, the stack can provide environment snapshots at any given time point. In this way, you can view variables and monitor the call stack. The observation function allows you to observe variables and expressions during code execution. JavaScript code can be inserted into the page to generate debugging data. The Code Analyzer can generate function call reports and the time used by these calls. The debugging function is displayed on the console tab.

The console is my favorite firebug feature. It allows me to execute Javascript in real time. This is very useful when I develop code. You may be concerned about how a line of code is executed. If you do not remember the many functions of the Javascript language, the automatic completion function can help you solve the problem. In addition to running the code, it also displays the error message log of ipvcip.

The firebug console API provides console variables. You can use these variables in the Code on the Web page to generate debugging information during script execution. It provides many methods to help with debugging, including log, trace, and debug.

Network Activity

You can use the net tab to view network activities associated with related pages. It displays all page-related downloads and how long each resource takes to download. Requests from the cache are differentiated by colors. Items from the cache are light gray, so that you will know the efficiency of using the cache to optimize the page loading time during quick browsing.

Net has its own sub-tab to filter the content to be displayed-you may want to list all elements, or only list HTML, CSS, JavaScript, images, and Flash elements. The xbr Tab allows you to check the HTTP title and server response. This is a good function when you use Ajax applications.
-------------------------------------------------------------------------
Firebug:
Http://getfirebug.com/releases/firebug/1.4X/

Install: Open Firefox and drag it to Firefox. It will automatically prompt for installation and restart. Open the Tools menu of Mozilla Firefox and you will see the firebug sub-menu.

It's easy to install. It's Okay To find firebug in the plug-in library on Firefox. Is the firebug debug window.

In short, firebug allows us to debugjs and view variables at any time, and identify performance bottlenecks in Js.
How to find the web application JS, activate firebug, click script, and then select the JS you want to debug next to all.

It is basically the same as how to break a breakpoint in eclipse. Click the row number and it will be OK.

How to set conditions on the breakpoint. If the conditions are met, the breakpoint will be entered. This function is very good, especially when debugging is a complex function.

 
How to perform one-step debugging, just like Eclipse F11

Is to view the called Stack, which is very helpful for complicated JS debug.

Is to view the variable is basically the same as eclipsedebug.

Is to view the variable at the breakpoint.

There is a very useful function, and the code lines are quickly transferred, making debugging for thousands of lines of JS very easy.

Is the performance test result, use a Simple Profile

Another log function is more practical. If you don't want to open a breakpoint every time, it would be better to use it.

 

 

Firebug shortcut list

Firebug is a powerful plug-in Firefox It is indeed a rare tool for Web developers and designers. Open firebug panel F12 Close firebug panel F12 Open firebug in window CTRL + F12 Limit + F12 Switch to previous Tab CTRL +' Option + Tab Focus command line CTRL + Shift + L Latency + Shift + L Focus search box CTRL + Shift + k Hour + Shift + k Toggle inspect Mode CTRL + Shift + c Shift + c Toggle JavaScript profiler CTRL + Shift + P Latency + Shift + P Re-Execute last command line CTRL + Shift + E HTML tab Edit attribute Click on name or value Edit text node Click on Text Edit Element Double-click Tag Name Next node in Path CTRL +. Previous node in Path CTRL +, HTML editor Finish editing Return Cancel editing ESC Advance to next field Tab Advance to previous field Shift + Tab HTML inspect Mode Cancel Inspection ESC Inspect parent CTRL + up Upper + up Inspect child CTRL + down Latency + down Script Tab Continue F5 CTRL +/ Else +/ Step over F10 CTRL +' Else +' Step F11 CTRL +; Pipeline +; Step out Shift + F11 CTRL + Shift +; Transform + Shift +; Toggle breakpoint Click on line number Disable breakpoint Shift + Click on line number Edit breakpoint Condition Right-click on line number Run to line Middle-click on line number CTRL + Click on line number Rows + Click on line number Next function on Stack CTRL +. Previous function on Stack CTRL +, Focus menu of scripts CTRL + Space Latency + Shift + Space Focus watch Editor CTRL + Shift + n Shift + n Dom Tab Edit Property Double-click on empty space Next object in Path CTRL +. Previous object in Path CTRL +, Dom and watch Editor Finish editing Return Cancel editing ESC AutoComplete next Property Tab AutoComplete previous property Shift + Tab CSS Tab Edit Property Click on Property Insert new property Double-click on white-space Focus menu of Style Sheets CTRL + Space Latency + Shift + Space CSS Editor Finish editing Return Cancel editing ESC Advance to next field Tab Advance to previous field Shift + Tab Increase number by one Up Decrease number by one Down Increase number by ten Page up Decrease number by ten Page down AutoComplete next keyword Up AutoComplete previous keyword Down Layout Tab Edit Value Click on Value Layout Editor Finish editing Return Cancel editing ESC Advance to next field Tab Advance to previous field Shift + Tab Increase number by one Up Decrease number by one Down Increase number by ten Page up Decrease number by ten Page down Command Line (small) AutoComplete next Property Tab AutoComplete previous property Shift + Tab Execute Return Inspect result Shift + return Open result's context menu CTRL + return Response + return Command Line (large) Execute CTRL + return Response + return