There are many articles online about the secret features of the Chrome Developer Tools tool for developers, and recently I found a design-oriented topic note. Its advantage is that it described very simple actions: changing the color, classes, text on the page, etc. It seems to me that this is more practical and useful information both for beginners in layout and for those who regularly work with it. Personally, I actively use 90% of these examples, but the “secrets” are not really. In today's publication, I will share some of my best practices and other useful features.
Before you can use Chrome Devtools, you need to run it. Unlike many other Chrome extensions for development, this tool is built directly into the browser itself. There are several ways to open it:
1. From the main menu, select "More Tools", and then in the "Developer Tools" drop-down list.
2. Call the context menu in the place of the web page of interest to you (text / image, menu, etc.), and there click on the link “Inspect Element”.
3. There are hot keys:
- For Windows, this combination: "Ctrl + Shift + I" or the "F12" key.
- For Mac - “Cmd + Opt + I”
How to edit HTML / CSS code
In principle, the main function for which I use Google Chrome Devtools is to edit the code on the fly and check the style settings. From all the inclusion options, I select the “Inspect Element” context menu item, because immediately before you open the elements corresponding to the desired object.
You see HTML on the left and CSS on the right. Here you can change and insert new tags, edit text, add / modify styles, etc. And you see all the changes immediately on the site in the upper window. From useful, by the way, CSS also displays files in which certain rules are set - it will be easier for you to find the code you need.
1. Quick file change
If you used Sublime Text, then you probably cannot live without “Go to anything” (Translator 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. Search in the source code
But what if you want to search in the source code? To search in all downloaded files on the page, press Ctrl + Shift + F (Cmd + Opt + F). This search method also supports regular expression searches.
3. Go to line
After you open 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, enter ":" and the line number (Translator Note: but you can go even further and enter the file name and line number using ":" as a separator between them, while entering the file name is completely optional, this is a search).
4. Fetching DOM elements using the console
The developer tool console supports several useful “magic” functions and variables for DOM fetching:
- $ () - equivalent to document.querySelector (). Returns the first element matching the CSS selector, for example, $ ('DIV') will return the first div element on the page.
- $$ () - equivalent to document.querySelectorAll (). Returns a list of items (Translator Note: namely, NodeList) that match the given CSS selector.
- $ 0 - $ 4 is the history of the last five DOM elements that you selected in the Elements tab, where $ 0 will be the last.
Find out more console functions 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, so you can install carriages in many places at the same time.
6. Preserve Log
When you enable the Preserve Log option on the Console tab, the results will be saved, not cleared each time the page is loaded. This is convenient if you want to view the history of errors that appear before leaving the page.
7. Prettification of minimized sources
The Chrome Developer Tools has a built-in “pretender” of minimized source codes to a readable look. The button is located in the lower left corner of the file that is currently open in the Sources tab.
(Translator Note: sometimes it’s not possible to enable 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 video from Google demonstrates most of its advanced features, such as changing the screen resolution, emulating a touch on the touch screen, and emulating a low-quality network connection.
9. Emulation of device sensors
Another cool feature of the device mode is the ability to simulate the sensors of mobile devices, such as touch screens and accelerometers. You can even indicate 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 swatch and a color selection window will appear. While this window is open, your mouse cursor turns into a magnifying loupe to select the color on the page, accurate to a pixel.
12. Display 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 the Show user agent shadow DOM to display these basic elements in the Elements tab. This will give you the opportunity to arrange them individually.
14. Change the color format
Using Shift + Click on the color swatch in the CSS editing panel, the color format will be changed to RGBA, HSL hexadecimal (Translator Note: at the same time as a hexadecimal abbreviated form, and the full one, and even in the capital register. If this does not suit you, then the browser will try to find the given 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 “crack” all the other possible options).
15. Editing local files in the workspace
Workspaces are a powerful toolbar for a developer panel that turns 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 the changes to an external text editor.
To set up workspaces, go to the Sources tab (Translator Note: turn on the navigation bar if it is hidden, for this, click on the Show navigator button in the upper left corner of the tab) and right-click anywhere in the navigator panel, or simply drag the entire project tab into the developer panel. Now, the selected folder, its subdirectories and all files in them will be editable regardless of which page you are on. For even greater convenience, you can use the files that are used on this page, which will allow you to edit and save them.
UPD. Translator Note:
The added folder will be accessible from all tabs. Therefore, if your project has more than one HTML file, then it will be enough to open it in a neighboring browser tab.
You can learn more about workspaces here.
Emulation of screen sizes, devices
In the article on viewing the site at different screen resolutions, I mentioned several services on the topic, although in fact the task is solved even easier - using the Google Chrome Devtools developer tool.
In the lower left corner there is a button for switching the screen to the mobile / flexible version, where you can set the size of the browser window. For convenience, the parameters of smartphones (Pixel, iPhone) and tablets (iPad) are automatically listed there, however you can set any width / height values. With this thing, I usually look for errors in responsive design during development.
Editing content on the fly (designMode)
The content in modern templates is usually dynamic, so their design should correctly adapt to different situations and the length of the texts. Sometimes entering a sufficiently large line can disrupt the appearance of the page.
In order to check if everything is ok, you can edit the content / headers directly in the browser - for this, go to the “Console” tab, where you write the document.designMode = “on” directive, and press Enter.
Right after that you will be able to edit the content page in the top window. Actually, I used a similar trick, but I did everything in the HTML tab, but somehow, of course, it is more visual and effective.
This method is useful for quickly changing the appearance of the layout when you want to see how it will look without any object. The second reason I remove one or another part of the template is the need to take a screenshot without it. Previously, I simply deleted the object from HTML, but it turns out there is a better method - select the element and click the "h" button. In fact, this action activates the visibility CSS property.
Fast class switching
If you need to compare several design options, then you can very clearly implement this through Google Chrome Devtools. To do this, you must first have the appropriate styles prescribed. Next, either make changes directly to the HTML code, or use a more beautiful solution:
You can test it in this example with Codepen. In the right window, enable the ".cls" option, and then in the line write the name of the desired class and press Enter - it will be added to the switch list. Then just uncheck / check the appropriate boxes.
CSS visual editor
For some properties of CSS styles, the Chrome Developer Tool has special dialog boxes with settings that will greatly simplify the life of novice users. If you move the mouse cursor to the lower right corner, an icon with three dots will appear there, and when you hover over it an additional menu of functions.
They allow you to manage options such as:
- text-shadow - the shadow of the text,
- box-shadow - the shadow of the block,
- color - content color
- background-color - background color.
Here's what these helper tools look like:
They are called not only to create properties, but also when editing them. All values are immediately visible on the page, which allows you to test different design options in real time. Beginner webmasters / designers come in handy.
Finally, a useful video on the topic:
Total This extension for Chrome contains many more useful functions, so in the future I think to supplement the article with a few more life hacks. I also advise reading the official documentation where there is an explanation of all the options and training manuals.
Do you use the Google Chrome Developer Tools in your work? Perhaps you know some other interesting ways to use it?