一、浏览器开发者工具 (DevTools) 是什么？

浏览器开发者工具 后续文章

二、元素审查（Elements）与样式调试三、接口抓包（Network）四、网络模拟与请求阻塞

已发布在公众号【软件测试老吴】，关注并发送【浏览器】即可阅读

这不是开发的专属工具，而是测试工程师洞察Web世界的“显微镜”和“手术刀”。

在测试工作中可能经常遇到的场景：

【UI适配】 问题，只用肉眼判断，无法保证问题已被修复。【交互逻辑】 测试时，出现点击按钮后页面长时间转圈然后失败。如果在bug里只是描述此这么描述，开发很难进一步排查【性能体验】 用户反馈“商品列表页滚动浏览时非常卡顿”。如何定位问题

浏览器开发者工具（DevTools），正是让我们摆脱这种模糊状态，让测试变得精准、高效的终极神器。

一、浏览器开发者工具 (DevTools) 是什么？

浏览器开发者工具（DevTools） 是一套内置于所有现代浏览器（Chrome, Edge, Firefox, Safari等）中的Web开发和分析工具集。

它允许任何人（对，包括你，测试工程师！）查看和调试网页的内部结构。

很多人误以为这是开发同学的专属工具，但DevTools也是现代测试工程师，尤其是Web 测试工程师的必备技能。

对于测试工程师而言，这是一个能够深入Web应用内部、查看详细运行状态的超级控制台。

二、 如何打开 DevTools ？

方法1：快捷键（最推荐）

F12：通用打开方式。Ctrl + Shift + I (Windows/Linux) / Cmd + Option + I (Mac)：快速打开。

方法2：右键菜单

在网页任意位置点击鼠标右键，选择“检查”或“检查元素”。

方法3：浏览器菜单点击浏览器右上角的菜单按钮(⠇) -> 更多工具 -> 开发者工具。

三、不同的展示位置

在 DevTools 点击右上角的“更多”按钮，展开菜单中的“Dock side”选项，就是控制工具展示位置开关。有几种展示位置：

底部停靠DevTools ：窗口附着在浏览器窗口的底部。右侧停靠 (Right)：DevTools 窗口附着在浏览器窗口的右侧。左侧停靠 (Left)：DevTools 窗口附着在浏览器窗口的左侧。分离/浮动 (Undocked)：DevTools 在一个独立的窗口中，不与浏览器窗口附着。

三、 DevTools 界面介绍

打开后，开发者工具会出现在浏览器右侧。

主要功能区域介绍：

顶部工具栏：顶部的一排选项卡，用于切换不同的工具面板。及设备模拟图标（用于响应式测试）、元素选择工具等。这是DevTools的核心功能区域，包含多个功能面板：

Elements（元素面板）：查看和编辑页面的HTML结构和CSS样式Console（控制台面板）：显示日志信息并执行JavaScript命令Sources（源代码面板）：调试JavaScript代码Network（网络面板）：监控所有网络请求Performance（性能面板）：分析页面运行时性能Application（应用面板）：管理存储、缓存等数据Security（安全面板）：检查安全问题

主内容区：根据选择的面板显示相应内容，如HTML结构、网络请求列表等。底部工具栏（按ESC键打开）：提供更多辅助功能。

首次打开，你可能会被密密麻麻的界面震撼到。别担心，这个系列会带你一步步了解它。

今天就在你测试的网站上按一次F12，熟悉一下打开方式和界面布局。我们下一期见！

浏览器开发者工具 后续文章

二、元素审查（Elements）与样式调试三、接口抓包（Network）四、网络模拟与请求阻塞

已发布在公众号【软件测试老吴】，关注并发送【浏览器】即可阅读