Chrome开发者工具的使用

原文:https://www.jianshu.com/p/e366183e06f4
本文只是摘取原文一些对本人比较有用的使用技巧

9大功能面板

Elements元素面板:检查和调整页面,调试DOM和CSS
Network网络面板:调试请求,了解页面静态资源分布,网页性能检测
Console控制台面板:调试JavaScript,查看日志,交互式代码调试
Sources源代码资源面板:调试JavaScript页面源代码,进行断点调试
Application应用面板:查看和调试客户端存储,如Cookie、LocalStorage、SessionStorage
Performance性能面板:查看页面性能细节,细粒度对网页载入进行性能优化
Memory内存面板:JavaScript CPU分析器,内存堆分析器
Security安全面板:查看页面安全及证书问题
Audis面板:使用Google Lighthouse辅助性能分析,给出优化建议

打开方式

快捷键Ctrl + shift + J;按 command + shift + p (windows 按 Ctrl + shift + p),弹出命令输入框。(说明:下面所有的快捷键都是在windows下的)

展开/缩起某标签下所有层级的标签

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

强制设置元素的状态

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

查找某元素绑定的事件

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

打开某个资源文件/快速定位源代码行数

1.按command + p (windows 按 Ctrl + p),弹出文件搜索框
2.输入文件名/输入 :行数,如 ":480"
3.敲回车键

格式化代码

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


image
image

对某行代码打断点

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

监听断点环境下的变量

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

切换网络模式

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

限制网速

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

在Console控制台查找DOM

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

在控制台中输入多行代码

按住Shift键敲回车即可换行

image
image

手动添加Cookie

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

手动添加LocalStorage

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

模拟手机调试

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

image

手机调试面板菜单介绍

image

集成 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 即可
image
image
image
image

你可能感兴趣的:(Chrome开发者工具的使用)