This article describes some basic HTML, CSS, and JavaScript debugging skills.
I hope this will help beginners gain some benefits and reduce their detours.
I personally recommend chrome as a development tool (FF can use firebug, and IE8 and later versions also have their own debugging tools)
1. html debugging
- Place the cursor over any element and right-click inspect element to view the HTML content of the element. (You can also use F12 to open the developer tool)
The effect is as follows:
- Place the cursor over any element on the elements panel, and the corresponding element on the HTML interface will be selected.
- Right-click an element and you can directly modify or remove the element. The modified element immediately returns to the page.
2. CSS debugging
- On the right pane of the developer tool, you can find the corresponding CSS debugging box.
- You can view the detailed style of the element under the styles category, and you can modify it directly (click a style or double-click the blank space)
- The right side of the style will prompt which file the style comes from
- The style added with strikethrough is invalid or overwritten.
- When you place the cursor over the style, a checkbox will appear on the right to enable and disable the current style.
3. Javascript debugging
- The first is the Javascript debugging box.
- On the left side is the Javascript panel. You can add a breakpoint (green) to the current running row (red)
- In the script. js drop-down box, you can select different JS file debugging methods. (If your JS file has a structure error, it may not be loaded into the list)
- Search for javascript content in the upper right corner
- Watch expressions can run and view expressions and variables
- The call stack displays the current stack. You can click to switch to different positions in the stack.
- Scope variables: displays the current context variable.
- Breakpoints, breakpoint
- Console. Log this method will be output to the console, (discard alert, use debugging and console. Log)
- Javascript can be directly run on the console, which is very convenient (if you want to verify JS, you don't need to write a new page, just run it here)
- Now you can easily debug JavaScript, but sometimes you find that the elements on the page have been modified, but you do not know whatCodeModified, you can add a breakpoint to the Dom.
- When the elements in UL are changed, the breakpoint is triggered as follows: (pay attention to the stack on the right to help you find the answer: Who moved your cheese)
There are also many advanced functions, such as resource and network analysis and JavaScript Performance Analysis (Memory leakage ).
Good English. Look at the recommended ones downstairs.Article, Very detailed chrome debugging
