Chrome 开发工具使用及学习笔记

Chrome开发工具简介

谷歌 Chrome 开发工具，是基于谷歌浏览器内含的一套网页制作和调试工具。

使用开发工具

直接打开一个网页或者谷歌浏览器的一个网页应用，以下方法均可打开开发工具：

• 点击浏览器右上角菜单栏的 自定义及控制 →更多工具→开发者工具。

自定义及控制的位置及图标如下图所示：

• 在页面任何位置鼠标右击→检查。
• 在当前页面使用快捷键 F12
  • Ctrl + Shift + I打开最近关闭的状态。
  • Ctrl + Shift + C快速查看DOM或样式，即打开Element面板。
  • Ctrl + Shift + J快速查看log运行JavaScript，即打开Console面板。
    
• 可以使用快捷键 Ctrl + [ 和 Ctrl + ] 在面板之间移动。

主要开发工具

Elements元素面板

看到一个 DOM 树的全部相关信息，并允许检查以及在传输过程中编辑 DOM 元素。

• 检查和调整页面、调试DOM、调试CSS。

Console控制台面板

为开发者提供了测试 Web 页面和应用程序的功能：

• 在开发过程中记录诊断信息。
• 一个可与文档和工具交互的 shell 提示符。
• 可以使用控制台编程接口提供的方法来记录诊断信息。如 console.log() 或 console.profile()。
• 可以直接在控制台中评估表达式，并使用命令行提供的方法。这些包括使用 $() 命令选择元素或通过 profile() 方法启动 CPU 分析器命令。
• 调试JavaScript、查看Console log日志、断点调试代码Debugging。

Sources调试面板

一个在控制台输出日志的条件断点。

• 调试JavaScript页面源代码，进行断点调试代码。

Network网络面板

很重要！！！
提供有关已经下载和加载过的资源的详细分析。

• 调试请求、了解页面静态资源分布、网页性能检测、查看请求耗时。
  • 查看网页资源请求概览，查看资源分布。
  • 针对单一请求查看Request/Response或时间消耗等。
  • 分析网页性能优化，实用工具代理页面请求数据等。

Application应用面板

• 查看&调试客户端存储，如Cookie、LocalStorage、SessionStorage等。

Performance性能面板

• 查看页面性能细节，细粒度对网页载入进行性能优化（高阶）。

Memory内存面板

• JavaScript CPU分析器，内存堆分析器（高阶）。

Security安全面板

• 查看页面安全及证书问题。

Audits审计面板

可以像加载页面时那样分析一个页面。

然后提供关于减少页面加载时间的建议和优化，以此提高感知（和真实）的响应。

• 使用Google Lighthouse辅助性能分析，给出优化建议（高阶）。

在DOM中断点调试

属性修改时打断点

break on → attribute modifications

节点删除时打断点

break on → node removal

子树修改时打断点

break on → subtree modifications

调试JavaScript基本流程

1. 传统的console.log()或alert()打印运行时信息t调试。
2. JavaScript断点调试。
   • 在相应想调试的地方加入debugger;
   • Sources面板也有几种方法可以调试（略）。
3. 运行时变量调试，修改源代码临时保存调试。

（未完待续…）