Web Debugging Tools-firebug

Firebug is a web browser Firefox under the development of a class plug-in. It integrates HTML viewing and editing, JS console, network condition Monitor in one, is developing js,css,html: and Ajax's right-hand

(self-organized, the wrong words forgive me Oh (^_^))

Open and close

: Restart browser after http://www.getfirebug.com/→ Click on small beetle (or F12)

Close → Click on the little Beetle again

Firebug Window Overview

Console: JS command line operation, display JS error message, prompt information, log information

HTML: Display all the HTML source code

CSS: Edit the CSS source of the page

Scripting: displaying page scripting and debugging

DOM: Displaying Page objects and Dom properties

Network: Show page downloads and spend time

Cookies: Show page requests for cookies, and view and modify

Label enabled disable: → small triangle drop-down menu (or small beetle inside set)

Search in upper right corner

Firebug Editing HTML

1. Can be positioned on the page: Right-click review elements → small Beetle right (shortcut: CTRL+SHIFT+C)
2. Small Beetle Right-click to modify shortcut keys
3. Edit 1: Select Edit html→ Right-click Edit HTML;
4. Edit 2: Make changes directly on the source

Firebug editing CSS

1. Basically at the same time as above, there will be a display on the right side of the HTML
2. Double-click the appropriate CSS to complete the edit and delete the same
3. For the value input of padding margin, you can fine-tune the size by clicking the ' Up and down ' arrow keys.
4. Tip: Small range Resize →ctrl+ arrow key: Increase/decrease each time = 0.1 units (Shift key is 10 units)
5. Directly click the hyperlink to go to the CSS tab, make changes

Evaluate the download speed of the page

1. Network tab: You can see: Time size status, etc.
2. Download time can be viewed separately, timeline evaluation
3. caching, Cookie information

Ajax Monitoring

Network →xhr:ajax requests for monitoring

1. Listen for requests to all service-side responses
2. For example: Baidu's search Tips
3. WD: Parameters for each WD input
4. Concrete can be practiced for a moment

JavaScript console

Example: Countdown

What has changed in the console?

Join:

The console can output the value of I directly.

Or:

Console.log (i);

Console.info (i);

Console.debug (i);

Console.error (i);

Tips:

1. You can enter the relevant console command on the right side of multiple lines or under single line alert (123); run
2. TAB key can be auto-complete
3. Console.log ('%d%d months ', 2014,5,25);

(4 types of placeholders:%d integers,%f floating-point numbers,%s strings,%o objects)

Log grouping: Neat and beautiful

Note: Console.dir (console): Displays all properties and methods for an object (console in this case)

Properties: Time (calculates the code runtime to optimize the algorithm)

JavaScript code debugging

Double-click the set breakpoint in the script, there are four kinds of settings on the page

There are corresponding variables in the monitoring selection, and changing the variable page will change.

Want to know how the function is called:

Join:

All or overview on the console: You can see what's being called

Advanced Tips

1. Click on all the places you can click
2. Don't forget the right mouse button where you can click, there will be more surprises
3. Do not forget the drop-down menu (e.g. in CSS style)
4. Small beetle's menu (Firebug's extended page)

Developer Tools

Firebug not:

firefox browser → tools → developer → Developer toolbar: Can view responsive mode design, simulate touch events

Google: The console can see more resource information, timeline information

Synthesize your own needs and get the test results you want to achieve!

Web Debugging Tools-firebug