Chrome DevTools For CSS For Better CSS Coding & CSS Debugging
Hello developers’ community! A beginner CSS developer most often does not understand the purpose of all the tools that the browser provides to him. And a relatively experienced developer, if he basically solves the same type of problems, can hardly boast that he regularly uses all the possibilities that the browser developer tools provide him. However, it would be extremely useful to get to know them at least so that when solving some new problems, you immediately know where to look for the answer, and having studied the subtleties of each of them in more detail, you can raise your labor productivity, and accordingly the quality of your CSS code to a new level. In this article, which is called ‘Chrome DevTools For CSS For Better CSS Coding & CSS Debugging’, you will find out why you need to use this technology and what benefits it provides for high-quality coding and debugging. Let’s start from the beginning!
Why do developers use Chrome DevTools? It happens that the written code refuses to work for unknown reasons. To quickly find out what a code problem is and how to solve it effectively, you need to master a set of tools. Chrome DevTools is one of the most powerful web developer tools, it is built into the most popular Chrome browser today. This method for better CSS coding and debugging will be useful for everyone, who is engaged in web development and concerned about the performance of created projects. Sometimes the lack of experience hinders the effective creation of an IT product, and therefore the lack of ready-made templates in the mind of the developer to solve the task. So, here’s how to quickly solve such problems with Chrome DevTools.
Chrome DevTools contains several tabs, each of which we will analyze below. There are several ways to call the developer tools, and the most convenient one should be chosen depending on the situation:
- To explore an item on the page (in the Elements tab), right-click on it and select Inspect.
- You can use Ctrl + Shift + C or Command + Option + C (Mac) to quickly open the Elements tab without a specific selection.
- To quickly get to the Console tab, press Ctrl + Shift + J or Command + Option + J (Mac). You can close DevTools with the same keyboard shortcut.
You can adjust the tools by clicking the three vertically placed dots in the upper right corner of their window (next to the cross). From the menu that appears, you can choose to place DevTools: at the bottom of the page you’re working on, in the left or right part of it, or in a separate window. You will probably have to switch between these options from time to time, because, depending on the placement of elements on the page and their size, having a toolbar will be not convenient in different places. From the same menu, selecting Show console drawer or More tools opens access to additional features of the developer tools. The Shortcuts item will allow you to view the main keyboard shortcuts that significantly speed up the work with DevTools, and with the Settings item, you can customize the tools and the whole page.
The first and for many cases the main toolbar – Elements. Here the developer can view the tree of HTML-elements and edit their code anywhere and anytime. When debugging scripts that manipulate the element tree, the breakpoint function may be indispensable for the element change event. To activate it, right-click on an element in the tree, select Break on, and then one of three options: stop when the script makes changes to the structure of the nested tree of this element; when the attribute changes; or when the item is about to be deleted. Once the appropriate breakpoint is set, the browser will not allow the scripts to make inconspicuous changes to the element tree, but instead will stop and show the line of code that caused these changes.
- In the Styles panel, you can view all the styles assigned to the selected item, along with the name of the CSS file and the line number in which the corresponding rule is specified. Styles can be quickly disabled and reconnected by clicking the check box to the left of a specific property. You can also change the value of a property by clicking it, and add a new CSS property by clicking to the right of any of the existing ones. At the top of the list of CSS rules is a field for quickly finding the desired property. There you can enter, for example, “color” or “black” and see which rule sets the element black. Next to the field, there are buttons that allow you to hang new classes or even pseudo-classes on the element.
- In the second panel – Computed – you can view the specific values that the browser has assigned to certain CSS-properties. Also, if you open property by clicking the arrow next to it, a chain of rules will appear that affect it; rewritten (rejected) values are crossed out.
- In the Sources tab, you can view, open and even edit the source files of the site. For example, if you change the style, the page instantly updates its appearance, and if you change the code executed by a button, then the next time you click on this button, the browser will launch a new version of the code. However, after reloading the page, all changes made to the files will be lost. To avoid this, you need to mount the page to a local drive using the File System panel. However, perhaps the most important thing that the Sources tab offers is the ability to debug the code. First, you need to stop executing the code in the place that interests you and that you want to explore. The easiest way to set such a breakpoint is to open the desired file, find the desired line and click on its number. Then the number will be highlighted in blue, and when the execution reaches the selected line, the browser will suspend the execution of JS and highlight the entire line in blue.
- You can use the Performance tab to profile a page, that is, to track which factors and areas of code make it slow. To start profiling, click on one of the first two buttons on the toolbar at the top of the tab.
So, Chrome Developer Tools offers a whole host of ways to test and optimize your code, as well as debug it. I hope you have taken note of some of these opportunities, and the next time you start web development, your work will be even more effective.
Conclusion
In the article ‘‘Chrome DevTools For CSS For Better CSS Coding & CSS Debugging’, we have considered some of the features of Chrome DevTools in order to facilitate and speed up your work and writing code. Google Chrome is currently one of the most popular web browsers used by developers today. Chrome DevTools can really improve your workflow by helping you develop, test, and debug your sites right in your browser. With these tools, you can do everything from testing your viewport on a mobile device to editing HTML / CSS code, even using it to measure the performance of individual assets on your website. I hope the information above will be useful to you. Happy coding!
