DevTools中的颜色选择器工具正在升级。

• 有一个滴管功能。
• 简单的界面即可选择包括Alpha在内的颜色。
• 彩色格式切换器（十六进制，rgba，hsla）。
• 对比度功能（当前景色与背景色对比度不高的时候会提示）

如图，点击ease-in前面的icon可以预览渐变效果哟

使用动画记录器记录过渡和动画

打开“动画记录器”后，将捕获所有过渡/动画，这意味着您可以方便地播放它们或在以后检查它们。

将鼠标悬停在矩形块上可以播放动画。
单击一个矩形块以检查动画。

动画检查器

补充

炫酷的动效能让老板分分钟给你加薪，因为它能让产品卖上价格，用户一看就是大制作，高端大气上档次，这才是前端的价值所在。

阴影调整器

jquery事件监听指向jquery的源代码，这对于调试没啥用，我们可以通过查看监听器方法的定义，找到事件处理函数

补充

在定位页面无限重定向,比如一直跳转登录的时候,可以勾选上 Preserve log复选框,查看页面信息
在console中执行代码的上下文是根据iframe来的,记得切换iframe来执行相应的代码

1
2
3
4
5
6
7

var languages = [
    { name: "JavaScript", fileExtension: ".js" },
    { name: "TypeScript", fileExtension: ".ts" },
    { name: "CoffeeScript", fileExtension: ".coffee" }
];

console.table(languages);

补充

属性太多还可以传第二个参数 ,只展示要某些字段 console.table(languages,['name']);

使用console.time 诊断程序的运行时间

1
2
3

console.time('My time #1');
console.timeLog('My time #1'); //打印计时器时间
console.timeEnd('My time #1');//打印计时器时间,并终止计时器

使用 console.timeStamp() , 可以在录制性能时间线打标记,快速定位性能问题

1. 选定元素
2. 点击 .cls 按钮,出现class list
3. 点击前面的复选框,进行切换
4. 还能添加class

补充

老版本面板名称叫 Timeline 时间线
有些部署在现网的局点,由于国际网络延时高,会导致一些意想不到的BUG,为了模拟延时,就能用上这个调试功能了
模拟低性能计算机可以将现有的性能问题进行放大,让我们的应用跑的更快,毕竟我们开发都是i5起步的CPU,还是要照顾下公司的老机器

如果您正在使用利用多个线程的JavaScript功能（例如Service Worker或Web Workers），则Sources Panel会考虑到这一点。

由于每个线程都有其自己的全局脚本上下文，因此您可以选择一个特定的线程进行调试（例如，在其上设置断点）。只需在Sources面板中打开Threads 窗格即可。您应该看到主线程以及所有可用的其他线程。

补充

这个是Chrome 89的截图,web worker是直接显示在左边的可以找打对应的文件打断点。右边只是一个指示器，告诉我们断点处在哪个线程
这里还可以看到 Content Scripts 面板 ,Chrome拓展开发的时候会用到这个,他能共享DOM

在V3版本的Chrome拓展开发中 Service Worker 也替代了 background.js
Service Worker的调试 还有系统通知等等的调试可以看Application面板

现在经常使用ESNext语法书写代码,再使用babel转换成ES5,

1. 使用webpack 打包时候设置 devtool 为 source-map 即可
2. 生产环境上一般使用压缩混淆后的代码
3. 生产环境的ngnix服务器出于安全考虑,一般也不会返回source map类型的文件!!!

使用Sourcemap 调试时解析变量名

调试的时候就算有sourceMap,显示的依然是被混淆的名字a,b,c这种,我们想看到真实的变量名称,怎么做呢?
启动 试验功能的Resolve Variable Names

补充

我在Chrome 89 看不到这个老外说的这个试验功能,应该是已经转正了!!不需要单独启用,知道有这个东西就好了

常用的抓包工具

Fiddler 小巧精悍,适合http
Burpsuite 安全测试的时候用过,很强大
wireshark 抓网卡,内容没有聚合上手难度高点

NetWork 面板很好用,用来拦截操作系统的网络流量

这里需要另外一个 工具来配合 github kdzwinel/betwixt
安装好了再设置下系统的代理就好了

补充

其实这个不是用Chrome DevTools去抓包啦,只是betwixt这个抓包工具,长得跟NetWork面板一样