12 cool Suggestions for Chrome developer tools

Translator: MinweiShen

The original link

Set breakpoints in JavaScirpt, review HTML and CSS elements and see changes in real time as they update, perform performance analysis… That’s right, this week’s article is about developer tools in IE8.

What was that? Really? Are you sure? I see, thanks, bye-bye, but really not necessary.

Well, someone just told me that no one likes IE8 as much as I do, so let’s write about developer tools for Chrome this week. To be more specific, I use Chrome Canary, which you should use as well. It’s not just that Chrome Canary is like a tiny, cute bird, but it burns life to provide us with fuel.

Here, I’ve listed some suggestions for developing tools, and I hope there’s at least one you don’t already know. If you find that one you didn’t know was useful, I’ll be very happy to be honest.

(In this article, I used animated GIFs. They’re useful the first time around, but then they get annoying. If you’re on a computer, I suggest you open developer tools and delete the nodes with images. If you’re on a small device, hide unwanted objects with tags or scarves.)

All right, game on.

Edit: This one is totally worth starting with. Some smart guy in the comments told me

**copy (someVariable)**
Copy the code

Copies the value of the variable to the clipboard. I will definitely use this!

Now, the show begins.

1. Animation review

The animation is cute. They delight the user, and more importantly, they delight me. The animation tool in the developer tool allows you to slow down all animations on a page to 25% or 10% (the world looks like a rabbit’s eye) and even allows you to play back certain animations.

2. Nice screenshots

When you are in Device mode, you can open the border of the device, and the screenshot contains the border when you press the Screenshot button.

As you might expect, it went something like this:

3. $0 in the console

It’s a very small trick.

Typing **$0 in the console returns a reference to the currently selected DOM node in the Elements** panel.

This is a real reference to that element, so, Classlist. add(‘touch −of ‘) ∗∗ or ∗0. classlist. add(‘touch-of’)** or Add (‘ touch−of ‘)∗∗ or ∗∗0. GetBoundingClientRect () to make it bigger, or if you load jQuery into your page, You can use code such as ** (((0).data()** to get the data above the node.

By default, Chrome will show you a DOM style representation of the node. However, if you want to view this element as a JavaScirpt object, you can type console.dir($0).

Notice the difference:

R ∗ is a reference to the React component if you are using a trendy React and have the React developer tool installed. For example, you could type ∗∗r** is a reference to the React component. For example, you could type **r∗∗ is a reference to the React component. For example, you can type ∗∗ R.trops to see all the properties.

Bonus tip: You can enter an element ID in the console and get a reference to that element, because element ids are somewhat sorted but not quite global variables. It is strange.

4. Arrow function in console

This isn’t really a developer tool suggestion, but since I wrote it, you have to see it, and you’ll love it. Thanks to the arrow function, it is easier to write useful single-line functions in the console, such as: ** performance.getentries ().filter(entry => entry.name.includes(‘ static ‘)) ** provides some useful information about all my requests from the same domain, and their names include static information.

Of course, if you must use more than one line of code, you can press Shift + Enter to the new line without executing the code above.

5. Select a selector

The search box on the Elements panel can be used to search for more than just strings (interesting, what else can it search for? !). , it can also match CSS selectors. This is very handy for people or tools who need to write selectors but are not front-end developers, for example, to implement automated tests.

Here, I’m having a bit of fun by matching **. Section-inner p:nth-of-type(2)**

6. Experiment with different colors

When you try different colors, you can use Eyedropper to select any element on the page, select any color template that already exists on the page, or even select a ready-made color from Material Design.

Note that these animated GIFs ruin the colors, they don’t actually look like that.

7. Check the rendered font

Sometimes it’s hard to tell which font is being rendered. At the bottom of Computed on the Elements panel, you can see exactly what font is being used, even if its name doesn’t appear in font-family.

8. Edit any text on the page

Ok, so now you have a fixed-width menu, and you want to know if overly long text will still appear gracefully on it. It’s simple, try it in design mode!

Next, you can click anywhere and output the text.

If you are the one who has decided to use on/off instead of true/false, please come into my office and I have something to say to you.

Slide 9.

The best feature for performance debugging is the slideshow mode on the Network panel. It lets you focus on the user experience rather than some very ambiguous data, like domContentLoaded.

It’s also fun to enjoy the irony of their font loading on Adobe pages.

10. Filter on the Network panel

If you’re doing any kind of performance test, you want to know what the network is loading. If you have ads on your page, that’s about 200 things loaded. To keep the list short, you can filter it by resource type or domain name (hold CMD or CTRL to select either).

11. Dark themes

Nothing, just because it’s a dark theme

Fortunately, it’s at the top of the preference page

12. Chrome code snippets

I love code snippets (too bad they don’t sync across browsers like other Settings)

The best part is that the context in which they are executed is the current page. So, these snippets, just like the code in your page, can access DOM, urls, cookies, and other cross-domain resources.

conclusion

You might be wondering what you should do next. Here’s a suggestion: Count up how much time you spent on developer tools last year, and spend 0.5% of that time reading this document for the next week

Share your favorite tips in the comments below. If they’re too cool, I might feel threatened and delete them. So, something normal will do.

Oh, I just thought of an extra suggestion. When you install Chrome Canary, log in with your Google account and sync, but don’t select the extension in advanced Sync Settings. That way, you get all your bookmarks, history, and other handy stuff, but no DOM-changing extensions that ruin your development environment.