8 Debugging Tips You May Not Know in Chrome DevTools

As a web developer, Chrome DevTools is definitely an indispensable and powerful debugging tool. Our common debugging methods include some console … ChromeDevTools is actually a very powerful debugging tool for the web developer.

Ok, let’s share 8 debug tips that you may not know when using Chrome DevTools.

1. Scroll Into View scrolls as in view

In the Elements tab, when viewing a page element, if the current element is not in the view, you can use this method to quickly scroll the element into the view.

operating:

  • Select an element that is not in the view in the Elements tab.
  • Right-click and select Scrollintoview

Chrom DevTools - Scroll Into View scrolls as in view

2. Copy As Fetch Copy as Fetch

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

operating:

  • In the Network tab, select a request
  • Right-click and select Copy –> Copyasfetch

Chrom DevTools - Copy As Fetch Copy as Fetch

3. Add a click event listener to the element

In the case of debugging, it is sometimes necessary to print out the click event object in the element’s click event listener function. A more convenient way is to add event listeners to page elements directly on the Elements tab.

operating:

  • Select a page element in the Elements tab. After selection, the element can be obtained by the $0 variable by default.
  • In the Console tab, call the function monitorEvents and enter two parameters, the first one is the current element ( $0 ) and the second is the event name ( click )
  • After pressing Enter, when the selected element triggers the click event, the Console tab will print the click event object.

add a click event listener to the element

4. Blocking request

Under the Network tab, select a request, right-click the request, and select Block request domain or Block request URL block all requests and requests under the domain where the request is located.

5. Drag page elements

In the Elements tab, you can drag any HTML element and change its position on the page.

6. Screen capture

In the new version of Chrome, a screenshot API. You can take a screenshot of the entire page or capture part of the page element, and the size of the captured image is the same as the size of the content to be intercepted in the current view of the browser. The screenshot output is a png format image that is automatically downloaded to the default directory via a browser.

Three ways to intercept: intercept the entire page, some elements or the current view

Intercepting part of a page:

  • CMD + SHIFT + P (Windows + CTRL + SHIFT + P ) Open the command menu
  • On the Elements tab, select the page element you want to intercept.
  • Select Capture node screenshot

Chrom DevTools - Screen capture

Intercept the full page operation

  • CMD + SHIFT + P ( CTRL + SHIFT + P windows) open the command menu
  • Select Capture full-size screenshot (no need to select page elements)

Intercept the page within the current view

  • CMD + SHIFT + P (CTRL + SHIFT + P in windows) Open the command menu
  • Select Capture screenshot (no need to select page elements)

6. DOM breakpoint debugging

Basically, everyone will use JavaScript breakpoint debugging, but many people should not know that DOM nodes can also perform breakpoint debugging.

ChromeDevTools provides three kinds of breakpoint debugging for DOM elements: When the child element changes when the property changes and when the property changes when the element is removed.

operating:

  • In the Elements tab, select an element
  • Right-click and select Breakon –> subtree modifications (or attribute modifications or node removal )

7. Overrides rewrite

When debugging CSS or JavaScript on ChromeDevTools, the modified property values will be reset when the page is refreshed. If you want to save the modified values and refresh the page without resetting it, take a look at the following feature ( Overrides ). Overrides is turned off by default and needs to be manually turned on. The steps to turn it on are as follows.

Open operation:

  • Open the Sources tab of ChromeDevTools
  • Select the Overrides subtab
  • Select +Selectfolderforoverrides to set a directory for Overrides save the rewrite properties.

8. Cache the result of the previous step

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

Cache the result of the previous step

Summary

ChromeDevTools are a lot of debugging tips in ChromeDevTools if there are at least dozens of them. This article is limited to the length of the article, just listed some tips that are not easy to find, and are still relatively easy to use, I hope it is with help to you.

Google Chrome is a popular and powerful browser that combines a minimal design with sophisticated technology to make the Web faster, safer, and easier. Google Chrome smarts for everything you want to do.

Free Download Google Chrome

System requirements: Windows 7 / Windows 8 / Windows 10

Author / Product:Google / Google Chrome

Size: 55.8MB

>>Google Chrome Download