Chrome开发者模式及debug mode的使用

Chrome devtools

Chrome开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。

打开方式

• 菜单中选择更多工具>开发者工具
• 在页面中右键点击，选择检查
• 使用快捷键Command+Option+I或F12+Fn

---

面板

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

• 控制台面板
  记录诊断信息，或者使用它作为 shell在页面上与JavaScript交互。

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

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

• 性能面板
  通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。

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

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

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

• 审计面板
  Lighthouse，自动化测试工具，用来分析页面性能。

---

在Sources面板中断点调试

• 案例：DEMO

• 面板简介
  
  ①File Navigator，列出了页面请求的每个文件

  ②Code Editor 窗格。 在 File Navigator 窗格中选择文件后，此处会显示该文件的内容。

  ③JavaScript Debugging 窗格。 检查页面 JavaScript 的各种工具。 如果 DevTools 窗口布局较宽，此窗格会显示在 Code Editor 窗格右侧。

• 打断点

  1. 推测在点击运算按钮时出错。
  2. 在 JavaScript Debugging 窗格中，点击展开 Event Listener Breakpoints （事件侦听器断点）， 勾选Mouse中click事件。
     
  3. 返回demo，点击运算按钮，devtools会暂停演示并显示一行代码。
  4. 单步调试，点击Step into next function call（进入下一个函数调用）
  5. 打断点，点击第32行代码左侧行号，即在这行上有一个代码行断点，始终会在执行此行代码之前暂停。
  6. 点击Resume script execution（恢复脚本执行），29、30、31行右侧会输出addend1、addend2和sum的值。
  7. 检查值类型——位于引号中，是字符串类型，明白错误的原因所在。
  8. 更改错误
     • 点击Resume script execution
     • 将第 31 行 var sum = addend1 + addend2 替换为 var sum = parseInt(addend1) + parseInt(addend2)
     • 按Command+S保存更改
     • 点击Deactivate breakpoints（停用断点）
     • 进行演示

---

Chrome开发者工具官网：Chrome开发者工具(需FQ)