《你不知道的 Chrome 调试技巧》笔记

2019-05-19

摘要：掘金小册《你不知道的 Chrome 调试技巧》笔记，未整合版【译】你不知道的Chrome调试工具技巧，文章的配图是真的棒，感谢作者和译者

一、开发者工具DevTools

打开方式

1、在菜单选中选择更多工具 > 开发者工具
2、在页面元素上右键点击，选择检查
3、使用快捷键 Ctrl + Shift + I 或 Cmd + Opt + I

二、面板介绍

元素面板

使用元素面板可以自由的操作 DOM 和 CSS 来迭代布局和设计页面
Elements

控制台面板

在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell 在页面上与 JavaScript 交互
Console

源代码面板

在源代码面板中设置断点来调试 JavaScript ，或者通过 Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器
Sources

网络面板

使用网络面板了解请求和下载的资源文件并优化网页加载性能
Network

性能面板

使用时间轴面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能
Performance

内存面板

如果需要比时间轴面板提供的更多信息，可以使用“配置”面板，例如跟踪内存泄漏
Memory

七、应用面板

使用资源面板检查加载的所有资源，包括 IndexedDB 与 Web SQL 数据库，本地和会话存储，cookie ，应用程序缓存，图像，字体和样式表
Application

八、安全面板

使用安全面板调试混合内容问题，证书问题等等
Security

九、审计面板

主要从5个方面来给网页打分以便进一步优化，详细请看Chrome DevTools Audits 功能介绍

三、通用篇

copying saving

1、复制
copy() 可以 copy 任何能拿到的资源 copy(location)
copy()

2、store as global 存储为一个全局变量
在 console 中右击选择 store as global variable
变量名称为 temp1、temp2…
storeAsGlobalVariable

3、保存堆栈信息 stack trace
在报错上右击 -> save as... 保存信息
stackTrace

4、直接copy html
选中元素那一行，点击前面的 … -> copy -> copy element
或者直接 Ctrl/Cmd + C
copyHTML

快捷键和通用技巧

1、切换 DevTools 窗口的展示布局
Ctrl/Cmd + Shift + D
switchWindowsLayout

2、切换 DevTools 面板
Ctrl/Cmd + [ 向左切换
Ctrl/Cmd + ] 向右切换
Ctrl/Cmd + 1 到 9 切换需要 DevTools -> Settings -> Preferences -> Appearance -> Enable Ctrl + 1-9 shortcut to switch panels 打勾
switchWindows

3、递增/递减
Ctrl/Cmd + ▲/▼ ±100
Shift + ▲/▼ ±10
▲/▼ ±1
Option/alt + ▲/▼ ±0.1

4、elements，logs，sources，network查找
Ctrl/Cmd + F

5、切换手机模拟模式和普通模式
Ctrl/Cmd + Shift + M

6、缩放界面
Ctrl/Cmd + -/=

7、清空控制台
Ctrl + L

使用 command

打开命令列表 Ctrl/Cmd + Shift + P
1、截图
选中 capture area screenshot 之后可以截取鼠标选取的区域
Capture full size screenshot 网站全屏截图
capture

2、切换面板布局
layout 面板内容布局选择
changeWindowLayout

3、切换主题
theme 暗黑/明亮主题选择
changeTheme

代码块的使用

1、添加代码块
Sources 面板 -> Snippets -> New snippet -> 键入代码保存 -> Ctrl/Cmd + Enter 运行

2、调用已保存的代码块
Ctrl/Cmd + P 唤起查命令框 > 输入 ! > 选择要保存的代码块
runSnippets

四、控制台版面

$相关

$0 当前选中的 html 节点的引用

$1 上次选中的节点的引用，依次到 $4
$ 相当于 document.querySelector
$$('div') 返回一个节点的数组，相当于 Array.from(document.querySelectorAll(‘div’))
$_ 是对上次执行的结果的引用

使用Chrome插件:Console Importer，可以在 console 中使用 $i 来引入和测试一些 npm 库

1 2	$i("lodash") // 安装 _.VERSION // 调用

引用保存

console 中打印出的对象，在你打印出他内容之前，是以引用的方式保存的。因此修改对象属性前后两次使用 console 打印显示的都是修改后的对象
consoleObject
解决方法：
1、打印一个从这个对象复制出来的对象。
2、使用资源面中的断点来调试
3、使用 JSON.stringify() 方法处理打印的结果

异步的 console

console 默认就被 async 包裹，可以直接使用 await
asyncConsole
其他方法：
1、Storage 系统的占用数和空闲数

1	await navigator.storage.estimate()

2、设备的电池信息

1	console.table(await navigator.getBattery())

条件断点

在 Sources 面板中设置一个条件断点：
1、右击行号，选择 Add conditional breakpoint…(添加条件断点)
2、或者右击一个已经设置的断点并且选择 Edit breakpoint(编辑断点)
然后输入一个执行结果为 true 或者 false 的表达式
conditionalBreakpoints

忍者打印

得益于条件断点：可以在编辑断点的输入框中直接使用 console.log / console.table / console.time / console.timeEnd
ninjaConsole

自定义格式转换器

先把对应的设置打开： DevTools -> Settings -> Preferences -> Enable custom formatters 打勾
formatter 最多包含三个方法：
1、header：处理如何展示在 console 的日志中的主要部分。
2、hasbody：如果你想显示一个用来展开对象的 ▶ 箭头，返回 true
3、body：定义将会被显示在展开部分的内容中
示例：

window.devtoolsFormatters = [{
  header: function(obj) {
    // 返回 标签名 属性对象 内容
    return ['div', {}, `${JSON.stringify(obj, null, 4)}`] 
  },
  hasBody: function() {
    return false
  }
}]
window.document // 打印
{
  "location": {
    "href": "https://juejin.im/book/5c526902e51d4543805ef35e/section/5c5269656fb9a049dc02aac6",
    "ancestorOrigins": {},
    "origin": "https://juejin.im",
    "protocol": "https:",
    "host": "juejin.im",
    "hostname": "juejin.im",
    "port": "",
    "pathname": "/book/5c526902e51d4543805ef35e/section/5c5269656fb9a049dc02aac6",
    "search": "",
    "hash": ""
  }
}

在 header 方法里面用 return null 直接将不关心，不需要区别对待的对象过滤出来，让 DevTools 使用默认的格式化方式来处理这些值。特殊的需要判断一下，常用的判断条件：检查这个对象是不是某一个特殊类的实例、有没有某个特殊属性等

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) {
  // 添加特殊属性 __clown
  console.log({...obj, __clown: true});
}

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

对象&方法

1、queryObjects 查询对象方法
可以获取到以某个对象为原型的所有可用实例对象：

class Person {
  constructor (name, role) {
    this.name = name;
    this.role = role;
  }
}
const a = new Person('personA', 'dad')
let kids = [
  new Person('personB', 'kid'),
  new Person('personC', 'kid')
]
new Person('personD', 'uncle') // 执行后并没有留存下实例对象的引用，因此无法查询到
queryObjects(Person)

queryObjects

2、monitor 监听方法
可以监听某个函数，当这个函数被调用时会打印相关信息，包含函数名和传递的参数

class Person {
  constructor (name, role) {
    this.name = name;
    this.role = role;
  }
  greet() {
    return this.getMessage('greeting', this.name, this.role);
  }
  getMessage(type) {
    if (type === 'greeting') {
      return `Hello, I'm ${this.name}!`;
    }
  }
}
const a = new Person('personA', 'dad')
monitor(a.getMessage)
a.greet()
// 打印结果
function getMessage called with arguments: greeting, personA, dad
"Hello, I'm personA!"

3、monitorEvents 监听事件方法

骚操作

1、console.assert
当传入的第一个参数为 false 时，console.assert 会打印后面的参数

1	console.assert(assertion, obj1 [, obj2, ..., objN])

assert

2、增强 log 的阅读体验

ECMAScript 2015 中引入了 enhanced object literal(增强对象文字面量)，只需将所有 console.log 的参数包装在大括号中，打印这个对象即可

const a = 1;
const id = 2;
console.log(a, id)
console.log({ a, id })
// 打印对象
1 2 // 不易读
{a: 1, id: 2} // 体验好

3、console.table
可以以表格的形式打印一个（类）数组或者对象，它接收两个参数，第一个参数是需要打印的目标，第二个参数是个数组，是用于筛选出要打印的属性。还支持缩放、排序

1 2	console.table($$('div')) console.table($$('div'),['id', 'className'])

table

可以尝试下 table 和 {} 配合，阅读体验更佳

1
2
3

const a = 1;
const id = 2;
console.table({ a, id })

4、console.dir
打印某个 DOM 节点时，console.log 会将这个交互式的元素渲染成像是从 Elements 中剪切出来的一样。 console.dir 可以将其转化为一个js对象来展示属性。打印的为 DOM 类数组时，显示差不多，但是推荐使用 console.dir 更美观

console.log($('body'))
console.dir($('body'))
console.log($$('div'));
console.dir($$('div'));

dir

5、让 logs 显示时间
打开配置： DevTools -> Settings -> Preferences -> Show timestamps 打勾
或者使用命令行： Ctrl/Cmd + Shift + P -> 输入关键词 Show/Hide timestamps 配置
showTime

6、监测执行时间
console.time() 开启一个计时器
console.timeEnd() 结束计时并且将结果在 console 中打印出来
如果想记录多个时间，可以往这些函数中传入不同的标签值

function delayed(ct, callback) {
  if (ct < 0) {
    return callback();
  }
  console.timeEnd('iteration')
  console.time('iteration')
  setTimeout(
    () => delayed(ct - 1, callback),Math.random() * 1000
  )
}
console.time('total');
console.time('iteration');
delayed(5, () => {
  console.timeEnd('total');
})

6、添加 css 样式
在 console.log 的打印文本之前添加%c，这样后面的参数就成了 CSS 规则：

1 2	console.log('%chello world', 'font-size: 30px;color: red;') console.log('%chello %cwor%cld', 'font-size: 24px;color: red;', 'font-size: 30px;color: blue;', 'font-size: 30px;color: red;')

7、自动缩进
配合 Error 对象的 stack 属性（关于 stack 请看Error.prototype.stack ，该特性是非标准的，请尽量不要在生产环境中使用它！），让 log 可以根据堆栈的调用自动缩进：

function log(message) {
  console.log(
    // 这句话是重点当我们 new 出来的 Error 对象时，会匹配它的stack 信息中的换行符，换行符出现的次数也等同于它在堆栈调用时的深度。
    ' '.repeat(new Error().stack.match(/\n/g).length - 2) + message
  );
}

// 调用
function fn1() {
  log('fn1');
  return fn2() + fn2();
}

function fn2() {
  log('fn2');
  return fn3() + fn3();
}

function fn3() {
  log('fn3');
  return 1;
}

fn1();
// 打印如下
 fn1
  fn2
   fn3
   fn3
  fn2 
   fn3 
   fn3
4

8、直接在回调中使用 console.log
callback

9、使用实时表达式
liveExpression

五、网络面板/源代码面板

隐藏 network overview

networkOverview

显示调用堆栈信息

requestInitiator

请求过滤

Network 面板中的过滤器输入框接受字符串或正则表达式，对应显示匹配的请求。但是你也可以使用它来过滤很多属性
networkFilter
如果想要显示所有可能的关键字，在空白的输入框按下 Ctrl + Space

自定义请求表

要自定义显示哪些列，右键单击请求表标题上的任意位置，把需要显示的项目前面打勾。Response Headers 是一个有更多选项的完整的子菜单，甚至可以定义你自己的选项
customDisplay

重发 XHR 请求

重发 XHR 请求，而不用刷新页面
replayXHR

XHR/fetch 断点

可以使用 XHR/fetch breakpoint 对已发送的 ajax 请求进行捕获，但只能在 Source 面板中设置

六、元素面板

通过 ‘h’ 来隐藏元素

按一下 ‘h’ 就可以隐藏你在元素面板中选择的元素。再次按下 ‘h’ 可以使它出现

拖动 & 放置元素

想看看页面的某一部分在 DOM 树的不同位置的显示效果时，只需要拖动它到指定的位置

使用 control (按钮) 来移动元素

Ctrl/Cmd + ▲/▼ 可以使选中的元素与相邻的兄弟元素互换位置

回退操作

Ctrl/Cmd + Z 撤销改动
Ctrl/Cmd + Shift + Z 回退操作

阴影编辑器

通过在 Style 面板中点击靠近 box-shadow 属性或者 text-shadow 属性的阴影方形符号来打开它：
shadow

定时函数编辑器

cubicBezier

插入样式规则的按钮

insertCSS

快速展开所有的子节点

右击节点后的 expand recursively 命令
或者 alt + 左击 ▶ 按钮

DOM 断点

DOM 断点：监听节点被添加或者移除 / 属性被改变
1、点击”…” 符号或者右击你想添加监听的元素
2、选择 subtree modifications :监听任何它内部的节点被移除或者添加的事件
3、选择 attribute modifications :监听任何当前选中的节点被添加，移除或者被修改值的事件
4、选择 node removal :监听被选中的元素被移除的事件
subtreeModifications
页面重新加载时会记住断点，在 Elements 视图中有视觉提示，Sources 中也有专用列表
添加了断点的元素被隐藏在折叠起来的父级元素中时，会高亮展示
subtreeModificationsL

颜色选择器

颜色调试
color

一、当前正在用的颜色
changeColor
一般会有四种：
1、Material：色调变化的调色板
2、Custom：自定义，可以添加和删除颜色
3、CSS Variables：使用 CSS 变量定义的颜色
4、Page colors：当前页面的 CSS 中使用的颜色

二、直观的选择颜色
点开一个 color 属性的调色盘，其中 Contrast ratio 属性显示的是当前文本的颜色与开发者工具认为这段文本应该有的背景颜色之间的对比度。这个数值越高，说明文本相对于背景更显眼；如果越接近 1 ，说明文本越难与背景区分开。
有以下三种情况：
1、在数字边上的 “🚫” 意味着对比度太低了
2、一个 “✅” 意味着这个颜色遵从 Web Content Accessibility Guidelines (WCAG) 2.0 的 AA 声明
3、“✅ ✅” 意味着满足了 AAA 声明
contrastRatio

Drawer

Chrome DevTools 除了被分为9个面板外，还有一组被隐藏的选项卡，被称为 Drawer。在 DevTools 下，按 esc 键可以显示或隐藏 Drawer
点击在 Drawer 的 console 面板前面的 ⋮ 图标打开完整选项列表，或者在 command Menu 中输入 Drawer 打开
drawer

控制传感器

Drawer 里的 Sensors(传感器) 面板支持从预定义的位置中进行选择，添加自己的位置，或者手动键入纬度/经度。选定的值将被 navigator.geolocation.watchPosition（或 .getCurrentPosition ）报告，还可以模拟你设备在3D空间中的位置
sensors

模拟环境

打开 Network conditions 面板，可以调试环境和网络
networkConditions

检查代码

使用 coverage 面板来获得关于冗余代码的摘要-细节信息，它可以跟踪当前加载的 JS 和 CSS 文件的哪些行正在被执行并显示未使用字节的百分比。
绿色的线条标记运行中的，红色的线条标记未运行的

检查修改的CSS内容

Changes 面板会使用差异形式的变化向你展示已更改的内容与最初加载的样式表，同时还可以撤销它们
cssChanges

workspace

在 Chrome 中修改文件

直接将项目文件夹拖到 Source 面板，修改后 Ctrl/Cmd + s 保存，会同步修改到系统文件
workspace

即时同步样式

如果是在 “元素” 面板的 “样式” 部分中编辑样式规则，它也会立即同步
workspacecss

为新选择器选择目标位置

元素面板的“样式”部分按下 New Style Rule 按钮，可以添加新的选择器以编写样式。新样式规则的默认定位为 inspector-stylesheet：1 ，长按 New Style Rule 按钮会显示所有 CSS 文件的选项，点击更换保存样式的位置
workspacestylesheet

允许 CSS 注入

设置工作区后，在编辑器中 CSS 的更改保存在文件系统后，立即就被浏览器选中并显示的页面上
workspacezhuru