Chrome开发者工具(DevTools)学习

调出开发工具

右键 - 检查

9大功能图

禁用缓存

切换到Network网络面板
勾选Disable cache项

手动清理网站缓存

1.Ctrl + shift + p弹出命令输入框
2.输入 clear site data

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

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

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

查找某元素绑定的事件

1.切换 Elements 元素面板，点击文档节点
2.选择Event Listeners 页签
3.展开相应的事件名，如mouseover
4.对 handler 点击右键，选择 Show funciton definition转到对应js代码

打开某个资源文件

1.Ctrl + p弹出文件搜索框

2.输入文件名 回车

格式化代码

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

快速定位源代码行数(在完成打开某个资源文件之后)

1.Ctrl + p，弹出输入框
2.输入 :行数，如 :480

对某行代码打断点

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

监听断点环境下的变量

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

查找加载图片的代码

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

全局查询请求头和响应体

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

切换网络模式

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

限制网速

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

在Console控制台查找DOM

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

在控制台中输入多行代码

按住Shift键敲回车即可换行

手动添加Cookie

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

查看Cookie

方法1

更多方法

手动添加Local Storage

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

模拟手机调试

手机调试面板菜单介绍

打开传感器设置面板

1.按 Ctrl + shift + p，弹出命令输入框
2.输入 show Sensors

传感器设置面板介绍

设置网页 User agent

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

截图功能

1.按Ctrl + shift + p，弹出命令输入框
2.输入：screenshot
3.如下图选择相应的截图方式：
Capture area screenshot：截取某个区域（启动之后鼠标就可以在原网页上像QQ截图那样了）
Capture full size screenshot：截取整个网页
Capture node screenshot：截取某个标签节点（需要选择某个节点）
Capture screenshot：截取当前可视区域

示例节点截图Capture node screenshot

首先选择好节点

然后ctrl + shift + p选择第三个节点截图

接着就会弹出已经完成截图的图片让你保存

截好后的图片

示例区域截图`Capture area screenshot

先ctrl + shift + p选择第一个区域截图

然后回到原网页界面像QQ截图那样

参考文章:https://www.jianshu.com/p/e366183e06f4