15 tips and tricks of the Chrome developer tools you need to know
Today, Google Chrome is the most popular browser among web developers. With a fast, six weekly release cycle and a powerful set of ever-expanding developer tools that turned the browser into a tool you must have. Most of you are probably familiar with many of its features, such as live CSS editing, using the console and debugger. In this article, we will explore 15 exciting tips and tricks that will improve your productivity even more.
If you used Sublime Text, then you probably cannot live without “Go to anything” ( Translator's note: for Idea users, this function is called “Searching Everywhere” and is called by double pressing the Shift key). You will be happy to know that a similar function is in the developer tools. Press Ctrl + P (Cmd + P for Mac users) when the developer panel is open to quickly find and open any file in your project.
But what if you want to search in source code? To search all downloaded files on the page, press Ctrl + Shift + F (Cmd + Opt + F). This search method also supports regular expression search.
')
After you have opened the file in the Sources tab, the developer tools allow you to go to any line of this file. To do this, press Ctrl + G for Windows and Linux (or Cmd + L for Mac), and enter the line number.
Another way is to press Ctrl + O, but instead of the text to search for, enter ":" and the line number ( Translator's Note: you can go further and enter the file name and line number using ":" as a separator between them, while typing The name of the file is completely completely optional, the same search)
The Developer Tools Console supports several useful “magic” functions and variables for selecting a DOM:
Learn more console features here .
When editing a file, you can install multiple carriages by holding Ctrl (Cmd for Mac) and clicking where you need it, so you can set the carriages in many places at once.
When you enable the Preserve Log option on the Console tab, the results will be saved and not cleared each time the page loads. This is useful if you want to view the history of errors that appear before leaving the page.
( Translator's note: a similar property is on the Network tab. When you turn it on, the query history stops clearing when navigating between pages. However, if the page was redirected using JavaScript and any other query was executed, then almost always the result of this query is impossible. Not forget to turn off these properties during long debugging! Developer tools almost always consume more system resources than the page itself!)
Chrome's developer tools have a built-in smarter of minimized source codes to a readable form. The button is located in the lower left corner of the currently open file in the Sources tab.
( Translator's note: sometimes there is not enough possibility of including this property automatically, as for example, it is done in FireFox)
Developer tools include a powerful mode for developing pages optimized for mobile devices. This Google video demonstrates most of its advanced features, such as changing the screen resolution, emulating a touchscreen touch, and emulating a poor quality network connection.
Another cool feature of the device mode is the ability to simulate mobile device sensors, such as touch screens and accelerometers. You can even specify your geographic coordinates. The object is located at the bottom of the Elements tab in Emulation -> Sensors.
When choosing a color in the style editor, you can click on the color sample and the color selection window will appear. While this window is open, your mouse pointer turns into a magnifying glass to select a color on the page, accurate to a pixel.
Development tools allow you to simulate such CSS states of a DOM element as: hover and: focus, making it easier to write styles for them. This feature is available in the CSS property editor.
Elements such as input fields and buttons, browsers, create from other basic elements that are usually hidden. However, you can go to Settings -> General and enable Show user agent shadow DOM to display these basic elements in the Elements tab. This will give you the opportunity to arrange them separately.
If you press Ctrl + D (Cmd + D) while editing files on the Sources tab, the next occurrence of the current word is additionally highlighted, allowing you to edit them simultaneously.
Using Shift + Click on a color pattern, in the CSS editing panel, the color format will be changed to RGBA, HSL hexadecimal ( Translator's Note: this is both a hexadecimal abbreviated form and full, and even in capital case. If you are not satisfied , the browser will try to find this color in the list of standard color constants. The only drawback of this feature is that in order to select the desired format, you often have to “scream” all other possible options).
Workspaces are the most powerful tool in the developer panel, turning developer tools into an IDE. The workspace contains the file structure in the Sources tab according to the structure of your local project, so now you can edit and save directly, without having to copy and paste changes into an external text editor.
To customize the workspaces, go to the Sources tab ( Translator's Note: turn on the navigation bar if it is hidden, to do this, click the Show navigator button in the upper left corner of the tab) and right-click anywhere in the navigator pane, or simply drag the entire tab project to the developer panel. Now, the selected folder, its subdirectories and all files in them will be editable no matter which page you are on. For even more convenience, you can use the files that are used on this page, which will allow you to edit and save them.
UPD. Translator's Note:
The added folder will be available from all tabs. Therefore, if your project has more than one HTML file, then it will be enough to open it in the next browser tab.
You can learn more about the workspaces here .
Recommendations for further reading:
Chrome keyboard shortcuts
A long list of tips and tricks in the Chrome documentation
1. Quick file change
If you used Sublime Text, then you probably cannot live without “Go to anything” ( Translator's note: for Idea users, this function is called “Searching Everywhere” and is called by double pressing the Shift key). You will be happy to know that a similar function is in the developer tools. Press Ctrl + P (Cmd + P for Mac users) when the developer panel is open to quickly find and open any file in your project.
2. Source code search
But what if you want to search in source code? To search all downloaded files on the page, press Ctrl + Shift + F (Cmd + Opt + F). This search method also supports regular expression search.
')
3. Go to line
After you have opened the file in the Sources tab, the developer tools allow you to go to any line of this file. To do this, press Ctrl + G for Windows and Linux (or Cmd + L for Mac), and enter the line number.
Another way is to press Ctrl + O, but instead of the text to search for, enter ":" and the line number ( Translator's Note: you can go further and enter the file name and line number using ":" as a separator between them, while typing The name of the file is completely completely optional, the same search)
4. Selection of DOM elements using the console
The Developer Tools Console supports several useful “magic” functions and variables for selecting a DOM:
- $ () Is equivalent to document.querySelector (). Returns the first element corresponding to the CSS selector, for example, $ ('DIV') will return the first DIV element on the page.
- $$ () is equivalent to document.querySelectorAll (). Returns a list of elements ( Translator’s Note: namely NodeList) that correspond to the given CSS selector.
- $ 0 - $ 4 is the story of the last five DOM elements you selected in the Elements tab, where $ 0 is the last.
Learn more console features here .
5. Using multiple carriages and selections
When editing a file, you can install multiple carriages by holding Ctrl (Cmd for Mac) and clicking where you need it, so you can set the carriages in many places at once.
6. Preserve Log
When you enable the Preserve Log option on the Console tab, the results will be saved and not cleared each time the page loads. This is useful if you want to view the history of errors that appear before leaving the page.
( Translator's note: a similar property is on the Network tab. When you turn it on, the query history stops clearing when navigating between pages. However, if the page was redirected using JavaScript and any other query was executed, then almost always the result of this query is impossible. Not forget to turn off these properties during long debugging! Developer tools almost always consume more system resources than the page itself!)
7. Flavoring minimized sources
Chrome's developer tools have a built-in smarter of minimized source codes to a readable form. The button is located in the lower left corner of the currently open file in the Sources tab.
( Translator's note: sometimes there is not enough possibility of including this property automatically, as for example, it is done in FireFox)
8. Device Mode
Developer tools include a powerful mode for developing pages optimized for mobile devices. This Google video demonstrates most of its advanced features, such as changing the screen resolution, emulating a touchscreen touch, and emulating a poor quality network connection.
9. Emulation device sensors
Another cool feature of the device mode is the ability to simulate mobile device sensors, such as touch screens and accelerometers. You can even specify your geographic coordinates. The object is located at the bottom of the Elements tab in Emulation -> Sensors.
10. Color selection
When choosing a color in the style editor, you can click on the color sample and the color selection window will appear. While this window is open, your mouse pointer turns into a magnifying glass to select a color on the page, accurate to a pixel.
11. Forced condition of the item
Development tools allow you to simulate such CSS states of a DOM element as: hover and: focus, making it easier to write styles for them. This feature is available in the CSS property editor.
12. Displaying shadow DOM
Elements such as input fields and buttons, browsers, create from other basic elements that are usually hidden. However, you can go to Settings -> General and enable Show user agent shadow DOM to display these basic elements in the Elements tab. This will give you the opportunity to arrange them separately.
13. Choose next entry
If you press Ctrl + D (Cmd + D) while editing files on the Sources tab, the next occurrence of the current word is additionally highlighted, allowing you to edit them simultaneously.
14. Changing the color format
Using Shift + Click on a color pattern, in the CSS editing panel, the color format will be changed to RGBA, HSL hexadecimal ( Translator's Note: this is both a hexadecimal abbreviated form and full, and even in capital case. If you are not satisfied , the browser will try to find this color in the list of standard color constants. The only drawback of this feature is that in order to select the desired format, you often have to “scream” all other possible options).
15. Editing local files in the workspace
Workspaces are the most powerful tool in the developer panel, turning developer tools into an IDE. The workspace contains the file structure in the Sources tab according to the structure of your local project, so now you can edit and save directly, without having to copy and paste changes into an external text editor.
To customize the workspaces, go to the Sources tab ( Translator's Note: turn on the navigation bar if it is hidden, to do this, click the Show navigator button in the upper left corner of the tab) and right-click anywhere in the navigator pane, or simply drag the entire tab project to the developer panel. Now, the selected folder, its subdirectories and all files in them will be editable no matter which page you are on. For even more convenience, you can use the files that are used on this page, which will allow you to edit and save them.
UPD. Translator's Note:
The added folder will be available from all tabs. Therefore, if your project has more than one HTML file, then it will be enough to open it in the next browser tab.
You can learn more about the workspaces here .
Recommendations for further reading:
Chrome keyboard shortcuts
A long list of tips and tricks in the Chrome documentation
Source: https://habr.com/ru/post/254007/
All Articles