浏览器开发者工具详解

汉宝先生
75 阅读12分钟

浏览器开发者工具详解

一.什么是浏览器开发者工具

浏览器开发者工具是浏览器提供给开发者用于开发、调试和优化网页及 Web 应用程序的一组工具集合

截止到2025-2-27日，主流的浏览器都可以通过**设置更改其开发者工具的语言为简体中文**,修改完毕后会提示重启开发者工具

打开方式：

  1. 大部分浏览器通过快捷键F12打开
  2. safari浏览器(苹果公司)通过 Command+Option+I

主要功能：

  1. 元素（Elements）

    • 功能概述：主要用于查看和修改网页的 HTML 结构与 CSS 样式。可以选中页面上的任何元素，在工具中实时查看其标签、属性、类名、ID 等信息，也能直接编辑这些内容，方便调试页面布局和样式问题。
    • 应用场景：当网页出现样式错乱、布局不合理等问题时，可通过元素工具快速定位到对应的 HTML 元素和 CSS 样式规则，进行调整和优化。

  2. 控制台（Console）

    • 功能概述：是开发者输出调试信息和与网页脚本交互的重要工具。可以使用console.log()等方法在代码中输出变量值、函数执行结果等，同时也会显示浏览器抛出的错误和警告信息，还能直接输入 JavaScript 代码并执行。
    • 应用场景：在开发过程中，用于快速检查变量状态、调试函数逻辑，以及查看网页脚本运行时的错误，便于快速定位和解决问题。

  3. 源码（Sources）

    • 功能概述：能够展示网页所包含的所有源代码，包括 HTML、CSS、JavaScript 文件以及相关的资源文件。支持在工具中直接打开和编辑这些文件，还可以设置断点进行调试，查看代码执行过程中的变量值和调用栈等信息。
    • 应用场景：在进行代码调试和开发时，通过源码工具可以方便地查看和修改代码，跟踪代码执行路径，找出逻辑错误和性能问题。

  4. 网络（Network）

    • 功能概述：用于监控浏览器与服务器之间的网络通信。可以实时查看所有网络请求和响应的详细信息，如请求的 URL、方法、请求头和响应头、响应状态码、加载时间等，还能分析资源的加载顺序和依赖关系。
    • 应用场景：当网页出现加载缓慢或数据请求失败等问题时，通过网络工具可以分析是哪个请求出现问题，以及资源加载是否合理，从而进行优化。

  5. 性能（Performance）

    • 功能概述：主要用于分析网页的性能指标。能够记录页面加载过程中的各项数据，如页面加载时间、脚本执行时间、渲染时间、帧率等，以图形化的方式展示性能瓶颈所在，帮助开发者找出可优化的点。
    • 应用场景：在优化网页性能时，通过性能工具可以直观地了解页面的性能状况，针对性地采取优化措施，如减少资源加载时间、优化脚本执行等。

  6. 内存（Memory）

    • 功能概述：用于监测网页的内存使用情况。可以查看页面占用的内存大小，分析内存中的对象分布，检测是否存在内存泄漏等问题，还能通过堆快照等功能查看特定时刻内存中的对象信息。
    • 应用场景：当网页出现卡顿或内存占用过高的情况时，利用内存工具可以分析内存使用情况，找出导致内存问题的原因，进行优化。

  7. 应用（Application）

    • 功能概述：主要用于管理和查看网页使用的各种存储和应用相关的信息，如本地存储（Local Storage）、会话存储（Session Storage）、Cookie、IndexedDB 等，还能查看网页的缓存策略和 Service Worker 等相关信息。
    • 应用场景：在开发涉及数据存储和缓存的功能时，通过应用工具可以方便地查看和管理存储的数据，调试与存储相关的功能，以及优化缓存策略。

  8. 审计（Audits）

    • 功能概述：可以对网页进行多方面的审计，包括性能、可访问性、最佳实践、SEO 等。会根据一系列标准和规则对网页进行检查，并生成详细的审计报告，列出存在的问题和改进建议。
    • 应用场景：在网页开发完成后或进行优化时，使用审计功能可以全面了解网页在各个方面的表现，按照建议进行改进，提高网页的质量和用户体验。

开发者工具栏截图：

  1. 英文

image-20250227104845079.png

  1. 中文

image-20250227104916400.png

二.Elements 元素(最重要的面板)

位于工具栏的第一项，可以实时的对标签及其样式和事件进行操作和查看

其主要包含：标签操作(html相关)、样式操作(css相关)、事件操作(js相关)

1.标签操作

  • 选中某个标签右键选项中的菜单页功能介绍

image-20250227105444450.png

dd attribute 添加属性

Edit attribute 修改属性

Edit as HTML 编辑 html

Delete element 删除节点

Copy

  • Cut element 剪切节点（仅能在内部 paste）
  • Copy element 复制节点
  • Paste element 粘贴在选中节点内部的最后位置
  • Copy outerHTML 复制节点（暂不了解区别）
  • Copy selecter 复制 CSS 选择器
  • Copy XPath 复制 XPath 选择器

Hide element 隐藏节点

Force state 添加鼠标状态

Break on 为 DOM 结构打断点，当其改变状态时，会顿住

Expand recursively 展开所有节点

Collapse children 收缩子节点

Scroll into view 使页面滚动到选中节点位置

Focus 获取详细属性和样式信息等

  • 标签搜索功能 ctrl+f 打开搜索框可对特定信息进行检索

image-20250227160114835.png

2.样式(Styles)

选中某个元素后，在**样式栏中可以方便快捷的查看根据权重排序后的层叠样式表**，并支持开发者随时修改某个选择器中的样式

样式栏主要功能图解

image-20250227112557751.png

3.计算样式(Computed)

Computed（计算样式）功能主要用于展示元素最终应用的计算样式信息

  1. 其展示了当前结构盒子模型的具体信息

image-20250227142854267.png

  1. 支持使用分类的方式将元素的最终的属性和属性值列出，并支持搜索功能

    分类的顺序是

    • 盒模型相关属性
    • 定位与布局属性
    • 排版属性（于文本相关）
    • 视觉属性（背景与边框相关）
    • 动画与变换属性
    • 其他杂项属性(未归入上述分类的)

    在每个大分类的内部，属性按照字母表顺序排列，方便开发者定位

image-20250227144018060.png

4.布局(Layout)

layout面板主要以方便开发者分析网格布局(Grid) 和弹性布局(Flexbox) 为主，生成相关信息

  1. 以夸克浏览器默认首页为例的图解如下

image-20250227152301192.png

5.事件侦听(Event Listeners)

事件侦听面板提供以下功能

  1. 事件监听器列表：展示选中元素的所有事件的监听器如click、mouseover等，以及其详细信息，监听函数代码位置等
  2. 过滤功能：提供筛选功能，特定状态下的事件
  3. 展示特定框架添加的事件监听器（如：vue、react）
  4. 删除功能：可以移除事件监听器

image-20250227154858479.png

6.dom断点(DOM Breakpoint)

  1. DOM 断点面板的作用

在浏览器开发者工具中，DOM 断点面板是一个强大的调试工具，主要用于帮助开发者定位和调试与 DOM（文档对象模型）元素相关的代码问题。具体来说，它有以下作用：

  • 定位 DOM 变化的源头：当网页中的某个 DOM 元素发生变化（如节点被移除、属性被修改、子节点被添加或删除等），但你不清楚是哪段代码导致了这些变化时，DOM 断点可以在变化发生的瞬间暂停代码执行，让你能够查看调用栈、变量状态等信息，从而快速定位到引发变化的代码位置。
  • 调试复杂交互逻辑：在一些具有复杂交互逻辑的网页中，DOM 元素的状态会频繁发生变化。通过设置 DOM 断点，你可以逐步观察这些变化的过程，理解代码的执行流程，找出潜在的逻辑错误。
DOM 打断点的步骤（ Chrome 浏览器为例）

  1. 打开开发者工具并切换到 Elements 面板

    • 可以通过右键单击网页空白处，选择 “检查”；或者使用快捷键（Windows：Ctrl + Shift + I；Mac：Command + Option + I）打开开发者工具。
    • 打开开发者工具后，切换到 “Elements” 面板。

  2. 选择要设置断点的 DOM 元素

    • 在 “Elements” 面板中，找到你想要设置断点的 DOM 元素。可以通过鼠标在页面上直接点击元素，也可以在 HTML 结构中手动查找。

  3. 设置断点类型

    • 选中目标元素后，右键单击该元素，在弹出的菜单中，选择 “Break on”（断点类型），这里有三种断点类型可供选择：

      • Subtree modifications（子树修改） ：当该元素的子节点被添加、删除或修改时，代码会暂停执行。例如，当你向一个 <ul> 列表中添加或删除 <li> 元素时，就会触发这个断点。
      • Attributes modifications（属性修改） ：当该元素的任何属性（如 class、id、src 等）被修改时，代码会暂停执行。比如，你动态修改了一个 <img> 元素的 src 属性，就会触发此断点。
      • Node removal（节点移除） ：当该元素本身被从 DOM 树中移除时，代码会暂停执行。

  4. 触发断点并调试

    • 设置好断点后，当满足相应的断点触发条件时，浏览器会自动暂停代码执行，此时开发者工具会切换到 “Sources” 面板，显示当前的调用栈和代码执行位置。
    • 你可以查看变量的值、单步执行代码、检查调用栈等，以找出引发 DOM 变化的代码逻辑。
    • 调试完成后，若要移除断点，可以在 “Elements” 面板中右键单击设置了断点的元素，取消相应的断点类型勾选；或者在开发者工具的 “DOM Breakpoints” 侧边栏中，取消对应断点的勾选。

7.属性(Properties)

支持查看选中的标签所有的生效属性，支持搜索功能和展示全部功能，功能干相对好理解很简单。

比如对于 <img> 元素，会展示 src、alt、width、height 等属性及其对应的值。这些属性与元素在 HTML 代码里所设置的属性是对应的，方便开发者查看和确认元素的基本配置信息。

image-20250227160433344.png

三.Console 控制台

作为最常用的面板，console控制台常用功能如下

  1. 查看和过滤控制台信息，控制台有搜索功能和信息分类功能，一般主要看报错信息
  2. 控制台行内可以直接执行JavaScript代码语句，因此可以作为JavaScript API的查看器，如:在控制台中输入 Math + 回车 那么控制台返回的类信息中会包含Math下的所有方法

image-20250227162909614.png

右上角小齿轮中可以展示更多特定的信息，图解如下

image-20250227163022970.png

四.Source源码

源码面板主要用于查看js代码和调试程序

主要用来查看源代码以及调试 js

image-20250227163728341.png

调试控制

image-20250227164041930.png

源码章节的部分内容转自： 作者：众里寻千百 链接：juejin.cn/post/684490…

五.Network网络

从发起网页页面请求 Request 后分析 HTTP 请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。

此面板包括5块:

  • 区域① --> Controls 控制Network的外观和功能。
  • 区域② --> Filters 控制Requests Table具体显示哪些内容。
  • 区域③ --> Overview 显示获取到资源的时间轴信息。
  • 区域④ --> Requests Table 按资源获取的前后顺序显示所有获取到的资源信息，点击资源名可以查看该资源的详细信息。
  • 区域⑤ --> Summary 显示总的请求数、数据传输量、加载时间信息。

img

区域① Controls信息如下

  • 网络日志录制
  • 日志清理
  • 捕获屏幕
  • 过滤器
  • 视图切换
  • 保留日志开关
  • Cache开关
  • 网络连接开关
  • 网速阀值

区域④ Requests Table 信息如下

未列出部分，可在区域④的表头部分右击点出

  • Name 资源名称，点击名称可以查看资源的详情情况，包括Headers、Preview、Response、Cookies、Timing。

  • Method 请求的方法类型

  • Status HTTP状态码。

  • Remote Address 远程地址

  • Type 请求的资源MIME类型。

  • Initiator 标记请求是由哪个对象或进程发起的（请求源）。

    • 鼠标移入可显示详情

  • Cookie 当前请求附带的cookie数量

  • Priority 优先级

  • Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from disk cache)

  • Time 请求或下载的时间，从发起Request到获取到Response所用的总时间。

  • Waterfull 显示所有网络请求的可视化瀑布流(时间状态轴)，点击时间轴，可以查看该请求的详细信息

区域⑤ Summary 信息如下

  • DOMContentLoaded 从开始到页面上DOM完全加载并解析完毕所花费的时间（不会等待CSS、图片、子框架加载完成），在 Waterfull 以一条 浅蓝色的线 标注。
  • Load 从开始到页面上所有DOM、CSS、JS、图片完全加载完毕所花费的时间，在 Waterfull 以一条 浅红色的线 标注。
  • requests 成功的请求数量/总的请求数量
  • transferred 所有资源的大小
  • Finish 从页面开始到最后一次服务器交互完成，所花费的时间

查看具体资源的详情

通过点击某个资源的 Name可以查看该资源的详细信息，显示信息如下

  • Headers 该资源的HTTP头信息。
  • Preview 根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。
  • Response 显示HTTP的Response信息。
  • Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
  • Timing 显示资源在整个请求生命周期过程中各部分花费的时间。

网络章节内容全部转自： 作者：众里寻千百 链接：juejin.cn/post/684490…

avatar
文章
阅读
粉丝