- DevTools Tips and Tricks every CSS Developer needs to know
- Louis Lazaris
- The Nuggets translation Project
- Permanent link to this article: github.com/xitu/gold-m…
- Translator: DEARPORK
- Proofread by: TiaossuP, Baddyo
16 debugging tool tips for CSS development
Most developers basically use the browser’s developer tools to debug the front end, but even after years of using Chrome’s developer tools, I still come across tricks and features I’ve never seen before.
In this article, I’ve written about a number of CSS-related features and tricks in developer tools that I think will take your CSS development to the next level. Some of these tips aren’t specific to CSS, but I’ve put them all together.
Some are simple tips on workflow and debugging, while others are new features introduced in the last few years. Most of them are based on Chrome’s developer tools, but they also cover some Firefox tricks.
Review the CSS of elements displayed through JavaScript
It is not difficult to find CSS for most Elements in the Elements panel of the developer tools. Most of the time you just need to right-click the element, click Check, and (if necessary) carefully click on the Elements panel to find it. Once the element is selected, its CSS appears in the Styles pane and can be edited at any time.
Sometimes an element is displayed dynamically because of some JavaScript based user action, such as click or mouseover. The most intuitive way to examine them is to temporarily change your JavaScript or CSS to make them visible by default, so that you can handle them without having to mimic the user’s actions.
But if you’re looking for a faster way to make elements visible using only developer tools, follow these steps:
- Open developer tools
- Open the Sources panel
- Perform user actions to make objects visible (such as mouse hovering)
- Press F8 when the element is visible (same as the pause script button)
- Click the Select Element button in the upper left corner of the Developer tools
- Click on the element on the page
Bootstrap tooltips will only show up if JavaScript is triggered by hovering over the link. Here’s a demo:
As you can see at the beginning of the GIF, I couldn’t initially select the element to review because it disappeared as soon as the mouse moved over it. But if I stop the script running while it’s visible, it will remain visible so I can check it properly. Of course, if the Element is just a simple CSS :hover effect, I can Toggle the State with the Styles panel’s “Toggle Element State” (: HOV button) to make it appear. But in the case of style switching by JavaScript, stopping scripts is probably the best way to get their CSS style.
Find elements through CSS selectors
You probably know that you can search for an element in the Elements palette using the built-in functions (CTRL + F or CMD + F). But keep an eye out for the “find” column, which will give you the following hint:
As I pointed out in the screenshot, you can find elements using strings, selectors, and XPath. I used to use strings all the time, and it wasn’t until recently that I realized I could use selectors.
You don’t have to use your CSS selector, it can be any valid CSS selector. The find feature will tell you if the selector matches any element. This is useful for finding elements and for testing whether the selector is valid.
Here is a demo that uses the body > div selector to search and iterate over all immediate child div elements of the body:
As mentioned above, these searches can be done with any legal selector, similar to the querySelector() and querySelectorAll() methods of JavsScript.
Edit the box model directly
The box model is one of the first things you learn when you start using CSS. Since this is an important part of CSS layout, developer tools allow you to edit the box model directly.
If you review an element on the page, click on the Computed panel next to the Styles panel in the right pane. You should see a visual box model of the element with values for each part:
In case you didn’t know, you can edit any of them by double-clicking:
Any changes made will be reflected on the page in the same way as when editing CSS in the Styles panel.
Increments or decrement property values in the Styles pane
You may already be aware that you can edit CSS in the Styles pane. Simply click on the property or value and type Change.
But maybe you don’t realize that values can increase or decrease in different ways.
- The up arrow key/down arrow key increments/decrements the property value by one
- ALT + up arrow key/Down arrow key can increase/decrease the property value by 0.1
- SHIFT + up/Down arrow keys increase/decrease property values by 10
- CTRL + up/Down arrow keys to increment/decrement property values by 100
You can also use Page Up or Page Down buttons instead of arrow keys.
Sources panel text editor feature
You’re probably more familiar with editing in the Styles palette than anywhere else, but the Sources palette is a highly underrated feature of developer tools that mimics how regular code editors and ides work.
Here are some useful things you can do in the Sources panel (open the developer tools and click the “Sources” button).
Use the CTRL key for multiple selection
If you need to select multiple areas in a single file, you can do this by holding down the CTRL key and selecting the desired content, even if it is not continuous text.
In the demo above, I selected three arbitrary parts of the main.css file in the Sources panel and pasted them back into the document. In addition, you can type in multiple places simultaneously with multiple cursors, using the CTRL key to click multiple places.
Use the ALT key to select columns
Sometimes you might want to select a list of text, but usually you can’t. Some text editors allow you to use ALT to do this, as does the Sources panel.
Use CTRL + SHIFT + O to search for elements through CSS selectors
After opening a file in the Sources panel, pressing CTRL + SHIFT + O opens an input box that lets you jump to anywhere, a feature known for Sublime.
After pressing CTRL + SHIFT + O, you can enter the CSS selector for the element you want to find in this file. Developer tools will give you matching options. Click to jump to the specified location in the file.
Responsive design features for Chrome and Firefox
You’ve probably seen sites that let you test your responsive layout with just a few clicks, but you can do the same with Chrome’s Device mode.
Open your developer tools and click the “Toggle Device Toolbar” button in the upper left corner (CTRL + SHIFT + M) :
As you can see, the device toolbar has multiple options to change the view based on the device size and device type, and you can even do this manually by manually adjusting the width and height values or dragging the handles in the viewport area.
Firefox’s additional “@Media Rules” panel has a similar feature, allowing you to click breakpoints from your site’s stylesheet. You can see me using it on one of my sites in the demo below.
Developer tools for color functionality
Handling color values is normal in CSS. Developer tools make it easier to edit and test color values. Here’s what you can do:
contrast
First, the developer tool has the ability to view accessibility. When you see the Color property value in the Styles pane, you can open the Color collector by clicking on the box next to the Color value. In the color collector, you will see the contrast option indicating whether the text color you selected has an accessible contrast for the background.
As you can see in the demo above, the color collector shows curved white lines in the chromatography. This line indicates where the minimum acceptable contrast begins and ends. When I move the color value above the white line, the green tick next to the contrast will disappear, indicating poor contrast.
The palette
In addition to the ability to view accessibility, you can access different palettes, including the Material Design palette and the palette associated with the page you are currently viewing.
Toggle color value syntax
Finally, a little known tidbit in developer tools is the syntax that allows you to toggle color values while viewing them. By default, the Styles pane displays the syntax for the colors written in the CSS. The developer tool, however, allows you to switch the syntax between HEX, RGBA, and HSLA by holding shift and clicking on the little box to the left of the color value:
Edit CSS shadows
Text-shadow and box-shadow CSS are tedious to write by hand, the syntax is easy to forget, and the syntax is slightly different for both shadows.
Conveniently, Chrome’s developer tools allow you to add text-shadow or box-shadow using a visual editor.
As shown in the demo, you can add text-shadow or box-shadow to any element using the options bar in the lower right corner of any style in the Styles pane. After shadows are added, you can edit different property values using a visual editor. Existing shadows can be re-breathed out of the visual editor by clicking on the small square to the left of the property value.
Grid layout inspector for Firefox
Grid layouts are now supported by most popular browsers, and more and more developers are using them as the default layout method. Firefox developer tools now feature the Grid option in the Layout TAB.
This feature allows you to open a fully covered Grid to help visualize different parts of the Grid layout. You can also display line numbers, area names, and even choose to extend the grid lines indefinitely, if that works for you. In the example demo, I’m using Jen Simmons’ example site, which is responsive so you can see the benefits of a visual grid as the layout changes for different viewports.
CSS Filter editor for Firefox
Filter is another new feature that is now supported on almost both mobile and PC. Again, Firefox provides a nice little tool to help you edit the filter value.
Once you have filter in your code (tip: if you don’t know the actual syntax, you can write Filter: None first), you’ll notice a stacked black and white box to the left of the filter value, which opens the Filter editor.
You can add different filters to individual values, delete individual filter values, or drag filters to rearrange their hierarchy.
Edit the CSS animation in the Styles pane of Chrome
Editing static elements in Chrome’s Styles pane is easy, but how about editing animations created using the Animation property and @Keyframes?
Developer tools have two ways to edit animations. First, when you review an element or select an element in the Elements palette, all the Styles for that element will appear in the Styles palette — including @keyframes defined. In the demo below, I selected a drawing element and adjusted some keyframe Settings.
But that’s not all. Chrome developer Tools provides an Animation panel that lets you edit an Animation and its various parts using a visual timeline. You can open the Animations panel by clicking the Customize and Control DevTools button (three vertical dots) at the top right of the developer tools to select more tools.
As shown above, you can edit the timeline for each animation element, and then when you’re done editing, you can browse the animation to see the changes on the page. This is a cool feature for designing and debugging complex CSS animations!
View unused CSS in developer tools
There are a number of tools available these days that can help you keep track of CSS that isn’t being used on a particular page. This gives you the option of removing them completely or loading them only when necessary. This will have significant performance advantages.
Chrome allows you to view unused CSS through the Developer tools’ “Coverage” panel. This panel can be opened by clicking the “Customize and Control DevTools” option (three vertical dot buttons) in the upper right corner of the developer panel mentioned above, selecting “More tools,” and finding “Coverage.”
As the demo shows, once you have the Coverage panel open, you can open a source file in the Sources panel. When the file opens, you will notice a green or red line to the right of each style in the CSS file, indicating whether the style was applied to the current page.
conclusion
Your browser development tools are a treasure trove of CSS editing and debugging. When you combine these suggestions with Chrome features such as Workspaces, which allows you to save changes made in developer tools to local files, the debugging process becomes much more complete.
I hope these tips and suggestions will improve your ability to edit and debug CSS in future projects.
If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.
The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.