0.前言
或许你曾经零星的刷到过一些，关于Chrome开发者工具使用技巧的文章，读完之后大为震撼，发出“既然还能这么玩”的感慨。越是读到我越是想系统的学习下，然而雷同较多，想学到新知识的成本逐渐增大。作为一名前端工程师，工作当中最经常使用的工具之一便是Chrome浏览器，开发者工具也是习惯性打开的。
其实，只要你的工作当中接触到浏览器，深入了解下Chrome开发者工具也没什么不好，无论你是产品、测试、后端、UI，正所谓工欲善其事必先利其器，通过工具能够更好的解决问题，避免无效沟通，增强协作效率，也有助于团队氛围的保护。
作为普通网民的你，想要下载一些资源，复制文本等，却发现一些常规的功能被屏蔽了，提供的资源相比于要求你登录、付费之类的操作十分不合理，却又束手无策，Chrome开发者工具能解决这个问题。
做为测试的你是否厌烦了每次要给技术人员提供接口格式，复现场景，因为无法分清是前端的问题还是后端的问题而遭到抗议，Chrome开发者工具能解决这个问题。
作为前端，你是否厌倦了每次和别人说"你清一下缓存"，面对后端人员的"再试一次"十分火大，却又无可奈何，提供接口信息的时候要给返回格式，传参，一会说截图方便，一会说复制文本方便。感觉调试网页不够便捷，但又不知道怎么增进，优调性能不知如何下手，Chrome开发者工具能解决这个问题。
作为UI的你面对前端说这个字体大小、颜色、间距就是按照设计稿来的，你虽然心存疑惑，却也拿不出真凭实据，只能不了了之，Chrome开发者工具能解决这个问题。
作为产品的你当发生问题时不知道该找谁，描述问题的时候被吐槽只是表象，对于解决问题无意，觉得产品体验不好，但又不知道从哪个维度表达自己的不满，Chrome开发者工具能解决这个问题。
作为后端的你，是否因为觉得自己的接口没问题，但前端提供的东西无法满足你对问题排查而苦恼，很多时间花在和前端要数据，沟通流程中，Chrome开发者工具能解决这个问题。
Chrome开发者工具的使用其实是每个工种必备的基础能力，它一定程度抹平了技术上的差异，系列文章是我阅读官方文档，加上平时的使用体会编写的，相信读完之后，能够提升你的工作体验。
1.从打开Chrome开发者工具开始
鼠标右键网页，选择“检查”。会打开Elements面板，等同于快捷键Command+Option+C (Mac) 或 Control+Shift+C（Windows、Linux、ChromeOS）。
打开Console面板 ，请按 Command+Option+J (Mac) 或 Control+Shift+J（Windows、Linux、ChromeOS）
打开上一次关闭时选中的面板，按F12，或按Command+ Option+ I(Mac) 或Control+ Shift+ I。
可以通过更改程序的启动命令，让每个新建的标签页自动打开chrome devtools，"C:\Program Files\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs。
切换为中文
Ctrl + Shift + P，打开功能面板，输入中文，选择"Chinese - 中文"即可，然后点击按钮重启Chrome开发者工具
切换为英文则输入 "English" , 开发者工具支持很多语言。
开发者工具位置
从左到右依次是
-
在独立的窗口打开Chrome开发者工具
-
开发者工具位于当前网页的左侧
-
开发者工具位于当前网页的下方
-
开发者工具位于当前网页的右侧
Ctrl + shift + D 可以切换到上一个位置
打开窗格
通过esc切换，可以再打开一层工具条，例如看到元素面板的同时，可以看控制台面板，而不用左右切换
区域缩放
Ctrl + 、 Ctrl -，Ctrl + 0重置
切换面板
ctrl + [ 和 ctrl + ] 从当前面板分别向左和向右切换
也可以通过Ctrl + 1 到 ctrl + 9 切换，这个默认是禁用的，可以通过"设置"按钮或F1
面板和窗格之间的交互
对于面板中固定打开的选项卡，右键点击只能选择"移至底部",到了底部右键点击也只能选择“移至顶部”。
可以添加更多选项卡到面板，例如通过界面
对于这种选项卡右键都会有更多操作
抽屉也可以添加更多选项卡,可以通过右键"移至顶部"来调整显示
功能面板
按Control+ Shift+P或Command+ Shift+ P(Mac),打开命令菜单,大致浏览支持的功能，注意后面的标识。
文本框前会附加一个字符">",删 除>字符并键入?以查看命令菜单中可用的其他操作。
images001-commandMenu.png
- Help Release notes - 版本都更新了什么；Report a DevTools issue - 反馈建议
- panel 在面板上显示
- Drawer 在抽屉里显示。方便统一打开，也可已单独打开。每一个功能针对性都很强。
- Global，全局的一些功能。
- Elments、Network、Performance、Mobile、Rendering、Sensors、Setting、Sources；这些在对应的页签里也能设置
键盘快捷键
2.浏览最新的网页
"你清一下缓存"，这可能是前端对测试、对后端对等说的最多的一句话。
当打开开发者着工具的时候，右键长按刷新按钮，会出现一个弹窗
右键"请求行"也有两个清除缓存的选项
或者勾选网络面板的停用缓存，注意勾选这个会影响网页的加载速度。对于开发来讲，热更新已经很大程度避免了缓存问题
或者Ctrl + Shift + P 打开命令菜单
images001-commandNavigation.png
在应用面板，也有本地存储空间、会话存储空间、IndexDB、Cookie等可以增删改查。
这里说一下本地存储空间的
当你发现操作与预期不符，或者对显示的内容有疑惑，可以尝试点击"黄色圈住的刷新按钮"
"紫色的清除按钮"可以清除全部的记录
点击单行记录可以预览，点击"蓝色的删除按钮"可以删除单行
双击密钥、值可以进行更改
点击灰色圈住的空白区域可以新增
3.如何下载网络上的资源
右键网页，选择"查看网页源代码",左上角有个"自动换行"，勾选后会方便查看。
浏览器会自上到下逐一解析这段文本，加载各种资源，最终使得网页呈现在我们面前。
网络面板
打开开发者工具的网络面板，再次刷新网页，请求的资源就会依次出现。
按住Ctrl，则可以同时选中多个类型，已"图片"类型为例，点击"请求行"则默认进入"预览"
右键图片，点击"图片另存为"即可下载图片，通常在网页中右键，也会找到此选项。
双击"请求行"则可在新窗口中打开图片
元素面板
网页就是通过一个个"标签"来呈现的，当你把鼠标放在"标签"上时，对应的元素会高亮
如果看不见元素，可以右键选择"滚动到视野范围内"
也可以通过网页区域跳转到对应的标签。方法一是右键网页，选择"检查"。
方法二是通过开发者工具的指针，点一下网页上想看的区域即可，也可通过快捷键Ctrl + Shift + C
当你选中一个标签时，可以鼠标右键"截取节点屏幕截图"，也可以通过Ctrl + Shift + P 打开命令菜单，输入"截图":
- 当前节点屏幕截图(需要选中节点)
- 截取区域屏幕截图(通过鼠标拖拽)
- 截取屏幕截图(可视区域)
- 截取完整尺寸的屏幕截图
不过，上述两种方式可能会造成迷惑，也可以在元素面板聚焦的时候按下Ctrl + F 进行搜素。
通过"设置按钮"，可以选择在鼠标悬浮的时候显示标尺
images001-chromeDevtoolsSettingBtn.png
比如<img
按下Enter 选中下一个，按下Shift + Enter,选中上一个。Ctrl + A可全选搜素词，方便快速删除。
右键"src="后面的部分，选择"新标签页打开"。
当网页中有正在播放的音频(<audio), 新标签页打开，即可通过浏览器自带的工具下载。
视频(<video)，如果是http开头也可通过上述方式下载，但现在大多数视频网站会通过类似blob: 等方式，如上方式是行不通。
理论上来讲，视频播放总要拉取数据。注意，上面的技巧仅供个人学习。
网友评论