Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

preface

For our front-end developer, Google browser’s own developer tools is absolutely indispensable debugging tools, we often use the debug method contains some view error ah, see the structure of the data is correct and so on, and Chrome’s own developer tools is very strong, and many ways actually we all don’t know how to use, Today, let’s talk about some useful methods.

1. Scroll Into View

In the Elements tag, you can use this method to quickly roll a page element into the view if the element is not currently in the view.

Operation:

  • inElementsTAB to select an element that is not in the view
  • Right click and selectScrollintoview

2. Copy As Fetch Replication is Fetch

All requests under the Network tag can be copied as a complete Fetch request code.

Operation:

  • inNetworkTAB, select a request
  • Right click and selectCopy— – >Copyasfetch

3. Block the request

On the Network TAB page, select a request, right-click the request, and select Blockrequest domain or Blockrequest URL to block all requests in the domain where the request resides and this request, respectively.

4. Manually add a click event listener to the element

When debugging, you sometimes need to print the click event object in the element’s click event listener function. A more convenient way is to add event listening events to page Elements directly on the Elements TAB.

Operation:

  • inElementsTAB to select a page element (if selected, the default pass$0Variable gets the element.
  • inConsoleTAB, call the functionmonitorEvents, enter two parameters, the first is the current element ($0), the second is the event name (click)
  • According to theEnterAfter the selected element triggers the click event,ConsoleThe TAB will print out the click event object

5. Drag page elements

On the Elements TAB, you can drag any HTML element to change its position on the page.

Operation: as shown below.

6. DOM breakpoint debugging

Most people use JavaScript breakpoint debugging, but you probably don’t know that DOM nodes can also be used for breakpoint debugging. ChromeDevTools provides three breakpoint debugging for DOM elements: when child elements change, when attributes change, and when elements are removed.

Operation:

  • inElementsTAB, select an element
  • Right click and selectBreakon— – >subtree modifications(orattribute modifications 或node removal )

7. Screenshots

In the new version of Chrome, there is a screenshot API that allows you to take a screenshot of an entire page or a portion of a page element and capture the same image size as the content in the browser’s current view. The screenshot output is a PNG image, which is automatically downloaded to the default directory. There are now three ways of capturing: capturing the entire page, partial elements, or the current view.

Intercepting part of a page element:

  • CMD + SHIFT + P (Windows with CTRL + SHIFT + P) opens the command menu
  • inElementsTAB, select the page element you want to capture
  • Go to Capture Node Screenshot

The operation of capturing a full page

  • CMD + SHIFT + P(Windows inCTRL + SHIFT + P) Opens the command menu
  • Go to Capture Full Size Screenshot without selecting page elements

Intercepts the page in the current view

  • CMD + SHIFT + P (Windows with CTRL + SHIFT + P) opens the command menu
  • Go to Capture Screenshot without selecting page elements

8. Cache the result of the previous step

When running JavaScript expressions on ChromeDevTools, you can use $_ to get the return value of the previous step.

9. Overrides rewritten

When you debug CSS or JavaScript on ChromeDevTools, the property values you change are reset when you reload the page. If you want to save your changes so they don’t get reset when you refresh the page, check out the following Overrides. Overrides is disabled by default and needs to be manually enabled. The procedure for enabling Overrides is as follows.

Open operations:

  • Open theChromeDevTools 的SourcesTAB
  • chooseOverridesChild tags
  • choose+SelectfolderforoverridestoOverridesSet up a directory to hold overwrite properties