Chrome browser, JavaScript debugging

[Error Examples] ( https://googlechrome.github.io/devtools-samples/debug-js/get-started)

3 the panel interface portion Sources

1. File Navigator pane. Here lists each file requested page.
2. Code Editor pane. After selecting the file in the File Navigator pane, here displays the contents of the file.
3. JavaScript Debugging pane. Check the page's JavaScript tools. If the window layout DevTools wider, in the right pane displays this Code Editor pane.

Use Code breakpoints pause

• Debugging is usually used the console.log () into the source code whose value changes were observed, although the console.log () method can complete the task, but this task can be completed more quickly break. Breakpoints allow you to suspend the code during execution code, and timely inspection of all relevant values ​​at this time. Compared with console.log () method, breakpoint has some advantages:
  • Use console.log (), you need to manually open the source code and find the relevant code, insert console.log () statement, and then loading this page again, to see these messages in the console. Breakpoints do not need to understand the structure of the code to suspend the relevant code.
  • In the console.log () statement, you need to explicitly specify each value to be checked. Use breakpoints, DevTools will promptly displays all variable values ​​during a timeout. Sometimes in case you do not know, some variables will affect your code.
  • In short, compared to console.log () method, breakpoints can help you quickly find and fix errors.

One of the many types of breakpoints Event Listener Breakpoints just DevTools provided; when you want to start by clicking on a breakpoint to use Event Listener Breakpoints check click

Step through the code

Set a breakpoint line of code

Inspect variable values ​​DevTools provides many tools for checking variable values.

• Method 1: Scope pane
  

• Method 2: Watch Expression
  

• Method 3: Console
  

Application of the correction method is performed directly after the modified Sources

Various types of breakpoints type;

• Line where the breakpoint code in the exact area.
• The exact condition code line code area, and only if other conditions are met.
• In a specific change or remove DOM DOM node or a child code.
• When a string containing the URL XHR XHR mode.
• Code event listener running after the trigger click and other events.
• Abnormalities in the initiation captured or captured in the line where the exception.
• Any time a function call a specific function.

Breakpoint lines of code:

Line breakpoint condition code:

• Management lines of code breakpoints
• Use Breakpoints pane to disable or remove the line of code from a single breakpoint position.
• Shows two lines of code breakpoint Breakpoints panes: a line where the breakpoint is located get-started.js, line 15, line 32 located in the other
• Check the box next to the entry you can deactivate the breakpoint.
• Right-click on the entry you can remove the appropriate breakpoint.
• Right-click anywhere in the Breakpoints pane can deactivate all breakpoints, disable all breakpoints, or remove all breakpoints. Disable all breakpoints equivalent uncheck each breakpoint. Deactivate all breakpoints allows DevTools ignore all lines of code breakpoints, but will continue to maintain its enabled state, so the state of these points is the same as before and deactivated.

DOM Change Breakpoints

+ DOM change breakpoint type 1. Subtree modifications: trigger this type of breakpoint in removing or adding the currently selected node's child, or change a child contents. When you add or remove trigger this type of property on the currently selected node, or attribute value changes: when a child node property changes or make any changes to the currently selected node does not trigger this type of breakpoint 2. Attributes modifications breakpoint 3. node Removal: fires when removing the currently selected node.

XHR / Fetch break

• If you want to request URLs that contain the string XHR of interruption, you can use XHR breakpoints. DevTools calls send in XHR () line of code pause.
• NOTE: This feature can also be used Fetch request.
• For example, when you find your page URL request is wrong, and you want to quickly find the AJAX request results in an error or Fetch source code, this type of breakpoint is useful.
• Creating XHR breakpoint for all the request URL contains org in XHR Breakpoints in
  

Event Listener Breakpoints

#### exception breakpoint

Function breakpoint