【Chrome开发者工具概览】

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 上,按下 F12Ctrl + 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错误,帮助快速定位资源缺失或链接错误的问题。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/862812.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

常见的反爬手段和解决思路(爬虫与反爬虫)

常见的反爬手段和解决思路(爬虫与反爬虫) 学习目标1 服务器反爬的原因2 服务器长反什么样的爬虫(1)十分低级的应届毕业生(2)十分低级的创业小公司(3)不小心写错了没人去停止的失控小…

阿里云docker镜像仓库

一、阿里云控制台搜:容器镜像服务 二、选个人版,企业版收费 设置命名空间 andy 设置仓库名 例如 llama 三、使用 1、登录 docker login --username*** registry.cn-hangzhou.aliyuncs.com 2、本地镜像打个tag docker tag [ImageId] registry.cn-hangzhou.al…

安装Docker运行TensorFlow容器-《MCU嵌入式AI开发笔记》(第9集)搜索柔贝特三哥视频同步更新

安装Docker运行 TensorFlow 容器-《MCU嵌入式AI开发笔记》(第9集)。目标:在国产MCU上运行AI深度学习算法,实现识别、判断等功能。搜索柔贝特三哥,《MCU嵌入式AI开发笔记》视频同步更新。 安装Docker运行 TensorFlow 容…

[推荐]有安全一点的网贷大数据信用查询网站吗?

在互联网金融日益发展的今天,网贷大数据查询网站成为了许多人申贷前的必备工具。随着使用这些网站的人群越来越多,安全问题也逐渐浮出水面。最近,就有许多用户反馈自己的个人信息在网贷大数据查询网站上被泄露。为了解决这一问题,…

对冲基金。。。

对冲基金是一种投资基金,它们通常采用多种策略来实现盈利,同时尽可能地减少风险。这些策略可能包括使用衍生品、杠杆和多种金融工具来进行投资。对冲基金的目标是提供绝对回报,即无论市场条件如何,都力求实现正收益。以下是一些关…

reactjs18 中使用路由技巧

react18 版本中,路由的用法发生了变化,react18 版本中,路由由 react-router-dom 包提供。与 react-router 包不同的是,react-router-dom 包提供了 createBrowserRouter 方法,该方法可以创建路由对象。总之,…

原码、反码、补码、移码的计算转换

文章目录 正数负数原码 & 反码反码 -> 补码原码 <-> 补码移码 <- Other 方法总结练习 正数 原码 和 反码 和 补码 都是一样的不会发生变化 因此&#xff0c;计算的时候先看第一位 符号位 &#xff0c;只要能发现是正数&#xff0c;三者都不变 移码 在补码基础…

《每天5分钟用Flask搭建一个管理系统》第5章:表单处理

第5章&#xff1a;表单处理 5.1 Web表单的基本概念 Web表单是收集用户输入的一种方式。在Flask中&#xff0c;表单通常与HTML表单结合使用&#xff0c;并通过POST方法提交。 示例代码&#xff1a;HTML表单 <!-- templates/login.html --> <form method"post&…

深入理解JVM的即时编译器(JIT)

在Java的世界里&#xff0c;即时编译器&#xff08;Just-In-Time Compiler&#xff0c;简称JIT&#xff09;是一个至关重要的组件&#xff0c;它负责将Java字节码转换成本地机器码&#xff0c;以提高程序的执行效率。本文将深入探讨JIT编译器的工作原理&#xff0c;并通过代码示…

飞凌嵌入式技术创新日(北京站)圆满落幕,共创嵌入式技术的美好未来

2024年6月25日下午&#xff0c;飞凌嵌入式技术创新日&#xff08;北京站&#xff09;在北京中关村皇冠假日酒店盛大举行。此次活动汇聚了近300位嵌入式技术领域的专家和企业代表&#xff0c;共享嵌入式技术的盛宴&#xff0c;共创嵌入式技术的美好未来&#xff01; 进入活动现场…

美国抗攻击服务器有哪些可靠的解决方案

美国抗攻击服务器在面对日益严重的网络安全威胁时&#xff0c;需要采取一系列可靠的解决方案来确保服务器的稳定运行和数据安全。以下是一些科普性质的抗攻击服务器解决方案&#xff1a; 一、流量清洗与过滤 流量清洗是美国抗攻击服务器应对DDoS攻击的重要措施。当检测到异常流…

DC-DC变换电路的研究与设计

通过使用MATLAB进行电路仿真以及通过制作实物进行验证&#xff0c;通过BUCK电路设计DC-DC来达到我们预期的效果&#xff0c;资料获取到咸&#x1f41f;&#xff1a;xy591215295250 \\\或者联系wechat 号&#xff1a;comprehensivable 设计要求&#xff1a;设计一个DC-DC 电源&a…

[Go Web] Kratos 使用的简单总结

文章目录 1.Kratos 简介2.传输协议3.日志4.错误处理5.配置管理6.wire 1.Kratos 简介 Kratos并不绑定于特定的基础设施&#xff0c;不限定于某种注册中心&#xff0c;或数据库ORM等&#xff0c;所以您可以十分轻松地将任意库集成进项目里&#xff0c;与Kratos共同运作。 API -&…

如何找合适的C++项目给自己的简历加分?

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「嵌入式的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01; C的工作多种多样&#x…

端到端的自动驾驶--论坛分析

从Tesla开始&#xff0c;越来越多的企业和研究机构开始投身于端到端的自动驾驶模型&#xff0c;但是目前端到端的缺点是黑盒、不可读、不可解释。观看一些讲解和论坛后&#xff0c;个人觉得可解释的端到端模型将是未来的趋势。 视觉语言–大模型可以提供一些场景下的决策&#…

云原生之使用Docker部署RabbitMQ消息中间件

云原生之使用Docker部署RabbitMQ消息中间件 一、RabbitMQ介绍1.1 RabbitMQ简介1.2 RabbitMQ特点1.3 RabbitMQ使用场景 二、检查Docker环境2.1 检查Docker版本2.2 检查操作系统版本2.3 检查Docker状态 三、下载RabbitMQ镜像四、部署RabbitMQ服务4.1创建挂载目录4.2 运行RabbitMQ…

【Qt】QMessageBox 各种对话框的默认显示效果

1. 函数原型 void about(QWidget *parent, const QString &title, const QString &text)void aboutQt(QWidget *parent, const QString &title QString())QMessageBox::StandardButton critical(QWidget *parent, const QString &title, const QString &…

使用li标签实现数据列表效果(鼠标移动和选中时均有阴影效果)

文章目录 一、最终效果&#xff1a;二、完整页面代码 一、最终效果&#xff1a; 选中的数据有阴影效果&#xff0c;鼠标移动时也有阴影效果 二、完整页面代码 list-style-type: none是去掉无序标签前的点的样式 <template><div><div class"my-new-lis…

【React篇】父组件渲染时避免重复渲染子组件的3种处理方法

在 React 中&#xff0c;父组件渲染时要避免重复渲染子组件&#xff0c;可以使用以下方法&#xff1a; 使用 React.memo&#xff08;仅适用于函数式组件&#xff09;或 PureComponent&#xff08;适用于类组件&#xff09;&#xff1a; 这些方法可以帮助你创建在接收到新的 pr…

图论·搜索最短路径

例题地址 搜索最短路径 在网格图中按照特定路线搜索&#xff0c;搜索方式基于bfs/dfs需要搜索出一条源点与终点最短的路径 核心思路 无启发式函数&#xff1a;bfs/dfs有启发式函数&#xff1a;dijsktra算法,A*(Astar)… 个人理解 启发式函数&#xff1a;相当于根据点的权…