As a front-end ER, it is often necessary to debug certain functions performed by JavaScript scripts in daily coding, such as checking whether variables in code execution meet expectations. Generally, console.log can meet the requirements. But console.log has several drawbacks:

  • If you want to view the value of a variable, you need to find the relevant code in the source code, insertconsole.logAnd then reload the page inConsolePanel to view the running results
  • useconsole.log, the developer needs to manually set the variables to be monitored, no matter how many variables there are, when the variables are insertedconsole.logAlso can become more
  • The need to manually remove debugging code when submitting code is an additional effort

Therefore, using console.log is not an ideal option, and a more efficient way to debug is to set breakpoints. The problem mentioned above can be effectively avoided by interrupting.

There are many different types of breakpoints. Set them in the Source panel

Sources panel

The Source panel of the browser is the main place to debug the Source code. You can set many types of breakpoints: line breakpoints, conditional breakpoints, DOM breakpoints, asynchronous request breakpoints, exception breakpoints, function breakpoints, etc. You can also perform simple debugging in the Console, view variables in the current scope, view relevant DOM node information, etc.

From Chrome’s Source panel you can:

  • Find files
  • The editorCSSandJSfile
  • Create and save code snippets (snippets). Snippets can run on any page, similar to bookmarks
  • debuggingJS
  • Setting up the workspace

Set a line breakpoint

Find the target file by CMD + P. In the Source panel, you can see that there is a line mark to the left of each line of code. Click the line mark to set a line breakpoint, and the code will stop when it runs to the line. All variables in the current scope are accessible from the Console.

There is another way to set up the debugger in source code. If you want to see if the code runs to a line of code, find that line of code in source code and insert a line of statement after it. , the code will stop running until it changes lines.

Line breakpoints are set in the same way as the debugger is set in the file. It’s similar.

Setting conditional breakpoints

Conditional breakpoints are used when you know exactly what area of code to probe, but will only stop if the condition is set to true.

Setting mode:

In the Source panel, open the file for which you want to set the breakpoint, find the target line with the line label on the left, right click on the line label, select Add Conditional BreakPoint, and then a dialog box will appear. Enter the conditional expression in the dialog box and then Enter. The breakpoint is active and the orange icon appears to the left of the row number.

Setting DOM breakpoints

Now that you know how to set breakpoints in JS files, how to view DOM changes while the page is rendering?

The answer is to set a DOM breakpoint. By setting a DOM breakpoint, you can pause your code at the part that causes a DOM node or its children to change.

Setting mode:

In the Elements panel, locate the element for which you want to set breakpoints, right-click on it, mouse over Break ON, and then select Subtree Modifications, Attribute Modifications, or Node Removal

  • Subtree modifications: Triggered when the child node changes. Child elements including the currently selected node are removed, added, or the child element content is changed. Changes to child node attributes, or changes to the currently selected node, are not triggered.
  • Attribute modifications: Triggered when node attributes change. Attributes can be added, removed, or their values changed.
  • Node removal: Triggered when the current node is removed.

Asynchronous request breakpoint

Asynchronous request (XHR/Fetch) breakpoints can be used when code execution needs to be paused on the line where XHR calls send() to contain certain characters in the REQUEST URL.

Note: This functionality applies to Fetch requests as well.

This breakpoint is very helpful when the page is sending an incorrect request URL and you want to quickly find the source code for the AJAX or Fetch that caused the incorrect request.

The setup is also very simple:

Expand the XHR Breakpoints option on the right in the Sources panel, right-click to select Add Breakpoints or click the + symbol on the right, and enter the URL snippet of the pause code in the dialog box. The development tool pauses when it sends an XHR request that contains the segment in the URL.

For example, if API /test is entered in the following figure, DevTool pauses when API /test is included in the request address.

Event listening breakpoint

Breakpoints pause after an Event is triggered, such as a click Event, or mouseover, mouseout, etc.

The setting method is as follows:

In the Sources panel, expand the Event Listener Breakpoints option and the development tool displays a list of Event categories, such as Animation, Mouse

An event breakpoint of type Click is useful for viewing the coordinates of the currently clicked element, and you can see information about the current object in Local.

Exception breakpoints

How do I view context information when code throws exceptions? The answer is to set an exception breakpoint.

Exception breakpoints pause code at lines that throw exceptions or do not catch exceptions.

The setup is also simple: Click on the Pause on Exceptions icon in the Sources panel. When activated, the icon is blue

Tip: Pause On Caught Exceptions is an optional exception. In addition to pausing the code for uncaught Exceptions, the code is also paused when the exception is Caught.

Function breakpoint

A function breakpoint is the ability to pause code when a function is called.

Called with debug(functionName), which is the name of the function you want to debug. You can insert debug() statements in the source code, just like console.log(), which can also be called from the console panel.

Debug () is similar to setting a line breakpoint on the first line of a function.

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum); // Pass the function object, not a string.
sum();
Copy the code
Make sure the target function is in scope

If the function you want to debug is not in scope, the development tool will raise a ReferenceError

(function () {
  function hey() {
    console.log('hey');
  }
  function yo() {
    console.log('yo');
  }
  debug(yo); // This works.yo(); }) (); debug(hey);// This doesn't work. hey() is out of scope.
Copy the code

Ensuring that the target function is scoped can be tricky if you call debug() from the Console, which is a strategy:

Set a line breakpoint somewhere in the function scope, trigger the breakpoint, and call Debug () on the Console

Find files quickly

After opening Developer Tools, you can use CMD + P to quickly locate the files in the project.

Quickly find and execute commands

Run CMD + Shift + P to open the browser command executor to search for and run a command, for example, Show CSS Overview to view the style information of the current website.

You can also see what disabled JavaScript looks like on a page by using the Disable JavaScript command:

Select the element in the console

The DevTools console supports selecting elements by variables and functions. $0-$4 returns a history of the most recent DOM element you selected in the elements panel, $0 is the most recent, and so on.

For example, query the element’s dataset with $0:

The $sign

$0 is the last selected DOM node in the Elements panel, $0 is the next-to-last selected DOM node, and $1-$4 and so on.

The $sign is the jQuery selector, and the DOM node can be found by checking $(‘ style name/ID ‘)

File formatting

In the lower left corner of the Sources panel, there is a button to format the file. After clicking on it, a new file will be generated, which is the code optimized for the layout of the original file, which is more readable

Color picker

Element set the color related attributes, click color preview, the color selector can pop up, select the dropper tool in the color selector, the mouse will turn into an amplifier when moving in the page, you can select the color in the page

Force changes to CSS element state

DevTools can simulate the CSS element state. On the right side of the Elements panel, click: Hover to display the pseudo-class style of the element. If selected, you can simulate the style that triggers the pseudo-class state of the element

Change the color format

In the color preview function, use the shortcut key Shift+ click to switch color formats between RGBA, HSL and Hexadecimal

Remove nodes

To see the layout of a page after a node has been removed, select Delete Element, which can be removed from the DOM. There is also a function to hide the node, which can achieve the same effect, but also restore the node

The two nodes in the red box below are hidden

1.4 Webpack configure sourceMap,debugger;Statement break point

TODO: subsequent finishing an article on the analysis of the Performance panel, Performance analysis TODO: browser plug-in: www.jianshu.com/p/51c650f98…

Refer to the link

Debug JavaScript