Turn http://www.cnblogs.com/PurpleTide/archive/2011/11/25/2262269.html
Getting Started with HTML, CSS, and JavaScript debugging
This article describes some of the introductory html,css and JavaScript debugging techniques.
Hope to allow beginners to gain, less go a little detour.
Personally recommended Chrome as a development tool (FF can use FIREBUG,IE8 and later versions also has its own debugging tools)
Commissioning of the 1.HTML
- You can view the HTML content of an element by placing the mouse on any element and right-inspect element. (You can also open developer tools via F12)
The effect is as follows
- Place the mouse on any element in the elements panel and the corresponding element on the HTML interface will be selected
- Right-click on the element, you can directly modify or remove the element, the modified element effect will immediately reflect on the page
Commissioning of the 2.CSS
- The corresponding CSS debug box can be found in the right panel of the developer tools
- You can see the detailed style of the element under the Styles category, and you can also modify it directly (tap a style, or double-click the space)
- The right side of the style will indicate which row of the file the style came from
- The style that was added to the strikethrough is invalid or is overwritten
- When you place the mouse over a style, a checkbox appears on the right to enable and disable the current style
3.Javascript Commissioning
- The first is the JavaScript debug box
- On the left is the JavaScript panel, which can be added with a breakpoint (green), the row currently running to (red)
- In the Script.js drop-down box can choose different JS file debugging, (if your JS file has a structural error, may not be loaded into the list)
- Top right is JavaScript content search
- Watch expressions can run and view expressions and variables
- Call stack displays the current stack, click to switch to a different location in the stack
- Scope variables, displaying the current context variable
- breakpoints, Breakpoint
- Console.log the method is output to the console (give up alert, Debug and Console.log)
- The console can run JavaScript directly, it is convenient (if you want to verify JS, do not need to write a new page, just run it here)
- It's easy to debug JavaScript now, but sometimes you find that the elements on the page have been modified, but you don't know what the code has changed, and you can add breakpoints to the DOM.
- When the element in UL is changed, the breakpoint is triggered as follows: (note the stack on the right, which will help you find the answer: who moved your cheese)
There are also many advanced features, such as resource and network analysis, JavaScript performance analysis (memory leaks), and so on, interested in studying
Good friends in English look downstairs recommended articles, very detailed chrome debugging
Http://www.codeproject.com/KB/trace/BeginChromeDebug.aspx
Getting Started with "Go" HTML, CSS and JavaScript debugging
