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

文章目录

  • 9大功能面板
  • 打开方式
  • 禁用缓存
  • 手动清理网站缓存
  • 展开某标签下所有层级的标签
  • 强制设置元素的状态
  • 查找某元素绑定的事件
  • 打开某个资源文件
  • 快速定位源代码行数
  • 格式化代码
  • 对某行代码打断点
  • 监听断点环境下的变量
  • 查找加载图片的代码
  • 全局查询请求头和响应体
  • 切换网络模式
  • 限制网速
  • 在Console控制台查找DOM
  • 在控制台中输入多行代码
  • 手动添加Cookie
  • 手动添加LocalStorage
  • 模拟手机调试
  • 手机调试面板菜单介绍
  • 打开传感器设置面板
  • 传感器设置面板介绍
  • 设置网页 User agent
  • 截图
  • 集成 Vue.js 开发者工具

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张图片

手动清理网站缓存

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

Chrome开发者工具(DevTools)使用技巧_第2张图片

弹出命令输入框

Chrome开发者工具(DevTools)使用技巧_第3张图片

输入命令

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

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

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

Chrome开发者工具(DevTools)使用技巧_第4张图片

强制设置元素的状态

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

Chrome开发者工具(DevTools)使用技巧_第5张图片

查找某元素绑定的事件

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

Chrome开发者工具(DevTools)使用技巧_第6张图片

选择文档节点

Chrome开发者工具(DevTools)使用技巧_第7张图片

选择 Event Listeners 页签

Chrome开发者工具(DevTools)使用技巧_第8张图片

展开事件

Chrome开发者工具(DevTools)使用技巧_第9张图片

右键“handler”

Chrome开发者工具(DevTools)使用技巧_第10张图片

定位结果

打开某个资源文件

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

Chrome开发者工具(DevTools)使用技巧_第11张图片

弹出文件搜索框

Chrome开发者工具(DevTools)使用技巧_第12张图片

输入文件名

快速定位源代码行数

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

Chrome开发者工具(DevTools)使用技巧_第13张图片

格式化代码

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

Chrome开发者工具(DevTools)使用技巧_第14张图片

Chrome开发者工具(DevTools)使用技巧_第15张图片

格式化结果

对某行代码打断点

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

Chrome开发者工具(DevTools)使用技巧_第16张图片

QQ20190822-134244.png

监听断点环境下的变量

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

Chrome开发者工具(DevTools)使用技巧_第17张图片

Chrome开发者工具(DevTools)使用技巧_第18张图片

img

查找加载图片的代码

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

Chrome开发者工具(DevTools)使用技巧_第19张图片

Chrome开发者工具(DevTools)使用技巧_第20张图片

定位结果

全局查询请求头和响应体

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

img

Chrome开发者工具(DevTools)使用技巧_第21张图片

Chrome开发者工具(DevTools)使用技巧_第22张图片

QQ20190822-090016.png

切换网络模式

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

Chrome开发者工具(DevTools)使用技巧_第23张图片

Chrome开发者工具(DevTools)使用技巧_第24张图片

限制网速

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

Chrome开发者工具(DevTools)使用技巧_第25张图片

Chrome开发者工具(DevTools)使用技巧_第26张图片

Chrome开发者工具(DevTools)使用技巧_第27张图片

Chrome开发者工具(DevTools)使用技巧_第28张图片

Chrome开发者工具(DevTools)使用技巧_第29张图片

在Console控制台查找DOM

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

Chrome开发者工具(DevTools)使用技巧_第30张图片

img

跳转结果

在控制台中输入多行代码

按住Shift键敲回车即可换行

Chrome开发者工具(DevTools)使用技巧_第31张图片

Chrome开发者工具(DevTools)使用技巧_第32张图片

换行效果

手动添加Cookie

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

Chrome开发者工具(DevTools)使用技巧_第33张图片

手动添加LocalStorage

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

Chrome开发者工具(DevTools)使用技巧_第34张图片

模拟手机调试

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

img

手机调试面板菜单介绍

Chrome开发者工具(DevTools)使用技巧_第35张图片

打开传感器设置面板

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

Chrome开发者工具(DevTools)使用技巧_第36张图片

传感器设置面板介绍

Chrome开发者工具(DevTools)使用技巧_第37张图片

QQ20190822-235212.png

设置网页 User agent

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

Chrome开发者工具(DevTools)使用技巧_第38张图片

Chrome开发者工具(DevTools)使用技巧_第39张图片

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)使用技巧_第40张图片

集成 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)使用技巧_第41张图片

Chrome开发者工具(DevTools)使用技巧_第42张图片

QQ20190823-002907.png

Chrome开发者工具(DevTools)使用技巧_第43张图片

Chrome开发者工具(DevTools)使用技巧_第44张图片

–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)]

你可能感兴趣的:(爬虫)