【Chrome开发者工具概览】

07-03 1542阅读

Chrome开发者工具概览

一、开启 Chrome 开发者工具
- 1. 如何打开开发者工具
- 2. 主要组成部分
- 二、Elements 栏的使用
- - 1. 修改页面元素
  - 2. 调整 CSS 样式
  - 3. 搜索功能
  - 三、Console 栏的探索
  - - 1. 执行 JavaScript
    - 2. 调试技巧
    - 3. 监听事件和修改元素
    - 四、利用 Sources 栏调试代码
    - - 1. 查看源代码
      - 2. 断点调试
      - 3. 单步执行和调用栈
      - 五、Network 栏的网络监控
      - 1. 分析请求
        2. 筛选和搜索
        一、开启 Chrome 开发者工具
        
        Chrome 开发者工具用于网页开发和调试。开发者可以有效地分析代码问题和优化网站性能。
        （图片来源网络，侵删）
        
        1. 如何打开开发者工具
        
        要启动 Chrome 开发者工具，最快捷的方式是通过键盘快捷键。在 Windows 或 Linux 上，按下 F12 或 Ctrl + Shift + I；在 macOS 上，使用 Cmd + Option + I。也可以在浏览器页面上任意元素上点击右键，选择“检查”（Inspect），或在 Chrome 菜单中选择“更多工具”->“开发者工具”。
        
        开发者工具的界面可以根据需要在多个位置显示：
        
        停靠在底部: 这是默认选项，工具将显示在浏览器窗口的底部。
        停靠在右侧: 对于宽屏监视器，这个选项可能更为合适，使得文档和工具并排显示。
        停靠在左侧: 这个选项适用于喜欢左侧操作栏的用户。
        作为独立窗口: 如果你有多个显示器，可能会喜欢将开发者工具放在不同的屏幕上。
        可以通过点击工具右上角的三个垂直点按钮，选择“停靠位置”来调整这些设置。
        
        2. 主要组成部分
        
        Chrome 开发者工具包含多个功能强大的标签栏：
        
        Elements（元素）: 这一栏显示网页的 HTML 结构和当前的 CSS 样式。开发者可以实时编辑 HTML 元素和样式，查看这些更改如何影响页面布局和表现。
        
        Console（控制台）: 提供了一个交互式环境，用于执行 JavaScript 表达式，显示从页面代码和脚本中生成的消息。
        
        Sources（资源）: 在这一栏中可以查看网页加载的所有文件，包括 HTML、CSS、JavaScript 以及其他资源如图片和字体文件。支持设置断点和进行代码步进调试。
        
        Network（网络）: 监控所有网络活动，记录加载的每个资源的详细信息，包括请求和响应头、传输数据和加载时间。
        
        Performance（性能）: 提供时间线视图，记录网站的运行时性能，帮助开发者识别可能影响用户体验的性能瓱颈。
        
        二、Elements 栏的使用
        
        Elements 栏是 Chrome 开发者工具中的核心部分之一，它直观地显示了当前网页的 DOM 树和所有 CSS 样式。这个功能允许开发者实时查看和修改网页的结构和样式，从而快速理解和调整网页设计。
        
        1. 修改页面元素
        
        通过 Elements 栏，开发者可以直接对网页的 HTML 元素进行增删改操作：
        
        编辑元素: 双击任何 HTML 元素，就可以进入编辑模式。可以修改标签的属性、添加新的属性或者改变标签的内部内容。这些更改会立即在浏览器中反映出来，非常适合进行快速样式调整或内容更新的测试。
        
        添加新元素: 通过右键点击某个元素，选择“Edit as HTML”（作为HTML编辑），然后在打开的编辑器中添加新的 HTML 代码。
        
        删除元素: 选中元素后按 Delete 键或右键选择“Delete Element”（删除元素），即可从 DOM 中移除该元素。
        
        2. 调整 CSS 样式
        
        在 Elements 栏中，除了 HTML 结构外，还可以查看和修改元素的 CSS 样式。在页面左侧选择一个元素后，右侧的“Styles”窗格会显示当前元素的所有 CSS 属性：
        
        修改样式: 直接点击并编辑任何现有的 CSS 属性，或在新的一行中添加新属性。
        切换样式: 通过勾选或取消勾选 CSS 属性前的复选框，可以快速启用或禁用特定的样式规则，这对比较不同样式效果非常方便。
        3. 搜索功能
        
        文本搜索: 按 Ctrl+F（Windows/Linux）或 Cmd+F（macOS），输入想查找的文本，如元素标签、类名或ID。
        CSS 选择器搜索: 输入具体的 CSS 选择器来定位元素。
        XPath 搜索: 输入具体的 XPath 路径，可以精确找到满足特定条件的元素。
        三、Console 栏的探索
        
        Console 栏是 Chrome 开发者工具中用于与 JavaScript 交互的强大环境。它不仅可以执行 JavaScript 代码，还能查看由网页或 JavaScript 代码产生的各种日志、警告和错误信息。Console 还提供了丰富的 API 来增强调试能力。
        
        1. 执行 JavaScript
        
        Console 栏可以作为一个实时的 JavaScript 解释器使用：
        
        基本命令执行: 在 Console 中直接输入 JavaScript 代码，如 console.log('Hello, world!'); 并按 Enter，即可立即看到代码执行结果。
        
        多行编辑: 如果需要编写多行代码，可以按 Shift + Enter 来换行，而不是直接执行代码。
        
        使用历史命令: Console 支持通过上下箭头键来浏览和重用之前输入的命令，方便快速重复测试或修改先前的代码。
        
        2. 调试技巧
        
        console.log(): 用于输出信息到 Console。它可以帮助追踪变量的值或程序的执行流程。
        
        console.error() 和 console.warn(): 这些方法分别用于输出错误和警告信息，它们在 Console 中以不同颜色显示，使得重要信息更加突出，便于调试中识别问题所在。
        
        console.table(): 此方法将数组或对象的内容以表格形式展示，适合于查看包含多个对象的数组或对象属性的详细列表，从而快速理解数据结构和内容。
        
        console.assert(): 这个方法用于进行断言测试，如果其表达式结果为 false，Console 将输出错误信息。
        
        console.group() 和 console.groupEnd(): 这些方法可以将输出的内容分组，使得相关的日志信息在 Console 中按组展开或折叠。
        
        清理 Console: 使用 console.clear() 或 Console 界面的清除按钮（一个圆形的图标），可以清空当前的 Console 输出。
        
        3. 监听事件和修改元素
        
        Console 还可以用来监听事件或临时修改页面元素的行为：
        
        监听事件: 使用如 monitorEvents(window, 'resize') 来监听窗口调整大小事件，任何触发的事件都会在 Console 中显示。
        
        修改元素: 可以通过 Console 动态修改页面元素的属性或应用样式，如 document.body.style.backgroundColor = 'red' 可以将页面背景设置为红色。
        
        四、利用 Sources 栏调试代码
        
        Sources 栏是 Chrome 开发者工具中专门用于查看和调试网页加载的资源（如 JavaScript、CSS 和 HTML 文件）的面板。
        
        1. 查看源代码
        
        在 Sources 栏中可以浏览到加载到当前网页中的所有资源文件。包括JavaScript 脚本、样式表、HTML 文件，以及其他如图片和字体文件等资源。
        
        文件结构: 文件以树状结构组织，类似于文件浏览器。
        源文件查看: 单击任何一个文件，它的内容就会在右侧的代码编辑器中显示。
        资源映射: 如果使用了源映射（Source Maps），Sources 栏可以直接显示原始的源代码文件，即便代码已经被压缩或转译。
        2. 断点调试
        
        设置断点后，当代码执行到断点的位置时，它会自动暂停，可以查看当时的程序状态，如变量值、调用栈和作用域链。
        
        设置断点: 在代码编辑器中，点击想要暂停执行的代码行左侧的空白区域，一个蓝色的图标会出现，表示在这一行设置了断点。
        断点类型:
        常规断点: 当程序执行到此行时总是暂停。
        条件断点: 只在满足特定条件时暂停。右键点击行号选择“Add conditional breakpoint…”，输入条件表达式。
        DOM 断点: 当特定的 DOM 元素发生变化时暂停，如属性修改、节点移除等。
        XHR 断点: 当发生特定的 XMLHttpRequest 调用时暂停，可以指定 URL 片段。
        管理断点: 在右侧的“Breakpoints”面板中，可以查看所有设置的断点。这里可以临时禁用或删除断点，而不需要在代码中直接修改。
        3. 单步执行和调用栈
        
        当代码在一个断点处暂停后，可以通过单步执行（Step over, Step into, Step out）来控制代码的执行流程，逐行检查代码执行的情况。
        
        Step over: 执行当前行，但不进入当前行调用的任何函数内部。
        Step into: 如果当前行调用了一个函数，则进入该函数内部并在第一行暂停。
        Step out: 从当前函数中跳出，返回到函数被调用的地方。
        可以查看“Call Stack”面板，它显示了函数调用的层次结构。
        
        五、Network 栏的网络监控
        
        Network 栏是 Chrome 开发者工具中专门用于监控和分析通过网络发送和接收的所有类型数据的功能区。它显示了网页加载和运行期间产生的所有网络请求，包括文件下载、API 调用、服务器请求等。通过详细的信息展示和丰富的过滤选项，Network 栏对于优化应用性能、诊断网络问题以及确保数据安全性非常有帮助。
        
        1. 分析请求
        
        在 Network 栏中，每个网络请求都以列表形式显示，点击任一请求，可以查看该请求的详细信息，这些信息分为几个部分：
        
        Headers: 显示请求头和响应头，包括请求方法（GET、POST 等）、状态码、路径、HTTP 协议版本以及任何自定义或标准的 HTTP 头部信息。
        Preview: 如果响应内容是可以解析的，如 JSON 或 HTML，这里将显示格式化后的预览。
        Response: 显示未格式化的响应数据，对于开发者来说，直接查看原始数据有时更为直接。
        Timing: 提供请求的时间线，包括请求发起、响应接收到完成的各阶段耗时。这对于识别性能瓶颈非常有用。
        2. 筛选和搜索
        
        Network 栏内置了强大的筛选功能，可以帮助你快速找到特定的网络请求，尤其是在面对大量数据时：
        
        筛选类型: Network 栏顶部提供了多个预设的过滤条件，如 XHR（用于过滤仅AJAX请求）、JS、CSS、Img 等，这些都是根据请求资源的类型进行分类。
        自定义过滤: 除了预设过滤外，还可以使用包含特定请求参数的表达式来进行更精确的搜索，如输入 domain:example.com 将仅显示来自 example.com 的请求。
        状态码筛选: 可以特别查找某种HTTP响应状态码的请求，如查找所有404错误，帮助快速定位资源缺失或链接错误的问题。