Chrome DevTools

修改元素和样式

1.审查元素

第一种方式

在想要修改元素的地方 右键 选择检查

这样会自动弹出调试面板，并跳转到指定元素的位置。

但是有时候有些网页会禁止右键，无法使用此功能。

第二种方式

1.先利用F12打开调试面板

2.点击审查元素按钮

3.在网页上点击想要查看的元素

2.修改样式

修改样式

选中元素后，我们可以在调试面板种找到样式，按照CSS的格式编写样式。会实时的更新到页面上，这也是最直接简单有效的进行样式调整的方法。

也可以直接在元素中右键编辑元素

设置伪类

我们也可以对元素的伪类进行样式的调整

添加类

查看样式

控制台调试

输出等级

在控制台中，可以输出不同的等级便于调试区分

• log
• warn
• error
• info

console.dir()

有时候，我们想要查看元素的属性，但是当我们选中元素的时候，利用console.log()只能输出元素的文本，看不到元素的属性

这时候我们就可以使用console.dir()查看元素的属性

console.table()

console.table()可以具象化展示JSON或者数组

占位符

%c：样式占位符

%s：字符占位符

%d 和%i ： 整数占位符

%f ：浮点数占位符

%o ：对象占位符

源码调试

在sources里我们可以查看文档的目录，也可以设置断点进行调试。

这在我们找代码bug时非常有用。

断点调试

Scope与Call Stack

被压缩的源码该如何调试呢？

被压缩的源码一般都会有一个对应的压缩映射表 名叫 source map

一般来说我们在开发的时候，会自动生成source map，但是在生产部署时，不要上传source map ，否则就相当于源码暴露在公众面前。

视频中演示了一种生产环境没有source map，开发者通过代理添加source map进行调试的方法，感觉还不错，但是我实现起来比较麻烦，就不实现了。

其他面板

性能分析

这是一个监控网页性能的面板。

以前，我不是很了解这是怎么使用，看了视频后，明白了

我们需要点击录制按钮才能出现性能分析

网络面板

网络面板中我们可以查看与页面获取了哪些资源

当然也可以用来与后端接口的调试，查看链接返回的数据，如果数据有问题，可以交给后端，如果数据没有问题，可以自己找bug

这里面也可以设置模拟网络状况，用来模拟慢网环境

应用程序

应用程序界面能够用来查看页面的存储的数据，也能进行一些修改

移动端H5调试

真机调试

真机调试属实麻烦，非特殊情况直接使用手机在局域网内访问

或者直接在浏览器中点击模拟手机屏幕，进行布局调试

其他实用技巧

线上修改缓存

很多时候我们在样式设计时，需要使用浏览器进行样式修改，但是往往会出现这种情况，我们在浏览器中修改了，但是只回文件中修改了一下，一保存浏览器页面刷新了，刚刚修改的样式都没了。

所以我们需要及时的将修改保存起来。

小黄鸭调试大法