Twelve Useful Chrome DevTools Tips
In this article, we will look at some of the features of the Chrome developer tools. Specifically, I use Chrome Canary and advise you. And not because it is a reference to the little cute birds who sacrificed their lives so that we could mine fresh coal.
Some of the DevTools features you may not have known. I will be very happy if at least one of them you find useful for yourself.
(In the article below there are animated gifs that start to annoy after the first cycle. Therefore, I advise you to open the dev tools and delete the DOM nodes that are responsible for the images.)
')
So, let's go:
I learned about this opportunity from comments, and I consider it useful enough to be described at the beginning. Sometimes you need to copy the contents of a variable to the clipboard. For example html code or json object. For this you can use the copy function.
Now the text representation of the variable is copied to the clipboard.
The animations are beautiful. They delight users, and more importantly, they delight me. The animations menu in DevTools will allow you to slow down all the animations on a page by up to 25% or up to 10% (see the world through the eyes of a rabbit), or move a specific animation.
When you are in device emulation mode, you can turn on the device frame and when you click on capture screenshot you will get a screen shot along with the device frame.
The resulting image will look something like this:
When you type $ 0 in the console, you will get a link to the current selected node in the DOM toolbar.
This is a real link to the element, and as an example, you can make $ 0.classList.add ('touch-of') or $ 0.getBoundingClientRect () to find out the size, or if you use jQuery on the page, you can type something $ ($ 0) .data () to get the item data.
By default, Chrome will simply show you the object as a DOM element. If you want to see the element as a JavaScript object, you can type console.dir ($ 0)
Here is the difference:
If you are cool enough and use React and React dev tools, $ r will show you the link to the react component. To see the proprs of a component, just type $ r.props .
Bonus: You can enter the item ID in the console and also get a link to the item, although it is not a real global variable.
This is not exactly DevTools Tip, but I'm sure you will love them. With the advent of switch functions, it became convenient to use them in one line. For example, the expression performance.getEntries (). Filter (entry => entry.name.includes ('static')) will output some information about my queries from domains containing âstaticâ in the name.
Of course, if you need to write more than one line, you can press shift + enter to switch to a new line without executing code.
The search field in the toolbar is not only looking for text (this is a turn, what else is it looking for ?!), but also matching selectors. This can be especially convenient for non-web developers who need to select selectors, for example, for autotests.
Here I am looking for matches on .section-inner p: nth-of-type (2)
When you experiment with colors, you can use the eyedropper to select any element on the page or select from a palette of colors that are already used on the page. Or choose one of the colors material design.
Sometimes it is very difficult to say which font was actually rendered. At the bottom of the Computed tab of the toolbar, you can see which font is used, even if its name is not in the font-family list.
If you have a fixed-width menu and want to find out how long the text will fit there and see the hyphenation of words. Switch the document to design mode! (document.designMode = 'on')
After that you will be able to edit all elements with textual content.
If you are the person who decided to use on / off instead of true / false , I would like to talk with you in my office.
A very good performance tuning tool is the filmstrip mode on the Network tab. It will allow you to focus on the visual component and not on obscure events like domContentLoaded.
Or you can just ironically see how the fonts are loaded on the Adobe page.
I look at it every time I feel sad. My favorite part is when all the text disappears.
Whatever performance you do, you need to know what comes to your browser. If you advertise on the site, then comes a lot of things. To shorten the list, you can filter resources by type (hold cmd / ctrl for multiple selections) and also by domains.
Because the dark theme.
Enable can be at the beginning of the settings page
I love snippets. (itâs a pity that they donât sync across browsers with my other Chrome settings).
It's cool that they are executed in the context of the page. Regarding access to DOM, relative links, cookies, and other things, your snippets will have the same behavior as regular code.
...
You can learn more information about the features of the developer panel by visiting the documentation . Take some time to study it in order to increase the efficiency of your work. Share your useful finds in the comments.
...
One more thing. When installing Chrome Canary, log in and sync your Google account, but in the advanced sync settings, uncheck the âExtensionsâ checkbox. So you get your history, bookmarks and all other things, except extensions that litter your workspace with your code.
Some of the DevTools features you may not have known. I will be very happy if at least one of them you find useful for yourself.
(In the article below there are animated gifs that start to annoy after the first cycle. Therefore, I advise you to open the dev tools and delete the DOM nodes that are responsible for the images.)
')
So, let's go:
Copy the variable to the clipboard
I learned about this opportunity from comments, and I consider it useful enough to be described at the beginning. Sometimes you need to copy the contents of a variable to the clipboard. For example html code or json object. For this you can use the copy function.
copy (someVariable) Now the text representation of the variable is copied to the clipboard.
1. Inspect the animation.
The animations are beautiful. They delight users, and more importantly, they delight me. The animations menu in DevTools will allow you to slow down all the animations on a page by up to 25% or up to 10% (see the world through the eyes of a rabbit), or move a specific animation.
2. Convenient screenshots
When you are in device emulation mode, you can turn on the device frame and when you click on capture screenshot you will get a screen shot along with the device frame.
The resulting image will look something like this:
3. $ 0 in console
When you type $ 0 in the console, you will get a link to the current selected node in the DOM toolbar.
This is a real link to the element, and as an example, you can make $ 0.classList.add ('touch-of') or $ 0.getBoundingClientRect () to find out the size, or if you use jQuery on the page, you can type something $ ($ 0) .data () to get the item data.
By default, Chrome will simply show you the object as a DOM element. If you want to see the element as a JavaScript object, you can type console.dir ($ 0)
Here is the difference:
If you are cool enough and use React and React dev tools, $ r will show you the link to the react component. To see the proprs of a component, just type $ r.props .
Bonus: You can enter the item ID in the console and also get a link to the item, although it is not a real global variable.
4. Arrow functions in the console
This is not exactly DevTools Tip, but I'm sure you will love them. With the advent of switch functions, it became convenient to use them in one line. For example, the expression performance.getEntries (). Filter (entry => entry.name.includes ('static')) will output some information about my queries from domains containing âstaticâ in the name.
Of course, if you need to write more than one line, you can press shift + enter to switch to a new line without executing code.
5. Search by selector
The search field in the toolbar is not only looking for text (this is a turn, what else is it looking for ?!), but also matching selectors. This can be especially convenient for non-web developers who need to select selectors, for example, for autotests.
Here I am looking for matches on .section-inner p: nth-of-type (2)
6. Experimenting with colors
When you experiment with colors, you can use the eyedropper to select any element on the page or select from a palette of colors that are already used on the page. Or choose one of the colors material design.
7. View rendered fonts
Sometimes it is very difficult to say which font was actually rendered. At the bottom of the Computed tab of the toolbar, you can see which font is used, even if its name is not in the font-family list.
8. Edit any text on the page.
If you have a fixed-width menu and want to find out how long the text will fit there and see the hyphenation of words. Switch the document to design mode! (document.designMode = 'on')
After that you will be able to edit all elements with textual content.
If you are the person who decided to use on / off instead of true / false , I would like to talk with you in my office.
9. Filmstrip
A very good performance tuning tool is the filmstrip mode on the Network tab. It will allow you to focus on the visual component and not on obscure events like domContentLoaded.
Or you can just ironically see how the fonts are loaded on the Adobe page.
I look at it every time I feel sad. My favorite part is when all the text disappears.
10. Filters on the Network tab
Whatever performance you do, you need to know what comes to your browser. If you advertise on the site, then comes a lot of things. To shorten the list, you can filter resources by type (hold cmd / ctrl for multiple selections) and also by domains.
11. Dark theme
Because the dark theme.
Enable can be at the beginning of the settings page
12. Chrome snippets
I love snippets. (itâs a pity that they donât sync across browsers with my other Chrome settings).
It's cool that they are executed in the context of the page. Regarding access to DOM, relative links, cookies, and other things, your snippets will have the same behavior as regular code.
...
the end
You can learn more information about the features of the developer panel by visiting the documentation . Take some time to study it in order to increase the efficiency of your work. Share your useful finds in the comments.
...
One more thing. When installing Chrome Canary, log in and sync your Google account, but in the advanced sync settings, uncheck the âExtensionsâ checkbox. So you get your history, bookmarks and all other things, except extensions that litter your workspace with your code.
Source: https://habr.com/ru/post/311582/
All Articles