Web front-end Development tutorial Series-3-front-end development debugging tool sharing

• Objective
• I. Why the bug occurred
  • 1. Subjective reasons or why there are so many browsers
  • 2. Other objective reasons:
• Two. Debugging Tools
  • 1. Firebug
  • 2. Chrome
  • 3. IE11
  • 4. IETester
  • 5. Virtual Machines
  • 6. Safari
  • 7. Opera
• Three. Other common bugs
• Four. Other ideas

Objective

The difficulty of front-end development in previous years is that no powerful debugging tool can quickly find the problem, until the 2006 Firebug, really let the front-end into an engineering can be debugged era. But as the front-end demands continue to increase, the difficulty of accomplishing tasks increases. Chorme turned out to let practitioners in front of the light, his debugging tools, further refinement of the granularity can be debugged, so that the front-end really from all aspects to grasp the code execution of the process performance, but also closely with Chrome, eliminate the installation or compatibility caused by other problems, by many developers trust or praise. But due to some historical or platform reasons, we have to understand other debugging tools to make the work more efficient or faster.
Here are some of the familiar debugging tools that will be introduced from all levels to share some of your personal experience:

I. Cause of the bug 1. Subjective reasons or the reason why so many browsers are present

• The game of interest between major giants
  Because the Internet is an effective means of extending the PC to the outside,
• To occupy the entrance to Internet Information
  Browser is the only access to the Internet, you can bind a lot of functions, that is, binding users. For example, Chrome's favorite sync feature.
• Optimize your experience in order to seize the market
  In order to increase the number of users to a multiplier, so in the details of continuous optimization, this can be seen from the version number of Chrome.

2. Other objective reasons:

• Unreasonable structure, allowing a single div to carry more styles
• Problems with the browser itself, implementation of standard inconsistencies
• The standard itself is chaotic.
• Encoding problems caused by the editor

Two. Debugging Tools 1. Firebug

• Firebug Getting Started Guide
• Firebug Console Detailed
• Firebug Advanced Usage
• Firebug is a more comfortable use of the CSS debugging tools, may be preconceived, or the reason for personal habits.
  With the inspect tool can effectively find the problem of html,css layout, click the Inspect tool will be selected on the page to debug the scope of the block, and then firebug the corresponding focus will escape to the HTML panel, in the HTML panel click the corresponding DOM structure, The preview area at the top of the page will be rendered in the appropriate layout style, and the attentive reader should find that the margin is yellow and padding is blue.
  And then how to debug?
  If there is a bug in the page, the real question is: How does the browser render layout deviate from the expectation, and how to look for deviations? is to use inspect to see if the layout in the page has reached the desired position.
• Display of properties in the Style tag
  The styles and properties displayed in the style are all list collections applied to this label.

2. Chrome

• Formatting code
• See which events the element is bound to
• Quickly locate the core code area based on the hook
• Efficient use of workspaces for remote debugging
• Performance optimization with profiles
• The use of audits can be used for page useless CSS monitoring or other aspects of the recommendations.

Other tips:

• CTRL + SHIFT + F: Search & Find JS function definitions in all JS files
• Through the left and RIGHT arrow keys can be folded source
• Jsonview can view json in a tree-type way in the browser
• Pretty Beautiful javascript format compression js
• Vimium vim way to operate chrome
• Visual Event
  The main purpose is to see which events are specifically bound by an element

Why did not mention firebug,firebug JavaScript debugging, the new version added code coloring, sometimes slow reaction, and even the situation of suspended animation, in addition, because of the plug-in itself, not the actual process of simulation code execution. So JavaScript debugging is the preferred Chrome debugging tool.

3. IE11

Generally with IE version greater than 7 browser based on version information to debug more than 7 browser, basically no big error, IE11 Debuger personal feeling or there is progress, is to attract users from the details. However, due to the lack of their own technical genes, ease of use and chrome is still very different, even so, is currently the only choice for the IE version of the downgrade.

4. IETester

IETester Although there are many shortcomings, but from the current market, he is the only one can be easily tested Ie6 software. In addition, he has a plugin that can be used to debug IE6 in a limited range like Firebug, or on the IE6 of a virtual machine.
The other is to solve the idea of sharing, simple problems simple processing.

5. Virtual Machines

Because IETester can not be true simulation IE6, so some special bug can only go to the virtual machine real environment debugging, in the direct IE6 can install IETester debugger plug-in, you can easily solve some bugs.

6. Safari

Because Safari is the default on Mac and has a certain user market, Safari debugging also has to be focused.

Because the default development menu is not displayed, let him show it in the following way:

• The General tab appears in preferences.
• Advanced options, tick show advanced options in the menu bar.
• Close the tab, the browser toolbar appears in the Development menu, you can debug, in fact, and Google Chrome is the same. But features aren't as powerful as chrome.

7. Opera

Opera's debugging still needs to be opened manually.

• Click the Opera button menu, select More Tools, and click Enable Developer Tools.
• After that, the menu will come up with one more developer tool.
• You can also call out the debugger window by selecting the Web Inspector from the developer tools.

The above two only as an auxiliary debugging means, general code structure written specifications or standards, in these two paragraphs above basically no big problem.

Three. Other common bugs

• Check HTML elements for spelling errors, forgetting to end tags
• Check that the CSS is written correctly (the file check)
• Use the Delete method to determine where the error occurred
• The parent element of the float element must be written Clearfix
• Have you forgotten to write a DTD? Is the DTD on the first line?
• Do you want to reset the default style?
• Is it a coding problem?

Four. Other ideas

Encounter particularly strange bug resolution, timely seek the help of others, can make the problem quickly solved.

Xi ' an intermediate front-end development:284216186 , Welcome to join ~!

Web front-end Development tutorial Series-3-front-end development debugging tool sharing