前言

Chrome DevTools

• DevTools 是一套构建于 Chrome 中的Web 开发者 工具，是 Chromium 的一部分，可以作为独立项目被 Electron 等容器集成

DevTools

• DevTools 主要分为四部分：

  • Frontend：调试器前端，默认由 Chromium 内核层集成
  • Backend：调试器后端，Chromium、V8 或 Node.js
  • Protocol：调试协议
  • Message Channels：消息通道，包括：Embedder Channel、WebSocket Channel、Chrome Extensions Channel、USB/ADB Channel

• Chrome DevTools Frontend 是一个 Web 应用程序，通过 WebSocket 与 Blink 的 C++ 后端通信。

• Chrome DevTools Protocol 基于 WebSocket

  • 允许第三方对基于 Chrome 的 Web 应用程序进行调试、分析等，
  • 利用 WebSocket 建立连接 DevTools 和浏览器内核的快速数据通道。

使用技巧

界面

Chrome Dev Tools精讲

• 检查元素 inspect element：

  • 检查对应元素：右键元素+inspect
  • 快捷键 Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS)
  • 或者 F12 + （左上角的“selecet an element to inspect it ”)

• 查看log、运行 js：

  • 快捷键 Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS)
  • 或者 F12 + Console。

• 命令参数：

  • 快捷键 Command+Option+P(Mac) or Control+Shift+P(Windows, Linux, Chrome OS)

• 查询DOM 树

  • Control+F

• Toggle device toolbabr （Control+Shift+M）：切换设备工具栏

页面

• Element
  • 各种DOM、CSS 的选择、查看、修改、删除。
• Console
  • 查看消息、运行js
  • 各种log、warn、error 执行
  • 变量 watch
• Sources：debugging JavaScript
  • debugger ：对应点触发 debugger pause， 用于单步js。
  • 再 Sources 中下断点，同样触发 BP pause。
• Network
  • 记录请求与响应，可以勾选 Preserve log 就不会清楚上个页面的log。
  • 可以上传、下载HAR file，看用户当时的请求和响应栈。
• Application
  • 检查加载的资源，
  • 存在本地客户端的一些 Key:Value 键值对。

UI Devtools & Native UI

• Chromium UI Platform
• UI DevTools

Native UI 是什么

• 由Browser 进程管理，如浏览器上部分的各种UI（缩小、放大、关闭、回退等）
  • Native UI 通过 UI DevTools 查看和调试，对比前端开发的 Web HTML 是使用 Devtools 来查看和调试。
    • 即 Native UI 是chromium、或使用chromium 内核的Web APP 方绘制的，通过 UI Devtools查看和调试。
    • 而 Web content 是前端 绘制的，通过Devtools查看和调试。
• 浏览器下部分的 Content 部分才是 Renderer 进程管理。

inspect Native UI

• chrome://flags/ : 中enable ui-debug-tools， 才可以使用inspect Native UI。
  • Debugging tools for UI ：打开 Native UI 。用于 inspect Native UI
  • 重启浏览器后可以在 chrome://inspect 看到 chrome://inspect/#native-ui，随后直接 inspect Native UI 即可。
• UI DevTools 可以 检查 Native UI，并可以实时更改并显示。
  • 在 inspect mode 下，悬停Native UI处就可以显示对应的元素节点。
  • 点击就会固定节点，对应的节点的点击就会 显示其属性。
• Source panel
  • 每个属性的右上角可以打开对应源文件，右键可以打开整个 类头文件，左键可以在Sources 面板打开来自本地文件的源码。
• Ctrl+R 可以绘制每个元素的红色边框 ；（没试出来）
• UI Element Tree Search：
  • Ctrl+F 可以打开搜索栏 搜索element树 或者 元素的样式属性。

Frontend DevTools & Backend DevTools

• Inspecting Chrome Native UI with Chrome UI DevTools

• 我们可以使用UI DevTools 去inspect Native UI，就像是使用DevTools 检查web 页面一样 。

  • 这是复用了现在的 DevTools 前端（Frontend DevTools）
  • 同时使用 DevTools 协议语言 和DevTools inspector 在chrome 和组件中创建了一个 DevTools 后端（Backend DevTools）

• 第三方 Web APP 要调试 Native UI，也要在内部实现一个 DevTools 后端（Backend DevTools）

参考

• https://leeon.gitbooks.io/devtools/content/
• 深入理解 Chrome DevTools