chrome调试工具的使用

chrome调试工具

1.调试工具的打开方式：

打开浏览器，按下F12或者右击鼠标选择检查

选择元素即Elements,当我们把调试框放在屏幕下沿时，左边是html，右边是css

(我们可以选择屏幕右侧的三个点，在Dock side一栏中选第三个即为在屏幕下沿排列

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BpZwKunL-1635993891544)(C:\Users\Agoni\AppData\Roaming\Typora\typora-user-images\1635907720371.png)])

2.调试工具的使用

>1.选择调试框左侧的箭头，选择页面上的内容，代码会自动定位内容对应的html和css代码,可以直接更改代码调试，但是只是调试，刷新后又会复原，代码本身是不会变化的，需要将更改后的代码复制到编辑工具中

>2.按着ctrl滑动鼠标滚轮可以调整代码字符大小，也可以调整浏览器窗口缩放大小

>3.按着ctrl+0可以复原浏览器的窗口缩放大小

>4.当发现点击浏览器结构的类，右边没有相应的css跳出，可能是类名调用出现问题

有相应的css跳出，可能是类名调用出现问题

>5.可以使用它发现问题，更改问题所在