2024年3月17日发(作者：)

chrome调试方法

一.先来认识一下这些按钮的功能

先来看这张图最上头的一行是一个功能菜单，每一个菜单都有它相应的功能和使用方

法，依次从左往右来看

1.箭头按钮：用于在页面选择一个元素来审查和查看它的相关信息，当我们在

Elements这个按钮页面下点击某个Dom元素时，箭头按钮会变成选择状态

2.设备图标：点击它可以切换到不同的终端进行开发模式，移动端和pc端的一个切换，

可以选择不同的移动终端设备，同时可以选择不同的尺寸比例，chrome浏览器的模拟移

动设备和真实的设备相差不大，是非常好的选择

可选择的适配

ts功能标签页：用来查看，修改页面上的元素，包括DOM标签，以及css

样式的查看，修改，还有相关盒模型的图形信息，下图我们可以看到当我鼠标选择id 为

lg_tar的div元素时，右侧的css样式对应的会展示出此id 的样式信息，此时可以在右侧

进行一个修改，修改即可在页面上生效， 灰色的样式同样可以进行添加和

书写，唯一的区别是，在这里添加的样式是添加到了该元素内部，实现方式即：该div元

素的style属性，这个页面的功能很强大，在我们做了相关的页面后，修改样式是一块很

重要的工作，细微的差距都需要调整，但是不可能说做到每修改一点即编译一遍代码，再

刷新浏览器查看效果，这样很低效，一次性在浏览器中修改之后，再到代码中进行修改

对应的样式