Chrome DevTools 常用面板攻略

在这里插入图片描述

文章目录

  • 前言
  • 一、概述
    • 1.1 简介
    • 1.2 DevTools 初步了解
  • 二、设备模式(Device Mode)
    • 2.1 面板概述
    • 2.2 设备切换
  • 三、元素面板(Elements)
    • 3.1 面板概述
    • 3.2 编辑样式
      • 3.2.1 添加、启用和停用 CSS 类
      • 3.2.2 添加或移除动态样式
      • 3.2.3 快速向样式规则添加背景色或颜色
      • 3.2.4 使用 Color Picker 修改颜色
    • 3.3 编辑 DOM
      • 3.3.1 查看元素事件侦听器
  • 四、控制台面板(Console)
    • 4.1 消息堆叠
    • 4.2 选择执行环境
  • 五、源代码面板(Sources)
    • 5.1 面板概述
    • 5.2 格式化混淆代码
    • 5.2 断点调试
      • 5.2.1 代码行断点
      • 5.2.2 条件代码行断点
      • 5.2.3 事件监听器断点
      • 5.2.4 异常断点
  • 六、Network 面板
    • 6.1 面板概述
    • 6.2 Requests Table 区域
    • 6.3 查看 HTTP 相关信息
      • 6.3.1 查看网络请求的参数
  • 七、Performance 模块
    • 7.1 面板概述
  • 八、Memory 面板
  • 九、Application 面板
  • 十、Security 面板
  • 小结

前言

  我们经常用Chrome Dev Tools 来开发调试,但其实只是用了他一点点的功能。Chrome Dev Tools绝对是前端性能优化中性能分析的一把利器,而这个功能因为大家平时也相对较少用到,今天就是想将用 Chrome Dev Tools 进行页面性能分析的技能分享给大家,希望大家能在优化自己项目性能的时候更得心应手。

一、概述

1.1 简介

  Chrome 开发者工具是一套内置于 Google Chrome 中的Web开发和调试工具,可用来对网站进行迭代、调试和分析。打开 Chrome 开发者工具的方式有:

  • 在Chrome菜单中选择 更多工具 > 开发者工具
  • 在页面元素上右键点击,选择 “检查”
  • 使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)

1.2 DevTools 初步了解

  说实话,DevTools的UI可能有点让人不知所措……有这么多标签!但是,如果你花一些时间去熟悉每个选项卡,了解什么是可能的,你可能会发现DevTools可以大大提高你的工作效率。在网页鼠标右击-检查 或者 F12 打开DevTools,Chrome DevTools 主要包含以下10个部分:
在这里插入图片描述

序号面板说明
1Device Mode-设备模式打造移动设备优先的完全自适应式网站。注意:该模式不可替代真实设备测试
2Elements-元素面板元素面板,查看Web页面的HTML与CSS,最重要的是可以双击元素,对当前页面进行修改
3Console-控制台面板控制台面板。在这里可以查看到 JS 的错误信息,也可以执行键入的JS脚本
4Sources-源代码面板要用于查看web应用的资源列表和查看及调试js代码
5Network-网络面板页面中各种资源请求的情况。
这里能看到资源的名称、状态、使用的协议、资源类型、资源大小、资源时间线等情况
6Performance-性能面板页面各项性能指标的火焰图。这里能看到白屏时间、FPS、资源加载时间线、内存变化曲线等等信息
7Memory-内存面板可以记录某个时刻的页面内存情况,一般用于分析内存泄露
8Application-应用面板记录Web页面加载的所有资源信息,包括存储数据、缓存数据、图片、字体、JS脚本、CSS样式表等
9Security-安全面板安全面板,查看Web页面的安全和认证情况,确保网站上正确地实现了HTTPS
10Customize and control DevTools主菜单

二、设备模式(Device Mode)

2.1 面板概述

  使用 Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站,切换 Device Mode 按钮可以打开或关闭 Device Mode。
在这里插入图片描述

通过该视图控件,你可以设定下面两种模式:

  1. 自适应。 使视口可以通过任意一侧的大手柄随意调整大小

  2. 特定设备。 将视口锁定为特定设备确切的视口大小,并模拟特定设备特性
    在这里插入图片描述

2.2 设备切换

默认是pc端的显示方式,点击后以移动端格式显示,再次点击便退回到pc端显示格式。
在这里插入图片描述

三、元素面板(Elements)

3.1 面板概述

  Chrome DevTools 的 Elements 面板是一个非常强大的工具,可帮助您深入了解和调试网页的 HTML、CSS 和 JavaScript。其可用于查看或修改HTML元素的属性、编辑DOM、编辑CSS属性、监听事件、断点等。也可以直接点击元素进行CSS、html修改,此修改只会在本地生效,不会上传到服务器端,所以可以用来调试前端代码。
在这里插入图片描述

3.2 编辑样式

使用 Styles 窗格可以修改与元素关联的 CSS 样式,如下图所示:
在这里插入图片描述

3.2.1 添加、启用和停用 CSS 类

  点击 .cls 按钮可以查看与当前选定元素关联的所有 CSS 类。 从这里,可以执行以下操作:启用或停用当前与元素关联的类、向元素添加新类,如下图所示:
在这里插入图片描述

3.2.2 添加或移除动态样式

  我们可以在元素上手动设置动态伪类选择器,例如 :active、:focus、:hover 和 :visited。可以通过两种方式在元素上设置动态状态:

  • 在 Elements 面板内右键点击某个元素,然后从菜单中选择目标伪类,将其启用或停用。
    在这里插入图片描述

  • 在 Elements 面板中选择元素,然后在 Styles 窗格中点击 :hov 按钮,使用复选框启用或停用当前选定元素的选择器。

    在这里插入图片描述

3.2.3 快速向样式规则添加背景色或颜色

  Styles 窗格提供了一个用于向样式规则快速添加 text-shadow、box-shadow、color 和 background-color 声明的快捷方式。样式规则的右下角有一个由三个点组成的图标。您需要将鼠标悬停到样式规则上才能看到这个图标:

在这里插入图片描述

将鼠标悬停到此图标上可以调出添加 text-shadow、box-shadow、color 和 background-color 声明的快捷方式。

3.2.4 使用 Color Picker 修改颜色

  要打开 Color Picker,请在 Styles 窗格中查找一个定义颜色的 CSS 声明(例如 color: blue)。 声明值的左侧有一个带颜色的小正方形。 正方形的颜色与声明值匹配。 点击小正方形可以打开 Color Picker:

在这里插入图片描述

您可以通过多种方式与 Color Picker 交互:

在这里插入图片描述

  1. 取色器。 通过鼠标悬停到某种颜色上去获取颜色值。
  2. 当前颜色。 当前值的可视表示。
  3. 当前值。 当前颜色的十六进制、RGBA 或 HSL 表示。
  4. 调色板。 当前生成的几组颜色。
  5. 着色和阴影选择器。
  6. 色调选择器。
  7. 不透明度选择器。
  8. 颜色值选择器。 点击可以在 RGBA、HSL 和十六进制之间切换。
  9. 调色板选择器。 点击可以选择不同的模板。

3.3 编辑 DOM

  Elements 面板中的 DOM 树视图可以显示当前网页的 DOM 结构,通过 DOM 更新实时修改页面的内容和结构。

3.3.1 查看元素事件侦听器

在 Event Listeners 窗格中查看与 DOM 节点关联的 JavaScript 事件侦听器,如下图所示:

在这里插入图片描述

  • 启用 Ancestors 复选框时查看祖先实体事件侦听器,即除了当前选定节点的事件侦听器外,还会显示其祖先实体的事件侦听器
  • 启用 Framework listeners 复选框时查看框架侦听器,DevTools 会自动解析事件代码的框架或内容库封装部分,然后告诉您实际将事件绑定到代码中的位置。

四、控制台面板(Console)

  在开发期间,可以使用控制台面板记录诊断信息,或者使用它作为 shell 在页面上与 JavaScript 交互,可以查看错误信息、打印调试信息、调试js代码,还可以当作JavaScript API查看。

4.1 消息堆叠

  如果一条消息连续重复,而不是在新行上输出每一个消息实例,控制台将“堆叠”消息并在左侧外边距显示一个数字。此数字表示该消息已重复的次数,如下图所示:

在这里插入图片描述

如果倾向于为每一个日志使用一个独特的行条目,请在 DevTools 设置中启用 Show timestamps,如下图所示:

在这里插入图片描述

由于每一条消息的时间戳均不同,因此,每一条消息都将显示在各自的行上,如下图所示:

在这里插入图片描述

4.2 选择执行环境

以下屏幕截图中以蓝色突出显示的下拉菜单称为 Execution Context Selector

在这里插入图片描述

  通常,会看到此环境设置为 top(页面的顶部框架)。其他框架和扩展程序在其自身的环境中运行。要使用这些其他环境,就需要从下拉菜单中选中它们。例如,如果要查看 <iframe> 元素的日志输出,并修改该环境中存在的某个变量,就需要从 Execution Context Selector 下拉菜单中选中该元素。

五、源代码面板(Sources)

  在源代码面板中设置断点来调试 JavaScript ,或者通过Workspaces(工作区)连接本地文件来使用开发者工具的实时编辑器。调试JavaScript,保存在DevTools中所做的更改,保存并运行JavaScript片段,并将您在DevTools中所做的更改保存到磁盘。也用来查看加载的各种资源文件,比如js、css、图片等。

5.1 面板概述

打开Source面板,我们就会看到如下界面:

在这里插入图片描述

  根据上图三个区域对应分别是:资源区、工作区、控制台,其中,资源区分为如下部分:

名称描述
Page展示当前Web页面所包含的资源文件,在这里对工作区中的代码进行修改并不会保留,刷新页面就会重置
Filesystem当我们的Web页面在本地时,我们就可以通过Filesystem选项卡,将本地项目文件夹添加到DevTools的工作区,
以直接将对页面的修改保存到本地,还提供对本地文件进行管理(添加文件、删除文件、修改文件等)。
Overrides
Contentscript用于存放的是Chrome扩展的“注入”页面的JS脚本的独立空间
Snippets可以在这里创建代码片段,并独立运行和调试,刷新页面不会丢失

  而在工作区中,我们点击行号可以添加/移除断点,在断点上打开右键菜单可以禁用断点,以及设置断点触发条件进行编辑(比如可以设置断点在程序循环多少次后触发)

在这里插入图片描述

  而控制区这里提供有调试操作按钮,以及一些调试信息的显示,顶部的几个按钮便是调试代码的核心按钮:

在这里插入图片描述

  上图调试按钮红框内,从左到右,各个图标表示的功能分别为:

在这里插入图片描述
在这里插入图片描述

  下面我们介绍一下调试按钮下面的各项功能

名称描述
Watch跟踪监控变量,点击"+"号添加变量名。
Call Stack函数调用栈,显示执行路径。
Scope查看属性作用域。
Beakpoints查看属性作用域。
XHR/fetch Breakpoints当XHR的请求URL包含某一特定的字符串时所触发的断点。
DOM Breakpoints当改变一个节点或其子元素时所触发的断点。
Global Listeners全局监听器,绑定在 window 对象上的事件。
Event Listener Breakpoints事件发生时所触发的断点。

5.2 格式化混淆代码

在某些情况下,我们需要对混淆的代码做一定的调试,但这是我们看到的代码是乱成一团,毫无格式可言:

在这里插入图片描述

那我们可以点击下方的格式化按钮对代码进行格式化:
在这里插入图片描述

5.2 断点调试

在这里插入图片描述

5.2.1 代码行断点

  当我们知道需要调试的代码的确切位置的时候,使用代码行断点。想要使用 DevTools 设置代码行断点,则需要点击 Sources 选项卡,打开包含您想要调试的代码行的文件并找到该代码行,点击左边的行号,这样一个蓝色图标就显示在行号上,表明该代码行设置好断点了。

在这里插入图片描述

  当然我们也可以在代码中使用 debugger 来设置代码行断点,效果和在 DevTools 中设置是一样的。

5.2.2 条件代码行断点

  当我们知道需要调试的代码的确切位置且在满足条件下才调试的时候,使用条件代码行断点。想要设置条件的代码行断点,这就需要点击 Sources 选项卡,打开包含想要调试的代码行的文件并找到该代码行,右键点击左边的行号,选择添加条件断点。然后代码行下面会显示一个对话框,在对话框中输入你的条件,按Enter激活断点,行号上出现橙色图标。

在这里插入图片描述

5.2.3 事件监听器断点

  当想要暂停事件侦听器代码时,使用事件侦听器断点。想要设置事件监听器断点,这就需要点击 Sources 选项卡,展开 “Event Listener Breakpoints” 窗格(DevTools显示事件类别),选中这些类别中的一个可以暂停该类别的任何事件,或者展开类别并检查特定事件。
在这里插入图片描述

5.2.4 异常断点

  当您想暂停引发捕获或未捕获异常的代码行时,使用异常断点。想要设置异常断点,就需要点击 Sources 选项卡,点击暂停,启用后变成蓝色。如果除了未捕获的异常外,还想暂停捕获的异常,请选中 “Pause on caught exceptions” 复选框。

在这里插入图片描述

六、Network 面板

6.1 面板概述

  每个文件的加载、请求的发送都是一次网络交互,在Network面板中能够看到所需资源文件是否被加载、请求的接口到底返回了没有、能够知道哪个资源没载完从而导致整个web的呈现等等。Netwrok面板中会记录应用程序的每一次网络交互信息,每次交互的详细时间、HTTP请求头和响应头、cookies、WebSocket的数据等等……按区域划分大概分为如下几个区域:
在这里插入图片描述

  • Controls - 控制 Network 功能选项,以及一些展示外观
  • Filters - 控制在 Requests Table 中显示哪些类型的资源
  • Overview - 此图表显示了资源检索时间的时间线。如果看到多条竖线堆叠在一起,则说明这些资源被同时检索
  • Requests Table - 此表格列出了检索的每一个资源。 默认情况下,此表格按时间顺序排序,最早的资源在顶部。点击资源的名称可以显示更多信息。 提示:右键点击 Timeline 以外的任何一个表格标题可以添加或移除信息列
  • Summary - 可以一目了然地看到页面的请求总数、传输的数据总量、加载时间

6.2 Requests Table 区域

标题栏的对应描述:

  • Name(名称): 资源的名称。
  • Status(状态): HTTP 状态代码。
  • Type(类型): 请求的资源的 MIME 类型。
  • Initiator(发起): 发起请求的对象或进程。它可能有以下几种值:
    • Parser(解析器): Chrome 的 HTML 解析器发起了请求。
    • Redirect(重定向): HTTP 重定向启动了请求。
    • Script(脚本): 脚本启动了请求。
    • Other(其他): 一些其他进程或动作发起请求,例如用户点击链接跳转到页面,或在地址栏中输入网址。
  • Size(大小): 响应头的大小(通常是几百字节)加上响应数据,由服务器提供。
  • Time(时间): 总持续时间,从请求的开始到接收响应中的最后一个字节
  • Timeline/Waterfall(时间轴): 显示所有网络请求的可视化统计信息

6.3 查看 HTTP 相关信息

6.3.1 查看网络请求的参数

  可以通过点击 query string parameters (查询字符串参数)旁边的 view URL encoded (查看 URL 编码)或 view decoded (查看解码)链接,查看 URL 编码或解码格式的 query string parameters (查询字符串参数)。在使用 postman 复制相关入参时尤其实用。
在这里插入图片描述

七、Performance 模块

7.1 面板概述

  在 Performance 面板可以查看页面加载过程中的详细信息,比如在什么时间开始做什么事情,耗时多久等等。相较于 Network 面板,不仅可以看到通过网络加载资源的信息,还能看到解析 JS、计算样式、重绘等页面加载的方方面面的信息,如下图所示:

在这里插入图片描述

  1. 录制一段时间
  2. 重启页面,录制整个页面加载的过程。比较常用
  3. 清除这一次性能录制的记录
  4. 上传页面性能录制的数据
  5. 下载页面性能录制的数据
  6. 多次录制时可选择要展示的性能记录
  7. 是否捕捉页面加载过程的截图
  8. 是否记录内存变化
  9. 垃圾回收,点击了即进行一次垃圾回收

八、Memory 面板

记录页面跟随时间的内存使用情况,如果需要比时间轴面板提供的更多信息,可以使用“配置”面板,例如跟踪内存泄漏。

在这里插入图片描述

九、Application 面板

查看一些本地存储、会话存储、已索引数据库、Cookie、缓存、帧等。

在这里插入图片描述

十、Security 面板

调试当前网页的安全和认证等问题。

在这里插入图片描述

  如果网页是安全的,则会显示这样一条消息:This page is secure (valid HTTPS).。通过点击View certificate可以查看main origin的服务器证书信息。如果网页是不安全的,则会显示:This page is not secure.。

小结

把今天最好的表现当作明天最新的起点…….~

  投身于天地这熔炉,一个人可以被毁灭,但绝不会被打败!一旦决定了心中所想,便绝无动摇。迈向光明之路,注定荆棘丛生,自己选择的路,即使再荒谬、再艰难,跪着也要走下去!放弃,曾令人想要逃离,但绝境重生方为宿命。若结果并非所愿,那就在尘埃落定前奋力一搏!

在这里插入图片描述

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

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

相关文章

如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)

首先我们vue文件的样式都是写在<style lang"less" scoped></style>标签中的&#xff0c;加scoped是为了使得样式只在当前页面有效。那么问题来了&#xff0c;看图&#xff1a; 我们正常写的所有样式&#xff0c;都会被加上[data-v-23d425f8]这个属性&…

XYplorer:双栏多标签文件资源管理器的高效选择

在文件管理的世界中&#xff0c;效率和便捷性是用户追求的关键。XYplorer作为一款专为Windows设计的文件资源管理器&#xff0c;以其独特的双栏多标签浏览、强大的文件搜索功能、以及高度可定制的界面&#xff0c;为用户提供了一种全新的文件管理体验。 XYplorer&#xff1a;速…

微信小程序开发学习笔记《11》导航传参

微信小程序开发学习笔记《11》导航传参 博主正在学习微信小程序开发&#xff0c;希望记录自己学习过程同时与广大网友共同学习讨论。导航传参 官方文档 一、声明式导航传参 navigator组件的url属性用来指定将要跳转到的页面的路径。同时&#xff0c;路径的后面还可以携带参数…

第七讲 单片机驱动彩色液晶屏 控制RA8889软件:显示文字:Part3.自建字库

单片机驱动TFT彩色液晶屏系列讲座 目录 第一讲 单片机最小系统STM32F103C6T6通过RA8889驱动彩色液晶屏播放视频 第二讲 单片机最小系统STM32F103C6T6控制RA8889驱动彩色液晶屏硬件框架 第三讲 单片机驱动彩色液晶屏 控制RA8889软件:如何初始化 第四讲 单片机驱动彩色液晶屏 控…

Flink定制化功能开发,demo代码

前言&#xff1a; 这是一个Flink自定义开发的基础教学。本文将通过flink的DataStream模块API&#xff0c;以kafka为数据源&#xff0c;构建一个基础测试环境&#xff1b;包含一个kafka生产者线程工具&#xff0c;一个自定义FilterFunction算子&#xff0c;一个自定义MapFunctio…

redis夯实之路-集群详解

Redis有单机模式和集群模式。 集群是 Redis 提供的分布式数据库方案&#xff0c;集群通过分片( sharding )来实现数据共享&#xff0c;并提供复制和故障转移。集群模式可以有多个 master 。使用集群模式可以进一步提升 Redis 性能&#xff0c;分布式部署实现高可用性&#xff…

Linux中断 -- 中断应答、嵌套、

接上文&#xff0c;本文继续介绍Linux软件部分逻辑。 参考内核版本&#xff1a;kernel-4.19 目录 1.中断信号在各级中断控制器中的应答 2.supports_deactivate_key意义 3.中断嵌套 1.中断信号在各级中断控制器中的应答 本章主要从内核软件层面来看各中断控制器对中断信号处…

Android开发基础(三)

Android开发基础&#xff08;三&#xff09; 本篇将介绍Android权限管理。 Android权限管理 Android权限管理主要是为了保护用户的隐私和设备的安全性&#xff1b; 在Android系统中&#xff0c;应用在请求权限时必须进行明确的申请&#xff0c;根据权限的保护级别&#xff0…

软件测试最新项目合集【商城、外卖、银行、金融等等.......】

​项目一&#xff1a;ShopNC商城 项目概况&#xff1a; ShopNC商城是一个电子商务B2C电商平台系统&#xff0c;功能强大&#xff0c;安全便捷。适合企业及个人快速构建个性化网上商城。 包含PCIOS客户端Adroid客户端微商城&#xff0c;系统PC后台是基于ThinkPHP MVC构架开发的…

NAND新一代接口Separate Command Address (SCA) 简介

通过NAND Flash总线传输的信号分为三种类型&#xff1a;命令&#xff08;Commands&#xff09;、地址&#xff08;Addresses&#xff09;和数据&#xff08;Data&#xff09;。这些信号利用DQ[7:0]时间分时复用技术&#xff0c;在不同的时间段分别进行传输。其中&#xff0c;数…

BikeDNA(五)参考数据的内在分析1

BikeDNA&#xff08;五&#xff09;参考数据的内在分析1 该笔记本分析用户提供的给定区域的参考自行车基础设施数据集的质量。 质量评估是“内在的”&#xff0c;即仅基于一个输入数据集&#xff0c;并且不使用数据集外部的信息。 对于将参考数据集与相应 OSM 数据进行比较的外…

redis — redis cluster集群模式下如何实现批量可重入锁?

一、redis cluster 集群版 在Redis 3.0版本以后,Redis发布了Redis Cluster。该集群主要支持搞并发和海量数据处理等优势,当 Redis 在集群模式下运行时,它处理数据存储的方式与作为单个实例运行时不同。这是因为它应该准备好跨多个节点分发数据,从而实现水平可扩展性。具体能…

Java内存结构

前文&#xff1a; 《Java8之类的加载》 《Java8之类加载机制class源码分析》 写在开头&#xff1a;本文为学习后的总结&#xff0c;可能有不到位的地方&#xff0c;错误的地方&#xff0c;欢迎各位指正。 JVM 在执行 Java 程序的过程中会把它所管理的内存划分为若干个不同的数…

Ubuntu server配置ssh远程登录

使用如下命令进行安装 apt-get install ssh 安装好后启动 service ssh start 然后查看运行状态 然后用本机ping虚拟机 关闭本机和虚拟机防火墙 ufw disable 然后打开Xshell进行连接

14、MySQL高频面试题

1、内连接和外连接的区别 内连接和外连接都是数据库进行多表联查时使用的连接方式&#xff0c;区别在于二者获取的数据集不同 内连接指的是使用左表中的每一条数据分别去连接右表中的每一条数据&#xff0c;仅仅显示出匹配成功的那部分 外连接有分为左外连接和右外连接 左外…

重磅!OpenAI正式发布,自定义ChatGPT商店!

1月11日凌晨&#xff0c;OpenAI在官网正式发布了&#xff0c;自定义GPT商店&#xff0c;可以帮助用户找到目前最好用、流行的自定义ChatGPT助手。 在2024年第一季度&#xff0c;OpenAI将启动GPT 开发者收入计划。首先&#xff0c;美国地区的开发者将根据用户对其 GPT 的使用情…

day-07 统计出现过一次的公共字符串

思路 用哈希表统计words1和words2中各个字符串的出现次数&#xff0c;次数皆为1的字符串符合题意 解题方法 //用于存储words1中各个字符串的出现次数 HashMap<String,Integer> hashMap1new HashMap<>(); //用于存储words2中各个字符串的出现次数 HashMap<Stri…

小程序系列-5.WXML 模板语法

一、数据绑定 1、在 data 中定义页面的数据 动态绑定内容&#xff1a; 动态绑定属性&#xff1a; 2. Mustache 语法的格式 3. Mustache 语法的应用场景 4. 三元运算 5.算数运算 二、 事件绑定 1. 什么是事件&#xff1f; 2. 小程序中常用的事件 3. 事件对象的属性列表 4.…

Linux基础工具的使用(yum,vim,gcc,g++,gdb,make/makefile)【详解】

目录 linux软件包管理器-yum什么是软件包&#xff1f;查找软件包如何安装软件卸载软件 linux编辑器 - vimvim的基本概念vim模式之间的切换vim命令模式各命令汇总vim底行模式各命令汇总 Linux编译器 - gcc/ggcc/g的作用gcc/g选项预处理编译汇编链接静态库与动态库 Linux调试器 -…

详细分析Java中的@Transactional注解

目录 前言1. 基本知识2. 常用属性3. Demo4. 总结 前言 Transactional 是 Spring 框架中用于管理事务的注解。 该注解来源于Spring&#xff0c;对于Spring的基础知识可看我之前的文章&#xff1a; Spring框架从入门到学精&#xff08;全&#xff09; 该注解也可用在xxl-job框架…