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.
- 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)
- 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)
- 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)
Good English. Look at the recommended ones downstairs.Article, Very detailed chrome debugging