打开 Chrome 开发者工具
- 在 Chrome 菜单中选择 ”更多工具“ > ”开发者工具“
2. 在页面元素上右键点击，选择 “检查”
-
使用 快捷键 Ctrl + Shift + I (Windows) 或 Cmd + Opt + I (Mac)
-
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
移动设备模拟器
- 模似移动设备
- 响应式视窗模式
Elements
使用元素面板可以自由的操作 DOM 和 CSS 来迭代布局和设计页面。 主要功能:
- 检查和调整页面
- 编辑样式
- 编辑 DOM
技巧
-
快速显示/隐藏元素, 选择元素后, 按
h, 可以让元素 显示/隐藏 -
拖动元素, 选择元素后, 直接拖动至指定位置即可看到效果, 或使用 "Ctrl + ⬆ / Ctrl + ⬇"
-
编辑/复制 元素
-
实时修改样式
-
查看最终生效的值(computed)
-
shadow editor(阴影编辑器)
-
Cubic bezier(贝塞尔) 编辑器
-
"+" 添加style样式 点击“+”添加新的样式
-
颜色拾取器
-
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
使用网络面板了解请求和下载的资源文件并优化网页加载性能。
- Preserve log
- Disable cache
- filter, 请求过滤
- 网速限制
- export HAR & import HAR
- request initiator
- 自定义network面板中显示的详细信息 (右击"Name"栏, 选择需要显示的信息)
- Replay XHR
Performance
使用时间轴面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。 传送门:# 一个Chrome 运行时性能瓶颈分析案例
Memory
如果需要比时间轴面板提供的更多信息，可以使用“配置”面板，例如跟踪内存泄漏。
- JavaScript CPU 分析器
- 内存堆区分析器
Application
使用资源面板检查加载的所有资源，包括 IndexedDB 与 Web SQL 数据库，本地和会话存储，cookie ，应用程序缓存，图像，字体和样式表。
- 管理数据, 如常用的: Cookie, Storage等等
Security
使用安全面板调试混合内容问题，证书问题等等。
Lighthouse
是一个开源的自动化工具，用于改进网络应用的质量。 您可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。 您为 Lighthouse 提供一个您要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告。
