原文链接：

前言

打开开发者工具的方式：

在Chrome菜单中选择更多工具 > 开发者工具
在页面元素上右键点击，选择 “检查”
使用快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)

开发者工具主要由这些面板主成：

元素面板 elements
控制台面板 console
网络面板 network
源代码面板 sources
性能面板 performance
内存面板 memory
应用面板 application
安全面板 security

通用技巧

1、copy(...)

在console面板，通过全局方法copy拿到任何你想拿到的资源，然后粘贴到vscode中。如copy($0)、copy($_)

2、store as global variable

在console面板，打印出的值，右击选择“store as global variable”，存储为全局变量。第一次会创建一个名为temp1的变量，第二次名为temp2。通过使用这些变量来操作对应的数据，不用再担心影响到他们原来的值

3、保存stack trace信息

在console面板，抛出的错误信息处右击选择“save as”，将堆栈信息保存成文件形式

4、copy HTML

在elements面板，选中元素，

点击元素左边有个...选择“copy”
右击元素，选择“copy”
快捷键，cmd+c

5、切换开发工具面板

按下 ctrl + [ 和 ctrl + ] 可以从当前面板的分别向左和向右切换面板

6、递增/递减

步伐	快捷键
1	向上箭头
10	cmd+向上箭头
100	shift +向上箭头
0.1	opt+ 向上箭头

调整样式用到

7、查找

在elements、logs、sources、network搜有查找

8、command菜单

打开command菜单

在 Chrome 的调试打开的情况下按下 [ Ctrl] + [Shift] + [P] (Mac： [⌘] + [Shift]+ [P] )
或者使用 DevTools 的 dropdown 按钮下的这个选项“run command”

9、切换面板布局

将样式面板从 html预览的底部移动到右边或者周围其他的位置

打开 Commands 菜单并且输入 layout ，你会看到 2 到 3 个可供选择的项(这里不再显示你已经激活的选项)：

使用横向面板布局
使用纵向面板布局
使用自动面板布局

10、截图新技巧

打开 Command 菜单并且使用节点截图的就可以了。

不只是这样，你同样可以用这种方式全屏截图 - 通过 Capture full size screenshot 命令。

elements面板选中要截图的节点，打开command菜单，选择Capture full size screenshot 命令，实现节点截图。

11、切换主题

打开 Command 菜单，输入theme，实现明亮 & 暗黑两种主题之间的切换

12、通用代码块使用

进入到 Sources 面板，在导航栏里选中 Snippets 这栏，点击 New snippet(新建一个代码块) ，然后输入你的代码之后保存。

cmd+enter允许代码块

console面板

1、$符

在 Chrome 的 Elements 面板中， $0 是对我们当前选中的 html 节点的引用。

理所当然，$1 是对上一次我们选择的节点的引用，$2 是对在那之前选择的节点的引用，等等。一直到 $4

如果你没有在 App 中定义过 $ 变量 (例如 jQuery )的话，它在 console 中就是对这一大串函数 document.querySelector 的别名。

?是document.querySelectorAll的别名

$_是对上次执行的结果的引用

有时你只是想玩玩新出的 npm 包，现在不用再大费周章去建一个项目测试了，只需要在 Chrome插件:Console Importer 的帮助之下，快速的在 console 中引入和测试一些 npm 库，运行$i('lodash') 或者$i('moment')几秒钟后，你就可以获取到 lodash / momentjs 了

2、console.log 的 "bug"

console 中打印出的对象，在你打印出他内容之前，是以引用的方式保存的。会导致多次打印结果一样

解决方法：

打印一个从这个对象复制出来的对象。
使用资源面版中的断点来调试
使用 JSON.stringify() 方法处理打印的结果

3、异步的 console

直接使用await

4、设置条件断点

右击行号，选择 Add conditional breakpoint...(添加条件断点)
或者右击一个已经设置的断点并且选择 Edit breakpoint(编辑断点)

然后输入一个执行结果为 true 或者 false 的表达式（它的值其实不需要完全为 true 或者 false 尽管那个弹出框的描述是这样说的）

另一种用法，与其在你的源码的不同地方去添加 console.log / console.table / console.time 等等，不如你直接使用条件判断来将它们“连接”到 Source 面板中

5、logs

console.table，以表格展示
{}，打印多个参数时可以使用这个
console.dir
logs添加时间戳，在command中输入time

var a = 123,
    b = 456;
    
console.log({a, b});

//第二个参数可以过滤显示的属性
console.table([{a:'aaa', b:'bbb'}, {a:'aaa2', b:'bbb2'}], ['a'])

network面板

1、请求过滤

Network 面板中的过滤器输入框接受字符串或正则表达式，对应显示匹配的请求。但是你也可以使用它来过滤很多属性。

如果想要显示所有可能的关键字，在空白的输入框按下 [ctrl] + [space]

2、自定义请求表

右键单击请求表标题上的任意位置

3、重新发送请求

elements面板

1、通过 'h' 来隐藏元素

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

2、拖动 & 放置元素

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

4、Shadow editor 阴影编辑器

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

5、Timing function editor 定时函数编辑器

也称为 Cubic bezier(贝塞尔) 编辑器。贝塞尔曲线是一串用来定义 CSS 的动画速度在整个动画过程中如何变化的魔法数值。我们将其定义为 transition-timing-function 或者 animation-timing-function CSS 属性。

6、在元素面板中展开所有的子节点

一个一个的去点击级联的 ▶ 按钮太慢了，不如使用右击节点后的 expand recursively 命令

Drawer

当你在 DevTools（任何选项卡）中时，按 [esc] 来显示它，再次按 [esc] 隐藏它：

chrome调试技巧

前言