Chrome开发者工具调试技巧

1.主要功能有什么？

元素面板——通过操作DOM和CSS调整和检查页面；
控制台面板——记录诊断信息、作为 shell 在页面上与JS交互；
源码面板——设置断点来调试 JS、连接本地文件实时编辑；
网络面板——查看请求和下载的资源文件来优化网页加载性能；
性能面板——记录和查看网站生命周期内发生的各种事件；
内存面板——生成内存使用快照，分析页面占用内容情况；
应用面板——检查加载IndexedDB 、 Web SQL 数据库、本地和会话存储、cookie 、应用程序缓存、图片样式资源等等；
安全面板——调试混合内容问题，证书问题等等；
LightHouse——用于审核并提高页面质量的自动化工具；

2.通用技巧

1、copy()方法——通过copy拿到console的资源
2、Store as global——保存为全局变量
3、Save as——将日志信息保存到本地
4、HTML Copy——复制HTML元素
5、快捷键——常用的快捷键

ctrl + shift + D 切换展示布局
ctrl + [或] 或者 ctrl + 1~9 切换面板（需要Enable）
上/下/左/右箭头调整数值或颜色
ctrl + F 哪都有的ctrl加f
ctrl + shift + P 命令面板

6、命令面板——有意思的几个命令

Capture full size screenshot 截全部页面
Capture node screenshot 按元素截屏
show Console/Application/Elements 切换面板
Switch to light/dark theme 深色主题爱好者的福音

3. Console技巧

3.1、$——经典的选择器

$0 对我们当前选中的html节点的引用
$1 对上一次选择节点的引用
$$ 执行document.QuerySelectorAll并返回节点数组 （Array.from(document.querySelectorAll('div')) === $$('div')）
$_ 上一次的console输出内容（很鸡肋但是碰到Math.random()每次引用都不一致情况下，还是有点用的）

3.2、Console.log()的“bug”？

我们使用 console.log() 来打印某个对象，并且，两次打印之间，还会对这个对象进行修改，最后我们查看打印的结果发现，修改前的打印和修改后的打印内容一样。
举个例子：

let objectA = {
    name:'hello world',
    age: 0,
};
console.log(objectA);
objectA.age=1;
console.log(objectA);

为什么？
console 中打印出的对象，在你打印出他内容之前，是以引用的方式保存的，引用指向的是同一个地址。

如何解决？
解构方法{…object}。
使用资源面版中加断点。
使用 JSON.stringify() 方法处理。

3.3、Console中的异步

console默认是被 async 包裹的，因此我们在代码中使用的await可以直接在console中使用。

async function(){ await method() } -> await method()
举个例子（获取JSON数据）：
await fetch('http://jsonplaceholder.typicode.com/posts')
$_.json()

console中的await还可以直接获取Web APIs（https://developer.mozilla.org/zh-CN/docs/Web/API）

await navigator.storage.estimate() 系统占用情况
await caches.keys() 查看Caches

3.4、Console与Breakpoints

我们在source面板中可以添加Add conditional breakpoint…（条件断点），在满足条件表达式时触发断点。在调试过程中，不必修改代码，直接利用条件断点，可以在条件表达式中添加console.log()/console.time()/console.table()等等。

5、Console自定义格式
在DevTools的Settings中启用自定义：

如何定义formatter?
formatter是一个对象，包含三个方法：

• header : 处理如何展示在 console 的日志中的主要部分
• hasbody : 显示一个用来展开对象的 ▶ 箭头，返回 true；直接显示则返回false；
• body : 定义将会被显示在展开部分的内容中

其中，header 方法返回了一个 JsonML (JSON Markup Language - JSON 标记语言) 数组，由这些组成 标签名、属性对象、内容 (文本值或者其他元素)。举个例子：

window.devtoolsFormatters = [{
    header: function(obj){
        return ['div', {} ,`${JSON.stringify(obj, null ,7)}`];
    },
    hasBody: function(){
        return false;
    }
}]
// 如果显示时有不需要特殊处理的对象，直接将其过滤出来，
// 直接在header方法里面return null。 
// 控制台会使用默认的格式化方式来打印这些值。

比较有意思的formatter：

window.devtoolsFormatters = [{
    header: function(obj){
      if (!obj.__clown) {
        return null;
      }
      delete obj.__clown;
      const style = `
        color: red;
        border: dotted 2px gray;
        border-radius: 4px;
        padding: 5px;
      `
      const content = ` ${JSON.stringify(obj, null, 2)}`;

      try {
        return ['div', {style}, content]
      } catch (err) { // for circular structures
        return null;  // use the default formatter
      }
    },
    hasBody: function(){
        return false;
    }
}]

console.clown = function (obj) {
  console.log({...obj, __clown: true});
}

console.log({message: 'hello!'});   // normal log
console.clown({message: 'hello!'}); // a silly log

更多自定义formatter可以参考https://github.com/andrewdavey/immutable-devtools以及https://facebook.github.io/immutable-js/

3.6、Console的对象&方法

(1) queryObjects(ClassA)（对象查询）方法 —— 查询共有多少个实例化的ClassA对象。
(2) monitor(func) 方法 —— 每当一个 被monitor 的方法运行的时候，console控制台会把它的实例打印出来，包含 函数名 以及 调用它的参数。
(3) monitorEvents(element,event)方法 —— 监听事件，每次触发事件时，打印出其事件对象。

3.7、Console.log()之外的其他选择

(1) console.assert(assertValue, Msg) —— 断言打印，当我们传入的第一个参数为 假 时，console.assert 打印跟在这个参数后面的值。

var value = null;
console.assert(value, "value is null");

(2) console.table() —— 表格形式打印

console.table($$('li'))
console.table($$('li'),['value'])

(3) console.dir() —— 打印节点所关联的js对象

console.dir($0)

(4) ctrl + shift + p -> show timestamps —— 给打印加上时间
(5) console.log() 基于堆栈自动缩进

基于Error对象的stack信息，匹配换行符的个数，实现打印对象的缩进
function log(message) {
  console.log(' '.repeat(new Error().stack.match(/\n/g).length) + message);
}

function foo() {
   log('foo');
   return bar() + bar();
}

function bar() {
   log('bar');
   return baz() + baz();
}

function baz() {
   log('baz');
   return 17;
}

foo();

（6）console面板中的“小眼睛” —— 实时表达式
在 Create live expression 中定义任何JS表达式,会不断更新

document.querySelectorAll('li').length

4.关于Network的操作

4.1、右键列出其他信息

右键列表表头，可以选择展示更多关键信息

4.2、给XHR请求加断点

在Source面板中，添加XHR/fetch Breakpoints，在页面发送与填入的url相匹配（contains）的请求时添加断点。

5.关于Elements的操作

1、选中元素后按 H 键可以快速隐藏元素，再次按 H 键可以显示
2、元素移动——鼠标按住拖拽/选中后ctrl+上下键
3、阴影编辑器——直观的展示阴影效果

ps：颜色选择器与动画编辑器同理

4、快速添加样式

5、快速展开所有DOM

6、DOM断点 —— 监听节点被添加或者移除 / 属性被改变

6.Drawer里都有什么

1、如何打开？
在DevTools中任意的选项卡里按 ESC 键就可以打开或者关闭；
通过 crtrl + shift + P 显示drawer的选项；
Drawer的选项卡：
Animations
Changes
Console
Coverage
Network conditions
Performance monitor
Quick source
Remote devices
Rendering
Request blocking
Search
Sensors
What’s new
2、Sensors(传感器)
Drawer 里的 Sensors(传感器) 面板可以让你模拟特定的位置——支持从预定义的位置中进行选择，添加自己的位置，或者手动键入纬度/经度。

3、Network conditions(模拟网络条件)
Network conditions可以模拟特定的网络行为——模拟互联网为典型的3G网络甚至离线！ 除此之外，Network conditions 面板还可以模拟特定的用户代理。