几个一看就会的 Chrome Devtools 小窍门
发布时间：2022-05-04 10:53:39 所属栏目：系统 来源：互联网
导读：Chrome Devtools 是我们整天用的工具，多学一些小技巧还是挺有意义的。 今天我们再来学一些常用的小技巧吧，都是一看就会的那种。 就会在 Network 列表里展示这两列： 这两列啥意思呢? Set-Cookie 的意思就是这个请求的响应会设置几个 cookie。 点开请求的详
|
Chrome Devtools 是我们整天用的工具，多学一些小技巧还是挺有意义的。 今天我们再来学一些常用的小技巧吧，都是一看就会的那种。 就会在 Network 列表里展示这两列： 这两列啥意思呢? Set-Cookie 的意思就是这个请求的响应会设置几个 cookie。 点开请求的详情确实是这样的： Cookies 的意思就是说这个请求会携带几个 cookie： 比如那个携带 17 个 cookie 的请求： 不用数，肯定是 17 个。 除此以外，你还可以自定义展示的 header： 想展示啥 header 都行。 有同学可能会问，请求详情里不是能看到所有 header 么?这里展示有什么意义么? 效率不一样呀，一个个点开看，和列表里直接展示这个 header，那效率肯定差很多呀。 样式快速复制 我们经常用 chrome devtools 来调试样式，然后把调好的样式复制到编辑器里。 大家是不是都是选中再复制的?其实不用，可以直接用这两个功能： 复制单个样式或者复制全部样式，效率更高一些。 快速查看计算后的样式 有的时候我们写的样式是要经过一些计算才能得到最终的样式的，比如 rem，calc 等： 怎么知道这里的 1rem 计算后是多少呢? 可以在右边的 computed 里找： 但是这样是也太多了吧，怎么快速找到我想看的那个 1rem 对应的是多少呢? 可以右键这个样式，点击 view computed value，就可以快速过滤出对应那条样式对应的计算后的样式了： 总结 今天我们又学了一些 chrome devtools 的小技巧： Sources 默认是按照域名分组，可以切换成文件名列表的方式，更容易查找文件 Network 可以自定义展示列，比如 Cookie、Set-Cookie 或者任意的 header 样式可以右键 copy declaration 快速复制 样式可以右键 view computed value 快速查看计算之后的值 chrome devtools 可以调试 USB 连接的安卓手机的网页(浏览器里的和调试包 APP 的 webview 里的)，调试体验比 vconsole 好得多 这几个小技巧看一遍就记住了，下次用 chrome devtools 的时候就试一下吧。 （编辑：常州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
