Chrome开发者工具(DevTools)使用技巧

时间:2024-03-22 07:27:29

Chrome开发者工具(DevTools)使用技巧

202019.08.22 00:24:42字数 1343阅读 2928

9大功能面板

  1. Elements元素面板:检查和调整页面,调试DOM和CSS
  2. Network网络面板:调试请求,了解页面静态资源分布,网页性能检测
  3. Console控制台面板:调试JavaScript,查看日志,交互式代码调试
  4. Sources源代码资源面板:调试JavaScript页面源代码,进行断点调试
  5. Application应用面板:查看和调试客户端存储,如Cookie、LocalStorage、SessionStorage
  6. Performance性能面板:查看页面性能细节,细粒度对网页载入进行性能优化
  7. Memory内存面板:JavaScript CPU分析器,内存堆分析器
  8. Security安全面板:查看页面安全及证书问题
  9. 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控制台面板

禁用缓存

  1. 切换到“Network”网络面板
  2. 勾选“Disable cache”项

Chrome开发者工具(DevTools)使用技巧

手动清理网站缓存

  1. 按 command + shift + p (windows 按 Ctrl + shift + p),弹出命令输入框
  2. 输入 “clear site data”
  3. 敲回车键

Chrome开发者工具(DevTools)使用技巧

弹出命令输入框

Chrome开发者工具(DevTools)使用技巧

输入命令

此操作能清空Cookies、WebSQL、Service Workers、Cache Storage、IndexedDB、Local Storage、Application Cache

展开某标签下所有层级的标签

  1. 切换 “Elements" 元素面板
  2. 按住 Alt 键点击某个文档节点左侧的小箭头

Chrome开发者工具(DevTools)使用技巧

强制设置元素的状态

  1. 选中元素
  2. 点击Style面板下的“ :hov ” 按钮
  3. 勾选要切换的状态

Chrome开发者工具(DevTools)使用技巧

查找某元素绑定的事件

  1. 切换 “Elements" 元素面板,点击文档节点
  2. 选择 “Event Listeners” 页签
  3. 展开相应的事件名,如“click”
  4. 对 “handler” 点击右键,选择 “Show funciton definition”

Chrome开发者工具(DevTools)使用技巧

选择文档节点

Chrome开发者工具(DevTools)使用技巧

选择 Event Listeners 页签

Chrome开发者工具(DevTools)使用技巧

展开事件

Chrome开发者工具(DevTools)使用技巧

右键“handler”

Chrome开发者工具(DevTools)使用技巧

定位结果

打开某个资源文件

  1. 按 command + p (windows 按 Ctrl + p),弹出文件搜索框
  2. 输入文件名
  3. 敲回车键

Chrome开发者工具(DevTools)使用技巧

弹出文件搜索框

Chrome开发者工具(DevTools)使用技巧

输入文件名

快速定位源代码行数

  1. 按 command + p (windows 按 Ctrl + p),弹出输入框
  2. 输入 :行数,如 “:480”
  3. 敲回车键

Chrome开发者工具(DevTools)使用技巧

格式化代码

点击已打开文件左下角的花括号按钮

Chrome开发者工具(DevTools)使用技巧

Chrome开发者工具(DevTools)使用技巧

格式化结果

对某行代码打断点

  • 点击代码左侧的行号
  • 鼠标移至代码中的变量可实时查看值

Chrome开发者工具(DevTools)使用技巧

QQ20190822-134244.png

监听断点环境下的变量

  1. 切换 “watch” 面板
  2. 点击 “ + ” 按钮
  3. 输入要监听的变量
  4. 敲回车键

Chrome开发者工具(DevTools)使用技巧

Chrome开发者工具(DevTools)使用技巧

Chrome开发者工具(DevTools)使用技巧

查找加载图片的代码

  1. 切换 “Network” 网络面板
  2. 点击 “Initiator” 列下的文件名

Chrome开发者工具(DevTools)使用技巧

Chrome开发者工具(DevTools)使用技巧

定位结果

全局查询请求头和响应体

  1. 切换 “Network” 页签
  2. 点击左上角的“放大镜”按钮
  3. 在弹出的搜索框中输入要查询的内容
  4. 敲回车键

Chrome开发者工具(DevTools)使用技巧

Chrome开发者工具(DevTools)使用技巧

Chrome开发者工具(DevTools)使用技巧

QQ20190822-090016.png

切换网络模式

  1. 切换 Network 网络面板
  2. 点击 “ online ” 下拉面板
  3. 选择要切换的网络模式

Chrome开发者工具(DevTools)使用技巧

Chrome开发者工具(DevTools)使用技巧

限制网速

  1. 切换 Network 网络面板
  2. 点击 “ online ” 下拉面板
  3. 选择 “ add ” 选项
  4. 点击 “ Add custom profile… ” 按钮
  5. 依次输入“Profile Name”、“Download”、“Upload”等输入项
  6. 点击 “Add” 按钮
  7. 回到 Network 网络面板切换所新增的网络模式

Chrome开发者工具(DevTools)使用技巧

Chrome开发者工具(DevTools)使用技巧

Chrome开发者工具(DevTools)使用技巧

Chrome开发者工具(DevTools)使用技巧

Chrome开发者工具(DevTools)使用技巧

在Console控制台查找DOM

  1. 切换到Console控制台面板
  2. 输入:document.querySelectorAll("#APP")
  3. 敲回车键,展开输出结果,点击红色框位置将会跳转到相应的元素节点

Chrome开发者工具(DevTools)使用技巧

Chrome开发者工具(DevTools)使用技巧

跳转结果

在控制台中输入多行代码

按住Shift键敲回车即可换行

Chrome开发者工具(DevTools)使用技巧

Chrome开发者工具(DevTools)使用技巧

换行效果

手动添加Cookie

  1. 在Application面板中按 esc 键,打开控制台面板
  2. 输入:document.cookie = “test=1”

Chrome开发者工具(DevTools)使用技巧

手动添加LocalStorage

  1. 在Application面板中按 esc 键,打开控制台面板
  2. 输入:localStorage.setItem(‘test’, ‘1’)

Chrome开发者工具(DevTools)使用技巧

模拟手机调试

点击 DevTools 左上角的手机图标按钮,如图:

Chrome开发者工具(DevTools)使用技巧

手机调试面板菜单介绍

Chrome开发者工具(DevTools)使用技巧

打开传感器设置面板

  1. 按 command + shift + p (windows 按 Ctrl + shift + p),弹出命令输入框
  2. 输入 “ show Sensors ”
  3. 敲回车键

Chrome开发者工具(DevTools)使用技巧

传感器设置面板介绍

Chrome开发者工具(DevTools)使用技巧

QQ20190822-235212.png

设置网页 User agent

  1. 按 command + shift + p (windows 按 Ctrl + shift + p),弹出命令输入框
  2. 输入 “ show Network conditions ”
  3. 取消勾选 “ Select automatically ”
  4. 点击 “Custom…” 下拉框,选择相应的代理设备

Chrome开发者工具(DevTools)使用技巧

Chrome开发者工具(DevTools)使用技巧

QQ20190822-235730.png

截图

  1. 按 command + shift + p (windows 按 Ctrl + shift + p),弹出命令输入框
  2. 输入:screenshot
  3. 如下图选择相应的截图方式:
  • Capture area screenshot:截取某个区域(需要选择某个标签)
  • Capture full size screenshot:截取整个网页
  • Capture node screenshot:截取某个标签节点
  • Capture screenshot:截取当前可视区域

Chrome开发者工具(DevTools)使用技巧

集成 Vue.js 开发者工具

  1. 进入官网:https://cn.vuejs.org/
  2. 选择 “ 生态系统 ” 菜单下的 “ Devtools ”
  3. 下载源码后解压
  4. 在终端切换到解压后的文件目录
  5. 输入打包命令(需安装webpack):cd shells/chrome && cross-env NODE_ENV=production webpack --progress --hide-modules
  6. 打开Chrome,输入网址:chrome://extensions/
  7. 点击按钮 “ 加载已解压的扩展程序 ”
  8. 选择 vue-devtools 目录下的 shell/chrome 即可

Chrome开发者工具(DevTools)使用技巧

Chrome开发者工具(DevTools)使用技巧

QQ20190823-002907.png

Chrome开发者工具(DevTools)使用技巧

Chrome开发者工具(DevTools)使用技巧

–hide-modules
6. 打开Chrome,输入网址:chrome://extensions/
7. 点击按钮 “ 加载已解压的扩展程序 ”
8. 选择 vue-devtools 目录下的 shell/chrome 即可

[外链图片转存中…(img-3KYh4z1L-1570929705993)]

[外链图片转存中…(img-wVs61kkS-1570929705995)]

QQ20190823-002907.png

[外链图片转存中…(img-lqHXUsRt-1570929705996)]

[外链图片转存中…(img-hz96Ndoa-1570929705996)]