#说明

此笔记为截取上方ChromeDevTools使用详解笔记的 [ 常用操作及快捷键 ] 部分笔记的部分知识点至此,方便阅读

更多笔记看上方 ChromeDevTools 使用详解笔记

除此笔记外大家可以看我其他笔记 :全栈笔记、数据结构与算法、编程_前端开发学习笔记、编程_后台服务端学习笔记 、Java 、Nodejs 、JavaScript笔记、编程工具使用笔记 、ES6及后续版本学习笔记 、Vue笔记整合 、React笔记、微信小程序学习笔记、Chrome开发使用及学习笔记 以及许多其他笔记就不一一例举了

更多Chrome开发笔记: Chrome开发使用及学习笔记

四、常用操作及快捷键

1、打开 Chrome DevTools

1. 鼠标点击

• 选择右上角Chome 菜单，然后选择更多工具 -> 开发者工具
• 右键，选择检查/审查元素

1. 当然，比较推荐利用快捷键来打开：

• Ctrl + Shift + I, F12 / Cmd + Opt + I，打开 DevTools
• Ctrl + Shift + J / Cmd + Opt + J，打开 DevTools，并且定位到控制台面板

1. 上面两种方式不仅可以打开 DevTools，还可以关闭 DevTools。当然，还有一种方式可以打开 DevTools。

• Ctrl + Shift + C / Cmd + Opt + C，打开 DevTools，并且开启审查元素模式（相当于点击了 DevTools 左上角的图标： )

2、刷新页面与强制刷新

• F5, Ctrl + R / Cmd + R，刷新页面
• Ctrl + F5, Ctrl + Shift + R / Cmd + Shift + R，刷新页面并忽略缓存

3、缩放DevTools

• Ctrl + '+' / Cmd + Shift + '+'，放大 DevTools
• Ctrl + '-' / Cmd + Shift + '-'，缩小 DevTools
• Ctrl + 0 / Cmd + 0，DevTools 恢复大小

4、切换设备

Ctrl+Shift+M切换设备 或者直接点击机身图标

具体操作如下:

5、禁用缓存

1. 应用场景:如有时要多次查看第一次进入该网页时加载的资源时会用到,防止有的数据走缓存导致下次刷新查看不到
2. 操作:切换到“Network”网络面板,勾选“Disable cache”项

6、手动清理网站缓存

1. 应用场景:此操作能清空Cookies、WebSQL、Service Workers、Cache Storage、IndexedDB、Local Storage、Application Cache

2. 操作:

   1. 按 command + shift + p （windows 按 Ctrl + shift + p），弹出命令输入框

   2. 输入 “clear site data” 敲回车

1. 效果图

7、强制设置元素的状态

1. 应用场景:当我要看如点击状态下的某个元素的样式,可以勾选点击状态,那么页面上该元素就会呈现此状态下的样式

2. 操作:

   1. 选中元素

   2. 点击Style面板下的:hov按钮

   3. 勾选要设置的状态,那么页面该元素就会呈现该选中状态下的样式

8、查找某元素绑定的事件

1. 应用场景举例:当你想要查找某个元素绑定的点击事件,就可以通过该方法直接定位到代码中

2. 操作:

   1. 切换 “Elements” 元素面板,点击文档节点

   2. 选择 “Event Listeners” 页签

   3. 展开相应的事件名,如“click”

   4. 对 “handler” 点击右键,选择 “Show funciton definition”

   5. 点击后就会自动定位

1. 示例图

9、打开某个资源文件及定位源代码行数

1. 打开某个资源文件

   1. 按 command p (windows 按 Ctrl p),弹出文件搜索框,输入文件名回车即可定位

   2. 效果图

1. 快速定位源代码行数

   1. 按 command p (windows 按 Ctrl p),弹出文件搜索框

   2. 输入 :行数,如 “:480”,回车即可

   3. 效果图:

10、格式化代码

1. 应用场景:当你打开的源码是压缩过或者格式很乱的,影响阅读时可以使用
2. 操作:点击已打开文件的左下角花括号
3. 效果图:

11、查找加载图片的代码-(其他资源同理)

1. 应用场景:当你要查找加载图片(其他资源)的代码时

2. 操作

• 切换 “Network” 网络面板,选中Img

• 点击 “Initiator” 列下的文件名即会跳转至代码处

1. 效果图

12、全局查询请求头和响应体

1. 应用场景:

2. 操作:

• 切换 “Network” 页签

• 点击左上角的“放大镜”按钮

• 在弹出的搜索框中输入要查询的内容,敲回车键

• 选择想要查看的请求点击,就能查阅其请求头与响应体

1. 效果图

13、切换网络模式及限制网速

1. 应用场景:当你想要测试无网络、快速的3G、卡顿的3G、限速的网络环境时自己软件的表现时

2. 切换网络模式操作:

• 切换 Network 网络面板,点击 “ online ” 下拉面板,选择想要的模式

• 效果图

1. 限制网速操作:

• 切换 Network 网络面板 点击 “ online ” 下拉面板 选择 “ add.. ” 选项

• 点击 “ Add custom profile… ” 按钮 依次输入“Profile Name”、“Download”、“Upload”等输入项设置网速,再点击 “Add” 按钮

• 回到 Network 网络面板切换所新增的网络模式

• 效果图:第一步操作同上切换网络操作

14、在Console控制台查找DOM及多行输入

1. 在Console控制台查找DOM:
   切换到Console控制台面板 输入:document.querySelector("#id")或documen.querySelector("className")敲回车键,很简单就不演示了

2. 在控制台中输入多行代码
   输入时,按住Shift键敲回车即可换行

15、将DOM、打印结果、处理函数等存成全局变量在 console 面板使用

很多地方的右键上下文菜单上有这个Store as global variable这个选项—作用是在 console 面板存成全局变量,因为对象的引用类型,修改这个全局变量,其实就是改变原对象的值,很强大。

注:刷新后保存的变量会重置

Ⅰ-将DOM变成全局变量

1. 应用场景:当你想从控制台进行对DOM节点的操作时,也可以变相等同于进行了一步let temp2=document.querySelector("#id")操作

2. 操作:

• devtools的Elements面板中选中要操作的DOM节点

• 右键选择Store object as global variable,就会自动保存成全局变量

• 可以如同js般对其进行操作

1. 示例图:

Ⅱ-打断点时候的任意一个局部变量

1. 应用场景:当你需要保留观察或者进行操作调试过程中某个时期的变量时

2. 操作:

• 在代码中写debugger或者在控制台代码出打上断点,运行

• 选中任意想要保存的局部变量,右键存储即可

1. 示例图

Ⅲ-消息的响应体预览界面

1. 应用场景:通常就是保留下某些请求变量用作对比罢了,方便开发

Ⅳ-保存控制台输出内容

1. 应用场景:当你不用debugger而只是使用console.log简单打印出变量时,可以将控制台打印出来的变量保存下来使用

2. 操作:

• 代码中进行打印或者控制台输入代码console打印出需要的变量

• 右键选择Store object as global variable,就会自动保存成全局变量

1. 示例图:

16、截图操作

首先你需要F12打开devtools,下面操作才会生效

1. 按 command + shift + p （windows 按 Ctrl + shift + p），弹出命令输入框
2. 输入：screenshot
3. 如下图选择相应的截图方式：

• Capture area screenshot：截取某个区域（需要选择某个标签）
• Capture full size screenshot：截取整个网页
• Capture node screenshot：截取某个标签节点
• Capture screenshot：截取当前可视区域

17、打开控制台抽屉

1. 应用场景:当你在如Network、elements界面要用要console控制台时,就如我上面的例子截图,
2. 下面举例在Elements面板打开抽屉

1. 更简单的:直接点击esc就可以在别的地方打开

关掉的方法同理

18、重新发起某请求

在与后端联调过程中，若需要重新发起请求，除了刷新页面或重新触发请求事件外，还可以使用更简单的方式。右击需要重新发起的请求，选择Replay XHR，就可以重新发起请求了

更多知识点看上方具体笔记