ChromeDevtools是Web测试时每天都要用的工具，它提供了很多调试功能，可以帮助我们更好的定位问题。而我们平时使用的功能只是它全部功能的子集，很多功能并没用到过。

作为高频使用的工具，还是有必要好好掌握的。测试时在日常工作中提BUG时，如果能提供有用的信息给到开发工程师，可以降低和开发工程师之间的沟通成本，巧用开发者工具也能间接体现自身具备一定的技术专业性，所以今天就分享Chrome Devtools 的常用功能。

一、认识 Devtools

1、Devtools的用处

2、Devtools功能拆解

二、Devtools 8个常用面板

1、Elements（元素）

2、Console（控制台）

3、Sources（源代码）

4、Network

5、Performance（性能分析）

6、Memory（内存）

7、Application （应用信息）

8、Security（安全分析）

三、Devtools高频用途

1、调整Devtools位置

2、定位前后端Bug

3、查看/编辑元素

4、移动端适配

最好我这里给你们分享一下我所积累和真理的文档和学习资料有需要是领取就可以了

1、学习思路和方法

2、想学习却无从下手，该如何学习？

3、软件测试/自动化测试【全家桶装】学习中的工具、安装包、插件....

4、有了安装包和学习资料，没有项目实战怎么办，我这里都已经准备好了往下看

5、如何领取这些配套资料和学习思路图，以及项目实战源码。

最后送上一句话：

一、认识 Devtools

1、Devtools的用处

大体来说，Devtools对于不同人员来说，有如下作用：

前端开发：开发预览、远程调试、性能调优、Bug跟踪、断点调试等；
后端开发：网络抓包、开发调试Response；
测试：服务端API数据是否正确、审查页面元素样式及布局、页面加载性能分析、自动化测试；
其他：安装扩展插件，如AdBlock、Gliffy、Axure等；

2、Devtools功能拆解

首先打开Devtools：

在 Chrome 菜单中选择更多工具 → 开发者工具；
在页面元素上右键点击，选择检查；
Windows: ctrl + shift + i
Mac: cmd + option + i；

我们在平时工作中，主要用到以下8个功能：

Elements ：页面dom元素；
Console ：控制台；
Sources ：页面静态资源；
Network ：网络；
Performance ：设备加载性能分析；
Application ：应用信息，PWA/Storage/Cache/Frames；
Security ：安全分析；
Audits ：审计，自动化测试工具；

不同浏览器的“开发者工具”在界面上会有差异，但功能基本一致。掌握某种浏览器的用法后，便可以操作其他浏览器。

二、Devtools 8个常用面板

1、Elements（元素）

使用Elements元素面板可以自由操作 DOM 和 CSS 来迭代布局和设计页面。查看网页所有元素的代码和属性。可以在Elements标签直接手动修改任一元素的属性和样式，修改后能立即在浏览器里面得到反馈。

检查和调整页面；
编辑样式；
编辑 DOM；

2、Console（控制台）

在开发期间，可以使用Console控制台面板记录诊断信息，查看JavaScript对象、查看调试日志信息或异常信息。通常控制台有JS报错，直接找到前端开发，再由前端开发根据具体问题进行调试，并解决问题。

使用控制台面板；
命令行交互；

3、Sources（源代码）

Sources也称之为资源，当前打开的网页页面所涉及到的所有源代码都会出现在该栏目，包括：样式、css、图片、js文件等。在源代码面板中设置断点来试 JavaScript ，或者通过 Workspaces （工作区）连接本地文件来使用开发者工具的实时编辑器

断点调试；
调试混淆的代码；
使用开发者工具的 Workspaces （工作区）进行持久化保存；

4、Network

使用Network网络面板了解请求和下载的资源文件并优化网页加载性能。查看网络信息，包括：请求地址、Status（响应状态码）、Type（响应数据类型）、Size（响应数据大小）、Time（响应时间）以及Waterfall（重要相关区域的请求耗时），也可以筛选出不同数据类型的URL。

网络面板基础；
了解资源时间轴；
网络带宽限制；

主要记录前端往服务器发的所有的http请求信息，每个请求发送了什么数据，服务器是否正常响应请求；如果响应请求，在Network标签下看到响应状态码、响应数据等。

5、Performance（性能分析）

Performance记录和查看网站生命周期内发生的各种事件，提高页面的运行时性能。

6、Memory（内存）

Memory内存面板主要用于：

跟踪内存泄漏；
JavaScript CPU 分析器；
内存堆区分析器；

7、Application （应用信息）

Application用于检查加载的所有资源：

IndexedDB 与 Web SQL；
本地和会话存储， cookie；
应用程序缓存，图像，字体和样式表；

8、Security（安全分析）

Security主要用于：

证书问题；
安全相关问题；

三、Devtools高频用途

接下来我们再来学一些常用的小技巧吧，都是一看就会的那种，相信大家平时工作中有所接触。

1、调整Devtools位置

点击Dock Side，可以调整开发者工具的位置，4个图标分别对应：

（1）将开发者工具独立窗口；

（2）停靠于左侧；

（3）停靠于底部；

（4）停靠于右侧；

如果是测试移动端（例如：H5），采用左/右布局会比较方便；如果是测试Web端问题，采用底部布局会比较方便。

2、定位前后端Bug

分析一个BUG是属于前端还是后端，通常看两个标签：Console（控制台）、Network（网络）。

例如：

（1）点击某个按钮，页面没有任何反应：在Console（控制台）处看到有看到js错误。这里是没有报错的

在Network（网络）处，没有看到前端对后端的功能接口发起调用，即点击按钮时没有看到返回数据，大多数情况下，这个BUG属于前端。

（2）点击某个按钮，页面没有任何反应：在Console（控制台）处看到没有js错误。

在Network（网络）处，看到请求返回的状态码是500。此时可以判断这个BUG是后端导致的，可以知道后端开发直接解决问题。常见的状态码：200、404、500，作为测试基本了解。

3、查看/编辑元素

点击Devtools的【箭头】（或者使用快捷键Ctrl+Shift+C）进入选择元素模式，在页面中选择需要查看的元素，就可以在开发者工具Elements标签处直接定位到该元素源代码的具体位置。

可以修改字体的大小、颜色、背景色，以及图片的高度、宽度等等，刷新页面之后就会恢复原状。

例如：在日常工作中，希望调整一下某个页面的字体颜色，可以自行在Elements做调整，调整后可以在浏览器立即看到效果。当知道需要如何调整之后，再将相关信息给到UI设计师/前端开发，从而避免反复调整。

4、移动端适配

点击的Devtools【手机图标】（或者使用快捷键Ctrl+Shift+M）可以换成模拟移动端浏览的状态。

可选择不同型号手机，以及不同的分辨率样式来查看页面，从而观察页面在不同手机、不同分辨率下的显示效果。

5、下载图片/视频

在日常搜索图片时，如果存在某张图片不支持直接保存，可以通过“开发者工具”进行保存。点击F12，再打开对应的页面，选择【Network】，再选择【Img】，能想要保存的图片，双击或者直接复制URL，打开对应的网址就可以下载图片。

以上就是今天的全部内容，后续分享Devtools更多实用技能，希望对大家有所帮助，也希望大家多多留言、点赞、在看、转发四连爱❤️ 支持。

作为测试和开发调试的工具，你真的了解浏览器开发工具DevTools吗？相关推荐

浏览器上方的工具栏不见了_「ie工具条」IE浏览器没有工具菜单栏怎么办 IE浏览器菜单栏消失不见了解决方法 - seo实验室...
ie工具条 IE浏览器工具菜单栏消失不见了解决方法键盘快速查看如果遇到IE不显示工具栏和菜单栏.如下图所示最简单的办法通过按下键盘ALT建,可以快捷打开IE菜单栏显示.(如果鼠标移动走之后,菜单 ...
怎么在火狐中调试html,如何利用火狐浏览器开发工具调试网页颜色搭配？
如何利用火狐浏览器开发工具调试网页颜色搭配?如果你对网站的整体颜色不满意,完全可以在火狐浏览器的Web开发工具中使用查看器来调整预期的效果,再将色码实施到该位置,这样就可以很方便的处理颜色调试问题. ...
RT-Thread 模拟器 simulator 搭建 LVGL 的开发调试环境
前言 RT-Thread 当前的版本:4.1.0,通过简单的配置就可以支持最新的LVGL 图形库版本,LVGL图形库以软件包的方式加入工程 LVGL 可以认为是当前开源.免费的优秀GUI的图形库,对内 ...
EZ430 Chronos 如何提高开发调试效率探讨
2019独角兽企业重金招聘Python工程师标准>>> EZ430 Chronos 如何提高开发调试效率探讨 TI的 EZ430 Chronos 开发套件在调试程序时需要把手表拆开, ...
浏览器开发调试工具的秘密 - Secrets of the Browser Developer Tools
来源:GBin1.com 如果你是一个前端开发人员的话,正确的了解和使用浏览器开发工具是一个必须的技能. Secrets of the Browser Developer Tools是一个帮助大家了解 ...
浏览器开发者工具控制台重播教程
浏览器开发者工具控制台重播教程浏览器开发者工具控制台重播教程具体步骤如下. 先使用edge浏览器登录返校服务模块,如下图所示. 点击"学生报备制出校申请",进入如下图所示界面. ...
嵌入式开发/调试辅助工具
开发辅助工具开发环境组成通常开发环境由三部分组成: 构建环境:包括代码编写,程序编译,版本控制等功能. 调试环境:用于定位问题的辅助工具集测试环境:用于验证目标程序是否满足用户要求的显性需求和隐性需 ...
web应用调试工具_如何使用浏览器开发人员工具调试渐进式Web应用程序
web应用调试工具 Interested in learning JavaScript? Get my ebook at jshandbook.com 有兴趣学习JavaScript吗? 在jshan ...
java开发调试定位分析工具大全
Java是一种非常强大的编程语言,自问世以来就广受欢迎.作为现今十分流行的移动平台--Android的核心语言,它大大促进了移动通信行业的发展.因此可以肯定,随着Android平台的不断扩张,Java ...

作为测试和开发调试的工具，你真的了解浏览器开发工具DevTools吗？

一、认识 Devtools

1、Devtools的用处

2、Devtools功能拆解

二、Devtools 8个常用面板

1、Elements（元素）

2、Console（控制台）

3、Sources（源代码）

4、Network

5、Performance（性能分析）

6、Memory（内存）

7、Application （应用信息）

8、Security（安全分析）

三、Devtools高频用途

1、调整Devtools位置

2、定位前后端Bug

3、查看/编辑元素

4、移动端适配

作为测试和开发调试的工具，你真的了解浏览器开发工具DevTools吗？相关推荐

最新文章

热门文章