谷歌开发者工具基础培训后疑问分享

一、F12是不是抓包工具？感觉和抓包工具差不多？ 答:f12跟抓包工具charles两者进行对比来讲，都是属于抓包工具，具有抓包工具，只是面对的的对象不一样，开发者工具面对的是web浏览器，而charles面对的是web，app均可，由于涉及的对象不一样，所具体的功能特性也不一样，但从功能的丰富性charles的功能会比较大强大；两者的工具的使用主要根据测试对象来选择’ 二、F12是接口工具？ 答：非接口工具，是调试工具，不具有接口测试功能，可以跟postman配合使用 三、如何用它来简单排查前端问题？ 答：通过抓包数据和性能加载两个角度来判断是否是前端问题，如抓包数据以后，发现返回的数据是对的，但前端展示不对，就属于前端问题；在开发者工具里面通过性能模块进行测试，发现的问题，基本都是前端问题； 详细如下： JavaScript 错误排查：控制台可以显示页面上的 JavaScript 错误，测试人员可以点击错误信息查看错误详情，从而快速定位问题所在，并进行修复。 网络请求排查：控制台可以显示页面上的网络请求，测试人员可以查看请求状态、请求时间、请求头和响应信息等，从而判断是否存在网络请求问题。 DOM 操作排查：控制台可以让测试人员直接操作页面上的 DOM 元素，例如修改元素属性、添加或删除元素等，从而检查页面是否存在 DOM 操作问题。 性能优化排查：控制台可以显示页面的性能指标，例如加载时间、资源大小、资源加载顺序等，测试人员可以从中发现性能瓶颈，并进行优化。 四、能不能概括几种常见的测试使用F12的情况？ 答：seo测试，前端文字多少显示问题，元素布局，样式，交互，需要在元素模块进行测试 页面加载，返回格式错误，返回图片大小问题，不同网络页面加载测试，跨域，缓存测试，需要在网络模块进行测试 内存模块的内存泄露； 检查不同网站的兼容性测试 具体查看以下常识介绍 五、测试的过程中如何从F12中去寻找问题出现在哪里？ 答：通过打开console的日志，可定位问题；源码模块的源码提示也可以定位问题 六、能否介绍网络面板的使用？ 一、模拟不同网络环境，从而进行网络性能测试。步骤： 打开谷歌开发者工具，切换到 "网络" 面板。 点击 "禁/停用缓存" 以确保每次请求都是新的请求。 在工具栏上找到 "网络条件"，点击 "未选择网络条件/已停用节流模式" 选择要模拟的网络类型，例如 "Slow 3G" 或 "Offline"。 刷新页面或者重新加载资源，测试页面在不同网络情况下的性能表现。 二、分析网络请求 最简单的就是抓包了，这个具体培训的操作中已讲

常识介绍： 元素面板：元素面板是谷歌开发者工具中最常用的模块之一，它可以帮助测试人员定位页面中的元素，以便编写更准确和可靠的测试脚本。测试人员通常会使用元素面板进行以下场景的测试： 1.元素定位和选择器调试：在测试自动化中，定位页面元素是很常见的任务。元素面板可以帮助测试人员精确定位页面中的元素，以便编写更准确和可靠的测试脚本。 2.测试 CSS 布局和响应式设计：测试人员可以使用元素面板修改和调试页面的 CSS 样式和布局，以便测试页面在不同屏幕尺寸和设备上的响应式表现，确保页面在各种情况下都能够正确显示。

控制台面板：控制台面板可以帮助测试人员查找和调试 JavaScript 代码中的错误，以及监控页面中的网络请求和日志输出。测试人员通常会使用控制台面板进行以下场景的测试： 1.JS 调试：测试人员可以使用控制台面板对 JavaScript 代码进行调试和分析，以帮助识别代码错误和性能问题，例如代码死循环、内存泄漏等。 2.监控网络请求：测试人员可以使用控制台面板监视页面中的网络请求和响应，以便测试页面在不同情况下的表现和响应，例如测试页面的 API 请求是否正确、测试页面的性能等。

源代码面板：源代码面板可以帮助测试人员查看和修改页面的源代码，以便测试页面在不同情况下的表现和响应。测试人员通常会使用源代码面板进行以下场景的测试： 1.查看页面源代码：测试人员可以使用源代码面板查看页面的源代码，以帮助了解页面的结构和逻辑。 2.修改页面源代码：测试人员可以使用源代码面板修改页面的源代码，以便测试页面在不同情况下的表现和响应，例如测试特定页面的错误、测试页面的表现等。

网络面板：网络面板可以帮助测试人员分析页面加载和资源请求的时间、顺序、大小等信息，以确定页面性能方面的问题。测试人员通常会使用网络面板进行以下场景的测试： 1.分析页面性能：测试人员可以使用网络面板分析页面加载和资源请求的时间、顺序、大小等信息，以确定页面性能方面的问题，例如页面加载速度缓慢、请求过多等。 2.模拟网络环境：测试人员可以使用网络面板模拟不同的网络环境和速度，以便测试页面在不同网络条件下的表现和响应。 3.分析网络请求：测试人员可以使用网络面板分析页面中的网络请求和响应，以便测试页面的 API 请求是否正确、测试页面的性能等。测试人员还可以检查请求头和响应头，检查状态码和响应内容，以确保页面在各种情况下都能够正确显示和呈现。

性能面板：性能面板可以帮助测试人员分析页面的性能指标，例如页面加载时间、渲染时间、资源加载时间等。测试人员通常会使用性能面板进行以下场景的测试： 1.分析页面性能：测试人员可以使用性能面板分析页面的性能指标，以确定页面性能方面的问题，例如页面加载速度缓慢、渲染过程中出现的问题等。 2.分析 JavaScript 和 CSS：测试人员可以使用性能面板分析 JavaScript 和 CSS 的性能指标，以确定是否存在性能瓶颈和优化方案。

内存面板：内存面板可以帮助测试人员分析页面的内存使用情况，以确定是否存在内存泄漏和性能瓶颈。测试人员通常会使用内存面板进行以下场景的测试： 1.分析内存使用情况：测试人员可以使用内存面板分析页面的内存使用情况，以便测试页面是否存在内存泄漏和性能瓶颈。 2.查找内存问题：测试人员可以使用内存面板查找页面中的内存问题，例如内存泄漏、不必要的内存占用等，以便及时修复这些问题。

应用面板：应用面板可以帮助测试人员管理和调试页面的缓存、数据存储、鉴权等问题，以确保页面在各种情况下都能够正确显示和呈现。测试人员通常会使用应用面板进行以下场景的测试： 1.调试缓存问题：测试人员可以使用应用面板调试页面的缓存问题，例如清空缓存、禁用缓存、设置缓存策略等，以确保页面在各种情况下都能够正确显示和呈现。 2.管理本地存储：测试人员可以使用应用面板管理页面的本地存储，例如存储和清除本地存储的数据，以确保页面在各种情况下都能够正确显示和呈现