32 use of chrome debugging tools

Chrome Debugging tools

Chrome The browser provides a very useful debugging tool , Can be used to debug our HTML The structure and CSS style .

Use debugging tools

1. Ctrl+ Roller You can enlarge the size of developer tool code .

2. On the left is HTML Element structure , On the right is CSS style .

3. On the right CSS The style can change the value ( Left and right arrows or enter directly ) And view colors .

4. Ctrl+0 Restore browser size .

5. If you click on the element , No styles found on the right , It is very likely that the class name or style is introduced incorrectly .

6. If there is a style , But there is a yellow exclamation mark in front of the style , The style attribute is written incorrectly .

View colors

Restore browser

No introduction

Writing mistakes