Chrome Devtools 是我们整天用的工具,多学一些小技巧还是挺有意义的。
之前写过一篇《你可能不知道的 Chrome Devtools 的功能》,介绍过一些。
今天我们再来学一些常用的小技巧吧,都是一看就会的那种。
Sources 面板默认是按照域名来分组的,这样想找某个文件比较麻烦:
其实可以切换到不以域名分组的方式:
这样想找某个文件是不是就清爽多了。
Network 是可以修改展示的列的,比如我勾选 Cookie 和 Set-Cookie:
就会在 Network 列表里展示这两列:
这两列啥意思呢?
Set-Cookie 的意思就是这个请求的响应会设置几个 cookie。
点开请求的详情确实是这样的:
Cookies 的意思就是说这个请求会携带几个 cookie:
比如那个携带 17 个 cookie 的请求:
不用数,肯定是 17 个。
除此以外,你还可以自定义展示的 header:
想展示啥 header 都行。
有同学可能会问,请求详情里不是能看到所有 header 么?这里展示有什么意义么?
效率不一样呀,一个个点开看,和列表里直接展示这个 header,那效率肯定差很多呀。
我们经常用 chrome devtools 来调试样式,然后把调好的样式复制到编辑器里。
大家是不是都是选中再复制的?其实不用,可以直接用这两个功能:
复制单个样式或者复制全部样式,效率更高一些。
有的时候我们写的样式是要经过一些计算才能得到最终的样式的,比如 rem,calc 等:
怎么知道这里的 1rem 计算后是多少呢?
可以在右边的 computed 里找:
但是这样是也太多了吧,怎么快速找到我想看的那个 1rem 对应的是多少呢?
可以右键这个样式,点击 view computed value,就可以快速过滤出对应那条样式对应的计算后的样式了:
很多人调试移动端的网页都是用 vconsole 来展示日志,这样效率是很低的。
chrome devtools 支持远程调试,可以调试安卓手机上的网页。
用 USB 连接手机和电脑就行(安卓手机上要在设置里打开允许 USB 调试)。
之后打开 chrome://inspect 就可以看到所有手机上的网页了,还有 APP 调试包的 webview 里的网页:
点击 inspect 就可以调试移动端网页了:
可以审查元素,可以在控制台执行一些 JS,可以用 Network 查看网络请求,大部分调试功能都能用。这不比 vconsole 香么?
浏览器里的网页,还有调试包 APP 的 webview 里的网页都能调试。当然,最好还是手机也用 chrome 浏览器打开,这样支持的功能是最多的。
今天我们又学了一些 chrome devtools 的小技巧:
这几个小技巧看一遍就记住了,下次用 chrome devtools 的时候就试一下吧。