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”项

手动清理网站缓存

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

2. 输入 “clear site data”

3. 敲回车键

弹出命令输入框

输入命令

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

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

1. 切换 “Elements" 元素面板

2. 按住 Alt 键点击某个文档节点左侧的小箭头

强制设置元素的状态

1. 选中元素

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

3. 勾选要切换的状态

查找某元素绑定的事件

1. 切换 “Elements" 元素面板，点击文档节点

2. 选择 “Event Listeners” 页签

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

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

选择文档节点

选择 Event Listeners 页签

展开事件

右键“handler”

定位结果

打开某个资源文件

1. 按 command + p （windows 按 Ctrl + p），弹出文件搜索框

2. 输入文件名

3. 敲回车键

弹出文件搜索框

输入文件名

快速定位源代码行数

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

2. 输入 :行数，如 ":480"

3. 敲回车键

格式化代码

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

格式化结果

对某行代码打断点

• 点击代码左侧的行号

• 鼠标移至代码中的变量可实时查看值

QQ20190822-134244.png

监听断点环境下的变量

1. 切换 “watch” 面板

2. 点击 “ + ” 按钮

3. 输入要监听的变量

4. 敲回车键

查找加载图片的代码

1. 切换 “Network” 网络面板

2. 点击 “Initiator” 列下的文件名

定位结果

全局查询请求头和响应体

1. 切换 “Network” 页签

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

3. 在弹出的搜索框中输入要查询的内容

4. 敲回车键

QQ20190822-090016.png

切换网络模式

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("#APP")

3. 敲回车键，展开输出结果，点击红色框位置将会跳转到相应的元素节点

跳转结果

在控制台中输入多行代码

按住Shift键敲回车即可换行

换行效果

手动添加Cookie

1. 在Application面板中按 esc 键，打开控制台面板

2. 输入：document.cookie = "test=1"

手动添加LocalStorage

1. 在Application面板中按 esc 键，打开控制台面板

2. 输入：localStorage.setItem('test', '1')

模拟手机调试

点击 DevTools 左上角的手机图标按钮，如图：

手机调试面板菜单介绍

打开传感器设置面板

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

2. 输入 “ show Sensors ”

3. 敲回车键

传感器设置面板介绍

QQ20190822-235212.png

设置网页 User agent

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

2. 输入 “ show Network conditions ”

3. 取消勾选 “ Select automatically ”

4. 点击 “Custom...” 下拉框，选择相应的代理设备

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：截取当前可视区域

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

QQ20190823-002907.png

回复关键字：

1、回复 “40”  查看 中国互联网40年江湖风云，江湖再无风清扬，再有少年郎

2、回复 “国旗”  获取国旗头像教程

3、回复 “Ubuntu”  获取100 个最佳 Ubuntu 应用

4、回复 “idea”  获取最新idea破解教程

推荐阅读:

100个最有价值的开源项目--微信开发系列

            IDEA 2019 最新激活教程

教程丨教你如何给头像加一面国旗@微信官方

马云今日卸任，最后一天上班高兴得像个孩子？马云：绝非退休，不会停下来

MyCat读写分离配置

Spring 之 IoC 源码分析 (基于注解方式)               

一台Linux服务器可以负载多少个连接?（底部有福利）

Spring AOP 面向切面编程必须知道的事

   Java 技术书籍大全系列（2）语言基础

Java 技术书籍大全系列（1）入门书籍

Tomcat在SpringBoot中是如何启动的

一看就懂的设计模式|设计模式分类

Java并发juc相关容器，工具，框架介绍

面试被问烂的 Spring IOC(求求你别再问了)

Spring Cloud综合实战 - 基于TCC补偿模式的分布式事务

SpringCloud框架搭建+实际例子+讲解+系列一

阿里如何实现秒级百万TPS？搜索离线大数据平台架构解读

waf的使用必看

阿里巴巴Java开发规约插件使用

免责声明：

1.本公众号所转载文章均来自公开网络。

2.如果出处标注有误或侵犯到原著作者权益，请联系删除。

3.转载本公众号中的文章请注明原文链接和作者，否则产生的任何版权纠纷均与本公众号无关。