preface

Efficiency Up, Up🚀🚀🚀, in this way, I have more time to study and spend time with my girlfriend ✅

If you’re using Chrome debugging tools and still stuck in the console phase, get ready to learn a bunch of stuff that will make you more productive.

This article focuses on Chrome DevTools. Check out the Chrome DevTools tips that can save you a lot of time and increase your productivity directly!

How much do you know about Chrome DevTools?

❝

The website is umaar.com/dev-tips/

❞

❝

Chrome Debugging Tips you Didn’t know

❞

Above are my main ways to learn how to use Chrome DevTools efficiently. One of them is the Gold Digger booklet, which is very useful to start from the basics. The other one is a foreign website with “200+ Tips”.

Next, I summarize a few more practical ✅

❝

Many early warning

❞

Learn to use Command

How do I open Command Menu

The DevTools features we’ve seen directly are just a few of them. How do I open more features?

The Command menu helps us quickly find hidden functions, which is why it is essential in itself.

❝

Opening mode:

  • [Ctrl] +[Shift]+[I] Open Chrome debug bread

  • Press [Ctrl] + [Shift]+ [P] (Mac: [⌘] + [Shift]+ [P]) with Chrome debug open

❞

For example, it is common to switch themes

theme

How about shortcuts? I’ll show you Shortcuts all at once

Sometimes, when you see the people around you using shortcut keys, is not particularly handsome, you can also be as handsome as him, as 🚀🚀🚀

Command-use-setting

New pose for screenshots

Still want to open QQ every time or is screenshots software, this time do not need, greatly improve your efficiency 🚀🚀🚀

Run the Capture full size screenshot command. Please note that this is full screen, not part of the embedded page.

Command-use-Capture

Of course, Command is full of features waiting for you to explore and discover new continents 🚀🚀🚀

The Elements panel

Gets an HTML fragment code

copy-html-element-clipboard

There are, of course, simpler things to do

  • Select the DOM element you want, right-click, and select Copy Element in Copy
copy-element

Gets a DOM element Styles

You are still copying one style after another, this time copy all styles

copy-element-style

Ever had trouble tuning pseudo-class style code?

pseudo-trigger

Can’t remember where the functional definition of a registered event listener is

Sometimes, if you want to see what events are bound to a DOM node, where the callback function is registered, the project is very large, it is very inconvenient to find, so how to improve efficiency, below 👇

addEvent-listener

Color picker

Sometimes, you see a website matching color is very good, so you go to use a separate color software to operate, that way is too slow 🚀

color-get

Expand all child nodes in the elements panel

On some occasions, you might want to see the DOM hierarchy, or the inclusion of child elements, by clicking the ▶ cascading button one by one without making it too slow. Instead, use the Expand recurshrink command right after the node:

open-DOM

Greatly improve the efficiency 🚀🚀🚀

The most intuitive way to look at the DOM hierarchy?

see-dom

Is it inconvenient to adjust the DOM structure in the Elements panel?

Sometimes you want to modify dom results, but it’s not easy to do so from the Element control panel. How can you do it more efficiently?

Console-Edit-element

The Console panel

Functions that perform common tasks, such as selecting DOM elements, triggering events, monitoring events, adding and removing elements in the DOM, and so on.

$(selector, [startNode]): Single selector

$Built-in commands

? (Selector, [startNode]): Full selector

Document. QuerySelectorAll shorthand, returns an array the label element syntax:

$('a')
Copy the code
$Built-in command 2

GetEventListeners’ get the binding events of the specified object

GetEventListeners (object) return event listeners registered on the specified object. The return value is an object that contains an array of each registered event type (for example, click or KeyDown). The members of each array are objects that describe the listeners registered for each type. Usage:

getEventListeners(document);
Copy the code

$0

In Chrome’s Elements panel, $0 is a reference to our currently selected HTML node.

Of course, $1 is a reference to the last node we selected, $2 is a reference to the node we selected before that, and so on. All the way to $4

Console-$

The $_

During debugging, you will often print out the values of some variables, but what if you want to see the results of the last execution? Do you want to type the expression again?

This is where $_ comes in handy. $_ is a “reference” to the result of the last execution:

save-last-result

console.table()

var data = {code:200,content:[{'name': 'Durace'.'number': 4}, {'name': 'okamoto'.'number': 3}};console.table(data.content);
Copy the code

console.time()

Test execution efficiency:

Not as accurate as the Performance API, but easier to use.

let i = 0;
console.time("While loop");
while (i < 1000000) {
  i++;
}
console.timeEnd("While loop"); console.time("For loop"); for (i = 0; i < 1000000; i++) {  // For Loop } console.timeEnd("For loop"); Copy the code

console.dir()

Print DOM object nodes

console.dir(document)
Copy the code

See the effect above is above 🚀🚀🚀

Console-dir

There’s plenty left to explore on your own 🚀🚀🚀

Sources panel

Modify your files in workspace

You drag the project folder directly into the Source panel, and DevTools will synchronize your changes to your system files.

workpace

Sometimes it can improve efficiency 🚀🚀🚀

Check the animation

  • Check the animation. You want to slow play, replay, or examine the source code for the animation group.
  • Modify the animation. You want to modify the time, delay, duration, or keyframe offset of the animation group. Editing Bezier curves and keyframes is not currently supported.

How do you do that? Come on, let’s take a look

  • Shortcut CTRL + Shift + P to open Command Menu and type Drawer: Show Animations.
Command-use-Animate

DOMBreakpoint debugging

Source-check

As shown above: “Listen for form tags, trigger breakpoint debugging when input box gets focus”

The NetWork panel

Look for specific requests. Have filters been used?

Sometimes, you want to look at some types of files, like Img, js files

Sometimes, you want to look at requests for resources less than 100K

Sometimes you want to see if a request for a resource was successful or if the request failed

The above questions and so on are all about the NetWork control panel, so we can use filters

Network Control Panel

  • The number 1 arrow points to the filter to get the information you want

  • The number 2 arrow also acts as a filter, but faster

  • The number 3 indicates where a resource file is called. Clicking on it will jump to the location of the resource file

  • According to the figure 4 arrow Waterfall, you can have a clearer view of the time drawn at each stage of a Request for a resource, such as DNS Lookup, suggested DNS link, SSL process, Request Sent sending time, DownLoad DownLoad of a specific resource time below 👇

waterfall

Let’s see how to operate:

Network-all

What if I don’t want to load a library?

If you modify it from your own source code, it will be out, which is obviously inefficient, so let’s do Block request URL.

NetWork-block-request-url

Efficiency is not Up, Up🚀🚀🚀

Mobile development process, want to simulate the network 3G,4G,2G, no problem

Sometimes, when you do mobile terminal, you want to try the network speed to your project what fluctuations, for example, 3G, you first screen load many blocks, do you need to introduce skeleton map to optimize user experience, then how do you detect it, see the following 👇

change-wifi
  • Open the control panel Network
  • Find the “online” button and select the network environment you need

Request resources in the Network panel for more detailed information

Sometimes, the project will encounter a lot of problems, such as the request for resources is one of them, you need more perfect information, so that can be more efficient diagnosis of the problem, that need to operate 👇

Network-add-someting

Under this page, right-click to add the information you want to view, which will make your efficiency 🚀🚀🚀

❝

The NetWork control panel also has other functions, such as whether the request should be fetched from the cache, known as Disable cache

❞

The Layers panel

This is useful for viewing layer splitting, drawing, partitioning, and rasterization in the browser’s rendering phase, so let me show you how to do this 👇

Layers-make

Here’s how to check:

Layers-use

Of course, if you’re not familiar with the stages of the rendering process, check out this blog post:

[1.1W word] To his girlfriend’s secret – how the browser works (rendering process) chapter

It describes in detail how layers are drawn step by step after building the layout tree. For example, layers will generate a drawing list, which will be submitted to the composition thread, step by step, and finally displayed on the display.

🚀🚀🚀 if not enough, go to explore it yourself.

❤️ thank you

If you find this article helpful:

  1. Click “like” to support it, so that more people can see this content.

  2. Share your thoughts with me in the comments section, and record your thought process in the comments section.

  3. If you feel good, you can also check out the previous article:

    [Dry goods 👍] From detailed manipulation of JS arrays to an analysis of array.js in V8

    [practical 👍] Recommend some great front-end sites

    [1.2w word 👍] To his girlfriend’s secret – how the browser works (on)

    [1.1W word] To his girlfriend’s secret – how the browser works (rendering process) chapter

    [suggestion 👍] Again 100 JS output questions sour cool continue (total 1.8W words + consolidate JS foundation)

    54 JavaScript interview Questions/A >

    The 9 basic operations of the “Algorithms and Data Structures” list