Chrome Devtools

摘要

记录 Chrome Devtools 一些常用小技巧，以及如何进行真机调试等操作

前言

Chrome 浏览器只要是接触 Web 开发的同学都知道，国内有很多浏览器，但是其内核都是用 Chrome 的内核，19 年的时候，Microsoft 也放弃了自研的 IE 和 Edge，投向了 Chrome 的怀抱，于是新版的 Edge 使用了 Chrome 的内核。

现在市场上也以 Chorme，Safari和FireFox 为主流

对于大部分人来说，Chrome 可能只是个浏览器，但是对于开发人员来说，它更是一个强大无比的工具，为了方便开发人员调试代码，主流的浏览器都内置了 DevTools， 所以无论你是前端还是后端，掌握 Chrome 的调试技巧意味着效率直接的提高。

参考文章

• 谷歌官方文档（可能需要科学上网）
• 第三方介绍

谷歌官方文档很全，如果想仔细了解可以去读下文档。本篇文章只是将个人认为常用的小技巧或者常用的操作记录下来而已

Devtools 面板

怎么打开 DevTools 的面板开发人员都清楚，就不讲了。

先讲一个有趣的东西 —— Command

在面板中按住 Ctrl + Shift + P 就可以运行命令了，和 VS Code 类似，命令有太多，有兴趣的话可以一个一个尝试下，比如说输入 theme 可以将 Devtools 切换到暗黑模式。输入 time 选择 show timeStamp 就可以让 console 面板中的信息都附带时间戳

接下来我会按照前端人员开发时常用的面板顺序进行介绍

Elements

Elements 这是用于查看页面元素的面板，并且可以自由的操作 DOM 和 CSS 来迭代布局和设计页面。

小技巧

• 使用左上角的小箭头可以选中界面上的 DOM，还可以输入 h 来对该 DOM 进行隐藏，右击会有更多操作
• 如果想移动当前选中的元素，在 DOM 结构中往上挪一点或者往下挪一点，而不是拖动和放置，可以选中元素后按住 Ctrl 加方向键进行移动
• 在右侧栏的 Styles 下看到对应的 CSS 样式并进行修改，另外还可以直接使用调色板和阴影编辑器来调试，特别方便。在 css 类的右下角有三个点，可以快速添加部分 css 属性的按钮
• 在右侧栏的 Computed 下看到具体的数值和对应的属性值

Console

Console 控制面板对前端工程师来说就很熟悉了，JS 中使用 console 函数打印出来的都在这里

可以分 log、info、warn、danger 等类别进行查看，还有很多小技巧

小技巧

• console 除了 log, error 等方法外，还可以使用 table 以表格形式输出，dir 以对象形式输出，用 time, timeEnd 来记录代码运行时间等
• 可以通过全局的方法 copy() 在 console 里 copy 任何你能拿到的资源，将变量复制到剪切板中
• 在 console 中打印了一堆数据，并想对该数据进行操作且不影响原来值得情况下，可以右击它，选择 Store as global variable，就会在当前页面存储为一个全局变量，第一次使用的话，它会创建一个名为 temp1 的变量，第二次创建 temp2，第三次 ... 。通过使用这些变量来操作对应的数据，不用再担心影响到他们原来的值
• 除了 Store as global variable，还可以选择 Save As 将当前面板中的信息保存到本地
• 在控制台输入 document.body.contentEditable="true" 或者 document.designMode = 'on' 就可以实现对网页的编辑了。
• 在 Chrome 的 Elements 面板中， $0 是对我们当前选中的 html 节点的引用。$1 是对上一次我们选择的节点的引用，以此可类推
• 如果没有在 App 中定义过 $ 变量 (例如 jQuery )的话，它在 console 中就是对这一大串函数 document.querySelector 的别名。
• 使用 $$ 的话，它不仅执行 document.QuerySelectorAll 并且它返回的是：一个节点的 Array ，而不是一个 Node list
• 有一点很有趣的是，在 Console 面板中可以直接用 await 关键字。也就是说，在 Console 面板中是处于异步环境的

Console 面板的技巧还有很多，但是太多了反而会妨碍使用，所以只要记住自己常用的就行

Sources

资源面板，可以看到该网站的代码和部分运行的 chrome 插件的代码

小技巧

• Page 标签，可以打断点，然后刷新页面，可以通过 Scope 来查看实际代码作用域链的情况，这样调试代码也会比较方便。（虽然一般还是在代码里用 console 打断点的频率比较高）
• Snippets 标签，在里面可以添加一些常用的代码片段。也就是说可以直接在 chrome 里面写代码了！
• 在 Snippets 中也可以打断点，另外，打断点的时候，你可以在行好那里右击,选择 Add conditional breakpoint,可以输入 console 函数来打印，在 Page 标签中也同样适用，这样就可以不用在源代码里写 console 了。
• 可以按住 Ctrl + P，然后输入 ! 选择编写好的 Snippets 文件就可以直接运行了，当然也可以在文件上右击进行 run

另外其他标签有可以直接修改 chrome 里的代码文件然后同步到本地的操作，不过我个人觉得没有什么用，所以就不搞了

NetWork

网络面板也是很常用的了，比较要经常和后端接口打交道。面板上一些开关和筛选就不用再说了，点一点就知道是什么效果了，需要掌握 HTTP 方面的知识，这样调 NetWork 面板的时候才不会一脸迷惑

有几个点记录一下

• Preserve Log 很多时候都有一些像 Nginx 重定向之类的操作导致的 bug，所以选中后，会将那些重定向的 log 也打印出来
• Network 面板中的 Initiator 这一列显明了是哪个脚本的哪一行触发了请求。它显示了在调用堆栈中触发请求的最后一步。Waterfall 则可以看更多信息。鼠标悬停在对应的请求上即可看到
• 浏览器的所有请求都会在这个面板呈现，无论是静态资源，还是 http，websocket 等协议的请求，都会呈现在这里进行查看

Application

应用面板。这里存储着该网站相关的信息，Manifest，Server Workers，localStorage，IndexedDB，Cookies，Cache 等很多信息

这个面板基本没有什么需要去调试的，只要查看信息和修改信息而已

其实主要是目前浏览器的应用服务使用的机会并没有很多，平常用这个面板也只是用来查看浏览器存储信息的

Performance 和 Memory

性能面板和内存面板，这两个面板需要合并起来讲。因为，这一块是目前前端开发者最薄弱，也最不愿意去深入了解的模块，如果不是网站的性能太差，是不会去看这两个面板的，所以大多数情况下，开发者都是另辟蹊径——只要我的代码写的规范，那网站性能就不会差到哪里去！

在使用时，最好使用“无痕模式”进行网页浏览，这样可以避免插件和脚本等其他因素的影响

Performance 面板

简单了解一下 Performance 面板，进入面板后，点击左上角的 Reload 图标，或者按快捷键 ctrl + shift + E，网站就会重新加载，并且 Chrome 会开始进行 快照分析，等分析完就会呈现出对应的表格

如果只是想知道某一个点击事件操作具体的程序运行情况，可以点击左上角的 Record 图标，或者按快捷键 ctrl + E，就会开始记录了，记录时，Record 图标会变成红色。执行页面交互，等交互结束，再按 Record 图标或再次键入键盘快捷键停止记录，面板就会展示对应的分析了。

勾选 Screenshots 和 Memory 后，整个面板可以分五层

• Overview 热力图
  • 整体的预览
• 屏幕快照
  • 对应时间段页面展示的样子
• 线程火焰图
  • 可以看到各个线程的处理
• Memory 折线图
  • 可以看多个内存在不同时间段的使用情况
• 统计汇总面板
  • 包含 Summary，Bottom-Up，Call Tree，Event log 等 tab
  • 可以看到一些总结性的信息

颜色表示

• HTML 文件为蓝色
• Script 为黄色
• Style 为紫色
• 媒体文件为绿色
• 其他资源为灰色

一般我们会找到耗费多内存，耗时较多的时间段去分析，然后再去做代码优化（只是很难找就是了）

另外可以在右上角的设置中勾选一些选项来模拟各种情况

Memory 面板

打开后你可以看到 Select JavaScript VM instance中有数值在不停的变动，其实是用频繁上升和下降表示存在频繁的垃圾回收

选中对应的 profilling type，然后点击左上角的 Record 图标（Take Heap Snapshot），或者按快捷键 ctrl + E，就可以打一个 "内存快照"，一般就是分析快照中的不同视图，寻找对应的内存分配来解决 内存泄漏，内存膨胀 等问题

由于我工作上基本没有使用 Performance 和 Memory 这两个面板的场景，所以也只是简单了解下对应的功能，可能有些错误的地方

Security

安全面板

这个面板较为简单，如果浏览的网站有使用 https 协议，那可以用来看对应的证书信息，目前不知道还有什么其他用处

Lighthouse

新版的 Chrome 会带有这个面板，以前是作为插件单独存在使用的，主要是用来给当前的网站进行 “跑分”，是的，就是跑分，根据勾选的选项进行评分。然而，大多数网站都是不合格的，如果公司或者个人很重视网站性能，那可以按照它评分出来的不足点和建议进行改进和优化。

Drawer

Chrome DevTools 中有以上常用的这 9 个选项卡，但还有很多就藏在 Drawer 里。在 DevTools（任何选项卡）中时，按 esc 来显示它，再次按 esc 隐藏它

在 Drawer 的 console 面板前面的 ⋮ 图标来打开完整选项列表。简单列举一下

• Remote devices 移动设备调试
• Quick source 快速看 Source 并支持修改
• Sensors 设备位置模拟器
• Animations 动画控制面板
• Layer 层数面板，可以看整个网站的图层分布

还有好多功能，就先不一一去讲了，猴年马月都探索不完...有需要或者有兴趣可以再去玩一玩

真机调试

一般情况下，我们其实是可以不用 Chrome Devtools 来进行真机调试的。只要使用 http server，然后让手机和电脑连在同一局域网下，电脑关闭防火墙，设置为专用网络并允许访问，这样手机就可以根据 ip 地址直接访问到电脑上运行的 web 程序。

那什么情况需要用到 Chrome Devtools 来调试呢？

使用场景

• 需要用到 https 协议才能调用的服务，比如摄像头，地理位置，Server workers 之类的，这一类情况可以使用 localhost 域来访问
• 比较难找的线上 bug，需要断点调试
• 线上才会出现的手机 CSS 兼容问题
• 与移动端进行 JS 交互的 WebView 无法正常工作

了解完一般的使用场景，来看下不同设备的操作步骤

基本使用

• 之前已经了解到 Chrome Devtools 中有个 Drawer 面板，我们可以调出 Remote devices 面板，或者直接进入 chrome://inspect/#devices 里，这就是对应调试配置页面了
• 然后需要准备一条 usb 数据线，让电脑和手机连接起来，并允许进行 usb 调试
• 勾选 Discover USB devices 然后等多几秒，或者多刷新几遍，看到设备名称有显示出来，就说明连接成功了

手机查看电脑的页面

现在假设我们已经在电脑上起了一个 web 服务，对应的地址为 http://localhost:8080/

在已经找到设备的前提下

1. 点击 Port forwarding，在弹窗中勾选 Enable port forwarding
2. 设置端口映射，在对应的输入框输入

Port	IP address and port
8000	localhost:8080

3. 稍等一会，等设备名称旁边出现绿灯，就表示映射成功了。
4. 在手机浏览器打开 http://localhost:8000 就可以看到对应的页面

注意

如果是直接调试手机上页面，需要先关掉 Enable port forwarding 哦！

调试 Android 网页

Android 也是谷歌的亲儿子，所以调试起来其实蛮方便的，但是需要注意的是，调试手机端的网页，需要使用手机端的 Chrome 或者使用 WebView 才能调试。 比如说在微信里打开一篇文章，因为这篇文章是在 WebView 打开的，所以可以进行调试。

调试也很简单

1. 在手机端打开网页后
2. 等 chrome://inspect/#devices 显示出对应的网页链接
3. 点击 inspect 就可以调试了，手机和电脑的操作是实时的！

注意

第一次点击 inspect 需要"上外网"，因为 chrome 需要去下载一些东西，不然就会出现 http/1.1 404 not found 的情况，只要第一次能够正常打开就可以了，下次就不需要"上外网"了

调试 IOS 网页

在 Windows 上调试 IOS 网页时真的有点麻烦，先说一下准备工作

准备工作

• 安装 iTunes,因为需要 iTunes 提供的一些库来与 iOS 设备通信。
• 安装 scoop(Windows 的包管理工具)

# 在 PowerShell 中输入下面内容，保证允许本地脚本的执行：
set-executionpolicy remotesigned -scope currentuser
# 执行下面的命令安装 Scoop，等待脚本执行完成就行
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
# Scoop 安装在你的用户根目录（一般是 C:\Users\用户名）下创建了一个名为 scoop 的文件夹，并默认将软件下载也安装到这个文件夹下
# 更多可以看这篇文章 https://sspai.com/post/52496

• 在 Safari 中启用远程调试，开启开发者模式

Iphone => 设置 => Safari 浏览器 => 高级 => web检查器 => 启用

事先准备完成后，来看下具体要怎么做。

手机连接电脑

• 启动 iTunes
• 用数据线将 iphone 和电脑连接
• 连接后，手机会弹出个小窗，必须点击“信任”，允许电脑对手机调试

建立端口映射

之前下载 scoop 就是为了这里，我们需要这三样工具

• remotedebug-ios-webkit-adapter(0.4.2)
• vs-libimobile(0.0.5)
• ios_webkit_debug_proxy(1.8.6)

分别执行以下命令

# 安装
npm install remotedebug-ios-webkit-adapter -g
npm install -g vs-libimobile
scoop bucket add extras
scoop install ios-webkit-debug-proxy
# 启动
remotedebug_ios_webkit_adapter --port=9000
#ios-webkit-debug-proxy 将自动运行 无需单独启动

Chrome Devtools 调试

• 勾选 Discover network targets
• 点击 Configure，在 IP address and port 中写入 localhost:9000，这样就可以了
• 正常情况下，如果有显示网页连接，点击下 inspect 就可以愉快调试了~
• 如果没有的话，可以在新标签页输入 http://localhost:9000，这样就可以看到对应的链接，然后再打开链接就可以了

结语

Chrome DevTools 是真的很强大！

如果真的要用透不亚于去使用一个完整的产品，就我个人的角度，只要学会如何更快更准地去调试常用的面板就行，然后在特定的场景，再翻阅文档去调试优化。