玩转Chrome开发者工具2022(1/5)

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

比如

按下Enter 选中下一个,按下Shift + Enter,选中上一个。Ctrl + A可全选搜素词,方便快速删除。

右键"src="后面的部分,选择"新标签页打开"。

当网页中有正在播放的音频(

视频(

理论上来讲,视频播放总要拉取数据。注意,上面的技巧仅供个人学习。

你可能感兴趣的:(玩转Chrome开发者工具2022(1/5))