A tech blogger who turns logical thinking into code

The introduction

We usually in the project development, the use of debugging tools to debug CSS-related code, it can help us understand what CSS functions are used, CSS code efficiency, and THE implementation of CSS code, and these are the core of CSS code inspection and debugging, it in some cases, Will affect the overall performance of our entire website application, so it is necessary to master the necessary debugging skills!

Debug CSS code using Chrome DevTools

You can use the Chrome DevTools debugging tool to check and debug CSS code.

Basic manual debugging of CSS code
Quickly and manually view the CSS styles of elements

You can press F12 on the Chrome open page to open the Chrome Development and Debugging tool, and then use the arrow tool to select the HTML code in the Element option. Finally, you can see the color, font, size and other CSS information of the Element in the Style pane on the right

As shown in figure:

Take a quick look at the CSS Link external stylesheet

concept

After we select the element node, the Styles TAB on the right shows the CSS properties of the current element, next to the link file you can click to open the external style sheet that defines the CSS rules to view the style source file

Quickly add an inter-line style to the selected element

concept

This method is equivalent to the style attribute of the HTML tag!

After selecting an Element in the HTML code directly under the Element option, in the Style pane on the right, click Element. Style to add an inter-line CSS Style to the currently selected Element!

This method is very useful in the actual application development, according to the added inter-line CSS properties we can easily quickly determine and detect the element’s CSS properties where the problem!

As shown in figure

Quickly add and modify CSS attributes to an element’s existing style rules

concept

This trick is often used in development to quickly check if your CSS is wrong!

Adding a CSS declaration

After selecting an Element in the HTML code directly from the Element option, click the middle of the {} curly braces to add the declared Style rule in the Style pane on the right to display the cursor, enter the CSS property name, and press Enter when the output is complete.

Modifying the CSS Declaration

Just double click on the original style, modify the style rules, and press Enter!

As shown in figure

Quickly add a class to the element

concept

After selecting an Element in the HTML code directly from the Element TAB, there is a.cls button in the Style TAB on the right. Clicking this button will display an Add New Class input box. Enter the name of the class you want to add and press Enter

So you can just click on the Add good Class check box and switch styles back and forth to test CSS properties

Tip: you’d better write the class you want to add first!

Quickly change the CSS property value of an element

When we edit the CSS property values in the Style TAB to the right of the Element option, we can use keyboard shortcuts to increment/decrement the values

  • The direction keyUpEach click givesCSS attribute valuesAdd 1
  • The direction keyDownEach click givesCSS attribute valuesReduced by 1
  • Alt+ arrow keysUpSupport (Windows, Linux) is given per clickCSS attribute valuesIncreased by 0.1
  • Alt+ arrow keysDownSupport (Windows, Linux) is given per clickCSS attribute valuesReduce 0.1
  • Shift+ arrow keysUpEach click givesCSS attribute valuesAdd 10
  • Shift+ arrow keysDownEach click givesCSS attribute valuesReduce 10
  • ctrl + Shift + Page UpSupport (Windows, Linux) is given per clickCSS attribute valuesAn increase of 100
  • ctrl + Shift + Page DownSupport (Windows, Linux) is given per clickCSS attribute valuesReduction of 100
The use of color pickers

concept

You can usually use a color picker to quickly change the color of an element

In the Style TAB, select the target HTML element, hover the mouse over the target element’s color properties icon, and click. The color picker appears, which is useful if you are good at matching colors.

As shown in figure

CSS Overview (Extract CSS information on the current page)

This is very powerful! However, Chrome development and debugging tools are not enabled by default, so you need to manually enable them

How do I enable CSS Overview in the Chrome Development and Debugging Tool

steps

Open chrome —->F12 to go to the debug tool —–> click the pinion setting icon on the upper right of the debug tool to enter the Settings —

—-> Select Experiments—–> check the CSS Overview option.

As shown in figure

Note: restart the debugging tool after opening it!

Functions of CSS Overview

This feature shows developers all information about the CSS properties of the current page, such as colors, fonts, contrast issues, unused declarations, and media queries, and is often used to judge the quality of the current CSS code.

The CSS Overview function contains five information sections

1.Overview summary

Highlights can show some of the CSS usage in the current page!

2.Colors

Can display all the color information used in the current page including background, font, etc…

3.Font info

Here you can display all the information about the font used in the current page and the CSS properties of the font!

This is where you can see the CSS font properties set for each font used

4.Media queries

You can view the media query information on the current page

Coverage panel (test information Coverage)

The main purpose of this feature is to detect the amount of code and usage rating of CSS or JS files, which means it can indicate how much CSS is used for each file loaded in a project application

Open the steps

Open chrome —->F12 to go to the debugging tool —-> Ctrl + Shift + P shortcut keys, type Coverage, and then select: Show Coverage, and finally click the refresh icon!

The. CSS file can be displayed in the URL Filter text box. You can enter. CSS to display the file

As shown in figure

This data may not seem important, but sometimes it can help you to develop optimal thinking and strategies!

Rendering Panel (2D)

Its function is related to CSS effect rendering, usually use it to detect the code rendering time and render overload area!

CSS rendering involves browser composition, here is not much to mention, I will give a detailed explanation in the future!

Rendering Panel Open steps

Open chrome —->F12 and go to the debug tool —-> Ctrl + Shift + P —–> enter Rendering—-> select Show Rendering and return to many checkboxes

The options I usually use are as follows:

Check the item describe
Paint flashing When the page hasredrawWhere the effect is displayedThe green rectangleArea to annotate! Can be simply understood as a dynamic effect of the page area, these effect areas oftenBrowser renderingthetimewilllongSome!
Frame Rendering Stats This option can be displayed when checked GPU 和frameSome real time situation, used to determine someanimationWhether the card is still more useful!
.

As shown in figure

Rendering panel we can get some routine check without data information, these information for understanding CSS code or JS code performance and consumption of equipment resources and so on have provided a lot of basis and reference, in depth optimization may be able to give you a trace of inspiration!

Performance Monitor

The name means a performance monitoring interface used to see how your code is running,

Open the steps

Open chrome —->F12 Go to the debugging tool —-> Ctrl + Shift + P —–> Enter Performance Monitor—-> Finally select Show Performance Monitor.

In this panel you can check the following options

CPU usage

The current CPU usage is the CPU usage

JS heap size

The size of the JS object heap

DOM nodes

The number of DOM nodes in memory, which can increase or decrease depending on the effect of the page

JS event listeners

Number of JS event listeners

As shown in figure

Layouts/sec

As the user views the page, the layout elements are rearranged

Style recalcs / sec

Redraw the styles in the page

The above two options are often used to test and analyze the performance of our CSS code. For example, if we use the left or top properties in our CSS, we will redraw the layout. If we load these properties into a JS animation, we will trigger dozens or even hundreds of redraws per second

For performance optimization, if we use translateX/Y of transform property in CSS3 to do animation, we will find that it does not trigger redraw process, but only combine images based on GPU, and the CPU usage will be greatly reduced!

The root reason why we usually use translate() to move elements instead of top or left when developing JS effects!

We can take a look at the comparison:

Summary: CSS Layouts/ SEC and Style recalcs/ SEC are Layouts/ SEC options that trigger redrawing and layout of the page

All of the above can help you get some real-time performance data from your application during normal front-end development, and can be very helpful when judging performance.

Performance Panel

The difference between Performance Panel and previous Performance Monitor is that we first control the Performance of each link through Performance Monitor. Then use the Performance Panel for the overall Performance analysis!

Open the steps

Open chrome —->F12 go to debug tool —-> Ctrl + Shift + P —–> Enter Performance—-> then we select Show Performance Finally, click on the reload icon, or press the shortcut CTRL + Shift + E

We can also press CTRL + Shift + E repeatedly to reload the performance information of the drawing page. The pie chart at the bottom shows the total drawing and rendering time of the page!

As shown in figure

As you can see from the above picture, when we open the performance panel after loading, we can get the page loading time/ms, CSS, JS, DOM nodes, event listening, and the total rendering time required!

Overseas online CSS debugging test code tools

1.CSS Specificity Visualizer

An overview of the

Specificity Visualizer is a useful online CSS detection tool

Address: online isellsoap. Making. IO/specificity…

As shown in figure

All you need to do is open the Visualize access address, paste in the CSS code you want to test, click the Visualize it button to test it, and return to the Visualize style selector and its weights below

Action figure

The areas marked red indicate that these selectors could be better optimized!

2.CSS Specificity Graph Generator

An overview of the

Check how selectors in your CSS code are organized in a particular style

Address: online jonassebastianohlsson.com/specificity…

As shown in figure

It will suggest that high peaks are bad, and the general trend should be to have more specificity at the back of the style sheet

The following figure

END

The above is the usual I will use in the work and study of some CSS code detection debugging tools, I hope to give you a little help!

Thanks for reading!