一文学会使用Chrome开发者调试工具

打开 Chrome 开发者工具

1. 在 Chrome 菜单中选择 ”更多工具“ > ”开发者工具“

2. 在页面元素上右键点击，选择 “检查”

3. 使用 快捷键 Ctrl + Shift + I (Windows) 或 Cmd + Opt + I (Mac)

4. F12

通用技能

如下技巧仅在Chrome控制台可用:

copy(value) { [Command Line API]

在console控制台输入：

此时，会将变量demo的值copy至粘贴板，这样你就能够拿着它方便的作其余事情了。

getEventListeners(node) { [Command Line API] }

查看元素绑定的全部事件

store as global

从下图能够看出，帮咱们保存为全局变量“temp5”了，此时，便可拿来使用了。

copy html

咱们能够copy node节点，也能够copy html元素， 如：

monitor(function) { [Command Line API] }

monitor能够用来监控函数是否有被执行到， 好比下图中咱们定义的一个全局函数，能够经过monitor对它的调用进行监控

注意： 此方法只在调试工具中有效，不可用于编码实现

monitorEvents(object, [types]) { [Command Line API] }

有时咱们可能须要监控某些元素是否被某些事件触发，就可使用这个办法来进行调试

注意： 此方法只在调试工具中有效，不可用于编码实现

Command Menu 六大基本功能

面板

Device Mode

移动设备模拟器

1. 模似移动设备

2. 响应式视窗模式

Elements

使用元素面板能够自由的操做 DOM 和 CSS 来迭代布局和设计页面。 主要功能:

• 检查和调整页面
• 编辑样式
• 编辑 DOM

技巧

1. 快速显示/隐藏元素, 选择元素后, 按h, 可让元素 显示/隐藏
2. 拖动元素, 选择元素后, 直接拖动至指定位置便可看到效果, 或使用 "Ctrl + ⬆ / Ctrl + ⬇"
3. 编辑/复制 元素
4. 实时修改样式
5. 查看最终生效的值(computed)

6. shadow editor(阴影编辑器) 7. Cubic bezier(贝塞尔) 编辑器 8. "+" 添加style样式 点击“+”添加新的样式

9. 颜色拾取器

10. DOM断点, 当DOM节点被编辑或修改时触发断点

Console

在开发期间，可使用控制台面板记录诊断信息，或者使用它做为 shell 在页面上与 JavaScript 交互。

• 使用控制台面板
• 命令行交互
  • console.log
  • console.warn
  • console.error
  • console.assert
  • console.table
  • console.dir => 输出变量所关联的真实的JS对象

• console.time, 开启一个计时器
• console.timeEnd, 结束计时并将结果在console中打印出来

Sources

在源代码面板中设置断点来调试 JavaScript ，或者经过 Workspaces（工做区）链接本地文件来使用开发者工具的实时编辑器

• 断点调试
  • 错误断点
• 调试混淆的代码
• 使用开发者工具的 Workspaces（工做区）进行持久化保存

snippets 代码段

利用Snippets，能够基于浏览器环境进行js代码调试

WorkSpace

在chrome中修改咱们的项目文件，在element面板中进行调试（如样式等）会自动同步保存至本地文件中。

Network

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

1. Preserve log
2. Disable cache
3. filter, 请求过滤
4. 网速限制
5. export HAR & import HAR
6. request initiator
7. 自定义network面板中显示的详细信息 (右击"Name"栏, 选择须要显示的信息)
8. Replay XHR

Performance

使用时间轴面板能够经过记录和查看网站生命周期内发生的各类事件来提升页面的运行时性能。 传送门:# 一个Chrome 运行时性能瓶颈分析案例

Memory

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

• JavaScript CPU 分析器
• 内存堆区分析器

Application

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

• 管理数据, 如经常使用的: Cookie, Storage等等

Security

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

• 安全

传送门:了解安全问题(Security 面板)

Lighthouse

是一个开源的自动化工具，用于改进网络应用的质量。 您能够将其做为一个 Chrome 扩展程序运行，或从命令行运行。 您为 Lighthouse 提供一个您要审查的网址，它将针对此页面运行一连串的测试，而后生成一个有关页面性能的报告。

传送门

• Chrome devtools
• Chrome 开发者工具
• Lighthouse
• 传送门:# 一个Chrome 运行时性能瓶颈分析案例
• Device Mode
• Command Menu 六大基本功能