9大功能面板
- Elements元素面板：检查和调整页面，调试DOM和CSS
- Network网络面板：调试请求，了解页面静态资源分布，网页性能检测
- Console控制台面板：调试JavaScript，查看日志，交互式代码调试
- Sources源代码资源面板：调试JavaScript页面源代码，进行断点调试
- Application应用面板：查看和调试客户端存储，如Cookie、LocalStorage、SessionStorage
- Performance性能面板：查看页面性能细节，细粒度对网页载入进行性能优化
- Memory内存面板：JavaScript CPU分析器，内存堆分析器
- Security安全面板：查看页面安全及证书问题
- Audis面板：使用Google Lighthouse辅助性能分析，给出优化建议
打开方式
- 在Chrome菜单中选择：更多工具 > 开发者工具
- 在页面元素上右键点击，选择“检查”
- 使用快捷键：
- command + option + I (mac) 或 Ctrl + shift + I (Windows) 打开最近关闭的状态
- command + option + C (mac) 或 Ctrl + shift + C (Windows) 直接打开Elements元素面板
- command + option + J (mac) 或 Ctrl + shift + J (Windows) 直接打开Console控制台面板
禁用缓存
- 切换到“Network”网络面板
- 勾选“Disable cache”项
手动清理网站缓存
- 按 command + shift + p （windows 按 Ctrl + shift + p），弹出命令输入框
- 输入 “clear site data”
- 敲回车键
弹出命令输入框
输入命令
此操作能清空Cookies、WebSQL、Service Workers、Cache Storage、IndexedDB、Local Storage、Application Cache
展开某标签下所有层级的标签
- 切换 “Elements" 元素面板
- 按住 Alt 键点击某个文档节点左侧的小箭头
强制设置元素的状态
- 选中元素
- 点击Style面板下的“ :hov ” 按钮
- 勾选要切换的状态
查找某元素绑定的事件
- 切换 “Elements" 元素面板，点击文档节点
- 选择 “Event Listeners” 页签
- 展开相应的事件名，如“click”
- 对 “handler” 点击右键，选择 “Show funciton definition”
选择文档节点
选择 Event Listeners 页签
展开事件
右键“handler”
定位结果
打开某个资源文件
- 按 command + p （windows 按 Ctrl + p），弹出文件搜索框
- 输入文件名
- 敲回车键
弹出文件搜索框
输入文件名
快速定位源代码行数
- 按 command + p （windows 按 Ctrl + p），弹出输入框
- 输入 :行数，如 ":480"
- 敲回车键
格式化代码
点击已打开文件左下角的花括号按钮
格式化结果
对某行代码打断点
- 点击代码左侧的行号
- 鼠标移至代码中的变量可实时查看值
QQ20190822-134244.png
监听断点环境下的变量
- 切换 “watch” 面板
- 点击 “ + ” 按钮
- 输入要监听的变量
- 敲回车键
查找加载图片的代码
- 切换 “Network” 网络面板
- 点击 “Initiator” 列下的文件名
定位结果
全局查询请求头和响应体
- 切换 “Network” 页签
- 点击左上角的“放大镜”按钮
- 在弹出的搜索框中输入要查询的内容
- 敲回车键
QQ20190822-090016.png
切换网络模式
- 切换 Network 网络面板
- 点击 “ online ” 下拉面板
- 选择要切换的网络模式
限制网速
- 切换 Network 网络面板
- 点击 “ online ” 下拉面板
- 选择 “ add ” 选项
- 点击 “ Add custom profile... ” 按钮
- 依次输入“Profile Name”、“Download”、“Upload”等输入项
- 点击 "Add" 按钮
- 回到 Network 网络面板切换所新增的网络模式
在Console控制台查找DOM
- 切换到Console控制台面板
- 输入：document.querySelectorAll("#APP")
- 敲回车键，展开输出结果，点击红色框位置将会跳转到相应的元素节点
跳转结果
在控制台中输入多行代码
按住Shift键敲回车即可换行
换行效果
手动添加Cookie
- 在Application面板中按 esc 键，打开控制台面板
- 输入：document.cookie = "test=1"
手动添加LocalStorage
- 在Application面板中按 esc 键，打开控制台面板
- 输入：localStorage.setItem('test', '1')
模拟手机调试
点击 DevTools 左上角的手机图标按钮，如图：
手机调试面板菜单介绍
打开传感器设置面板
- 按 command + shift + p （windows 按 Ctrl + shift + p），弹出命令输入框
- 输入 “ show Sensors ”
- 敲回车键
传感器设置面板介绍
QQ20190822-235212.png
设置网页 User agent
- 按 command + shift + p （windows 按 Ctrl + shift + p），弹出命令输入框
- 输入 “ show Network conditions ”
- 取消勾选 “ Select automatically ”
- 点击 “Custom...” 下拉框，选择相应的代理设备
QQ20190822-235730.png
截图
- 按 command + shift + p （windows 按 Ctrl + shift + p），弹出命令输入框
- 输入：screenshot
- 如下图选择相应的截图方式：
- Capture area screenshot：截取某个区域（需要选择某个标签）
- Capture full size screenshot：截取整个网页
- Capture node screenshot：截取某个标签节点
- Capture screenshot：截取当前可视区域
集成 Vue.js 开发者工具
- 进入官网：https://cn.vuejs.org/
- 选择 “ 生态系统 ” 菜单下的 “ Devtools ”
- 下载源码后解压
- 在终端切换到解压后的文件目录
- 输入打包命令（需安装webpack）：cd shells/chrome && cross-env NODE_ENV=production webpack --progress --hide-modules
- 打开Chrome，输入网址：chrome://extensions/
- 点击按钮 “ 加载已解压的扩展程序 ”
- 选择 vue-devtools 目录下的 shell/chrome 即可
QQ20190823-002907.png
