CSS debugging?

While hot updates are fast these days (the Go Live plug-in, or the NodeJS plug-in), there are still delays. For faster styling of CSS code, it is most convenient to use the browser’s built-in functionality. I don’t mean changing Styles under Elements in the Elements console. This is too slow to write and modify Styles line by line. The diagram below:

More convenient way

To also go to Elements, select the Styles TAB and click on the plus sign (New Style rule).

An inspector- Stylesheet resource file appears, and click on the resource file name. Will go to the Sources module and preview the temporary file

Here to modify the CSS style, can be completely real-time application in the page, of course, you can not add new style rules (New style rule) the current HTML page if there is a reference to the CSS file, you can also directly click the CSS file name to enter the corresponding CSS file.

All custom styles (not the default) have a file origin and how many lines are included, which is how style debugging locates errors.

Enter the corresponding CSS file to edit in the current file and apply the style rules to the PAGE Dom in real time.

The following GIF demonstrates the effect:

This is where you can debug styles in real time, with style prompts. Just change the details of the style and copy the current style into a CSS file in the editor. Development can greatly improve the time to debug style rules.

conclusion

Bloggers often use this method to debug the style, efficiency is really nice, compiler also faster than the native style of real-time application response quickly Moreover, this method does not need any other plugin, you just need to open a browser, browse any website code, can be quickly debugging style If there is any help to you, some small ha, thank you

Any omissions or errors in the above information are welcome to correct.