Chrome DevTools中的骚操作

news2024/11/27 12:49:36

今天来分享 Chrome DevTools 中一些非常实用的功能和调试技巧！

  1. 保留日志

    当我们刷新完页面之后，通常控制台的 Console 面板就会被清空。如果想保留控制台的日志，就可以在设置中勾选 Preserve log 选项以保留控制台中的日志。

    在这里插入图片描述

  2. 代码覆盖率

    我们可以打开设置，在Experiments中勾选Record coverage while performance tracing选项。

    在这里插入图片描述

    在面板下方的Coverage面板中点击红色按钮以记录页面的代码覆盖率：

    在这里插入图片描述

    代码覆盖率使用动态分析法来收集代码运行时的覆盖率，让开发者知道有代码在页面上真正的使用。动态分析是指在应用运行状态下收集代码执行数据的过程，换句话说，覆盖率数据就是在代码执行过程中通过标记收集到的。

  3. 显示重绘

    在浏览器的开发者工具中可以通过开启显示重绘选项以查看页面在执行操作时哪些元素会发生重绘。在控制台右上角三个点中的 More tools 选项中开启 Rendering 选项卡：

    在这里插入图片描述

    开启 Rendering（渲染）选项后，开启 Paint flashing：

    在这里插入图片描述

    当刷新页面时，显示绿色的区域就是重新绘制区域。

  4. 检查动画

    Chrome 的开发者工具不仅可以调试样式，还可以调试动画，可以在控制台右上角三个点中的 More tools 选项中开启 Animations 选项卡：

    在这里插入图片描述

    当页面的动画执行时，就会在时间轨道上查看所有的动画，点击其中一个动画可以懂得执行过程以及时间轴：

    在这里插入图片描述

    我们可以在时间轴上定位到任一时刻的动画帧，也可以拖动左右两端的圆点来修改动画的延迟和周期，修改之后可以在属性面板看到对应的 CSS 样式。

  5. 截图

    Chrome 浏览器内置了截图功能，可以在浏览器开发者工具中使用 Ctrl+Shift+P（Windows）或者Command+Shift+P（Mac）快捷键打开搜索来查找screenshot：

    在这里插入图片描述

    这里有四个选项：

    • 第一个：截取自选区域；
    • 第二个：截取整个网页；
    • 第三个：截取当前节点；
    • 第四个：截取当前屏幕。

    截图完成后自动下载到下载目录，打开浏览器的下载框或本机的下载目录即可看到图片。

  6. Local Overrides

    我们可以使用本地资源覆盖网页所使用的资源，比如可以使用本地 CSS 文件覆盖网页的css文件，修改样式。将本地的文件夹映射到网络，在 Chrome 开发者功能里面对 CSS 样式的修改都会直接改动本地文件，页面重新加载，使用的资源也是本地资源，达到持久化的效果。

    在这里插入图片描述

    **详见：**https://developer.chrome.com/blog/new-in-devtools-65/#overrides

  7. 全局搜索代码

    Chrome浏览器为我们提供了全局搜索的概念，可以点击开发者工具右上角的三个点，点击Search选项，在Search面板中搜索所需关键字即可，点击搜索结果即可跳到对应文件的代码行：

    在这里插入图片描述

  8. 事件监听断点

    有时应用会在用户发生交互时出现问题，这时我们就可以添加事件监听器添加断点来捕获这些事件以检查交互时的问题。可以在Source面板右侧的Event Listener Breakpoints中勾选相应的事件：

    在这里插入图片描述

  9. DOM 操作断点

    当页面的内容发生变化时，如果想要知道是哪些脚本影响了它，就可以给DOM设置断点。我们可以右键点击需要设置断点的DOM元素，在弹出的菜单中点击Break on以选择合适的断点。

    在这里插入图片描述

    可以看到，Break on中有三个选项：

    • Subtree Modifications：子节点（内容、属性）修改通知，常用在子节点内容发生变化后，来定位源码；
    • Attributes Modifications：当前节点的属性修改通知，常用在节点的 className 等属性被修改后，来定位源码了；
    • Node Removal：当前节点移动时通知，常用在节点被移除时，定位源码。

  10. 异步请求的断点

    XHR breakpoints 可以用于异步请求的断点，点击加号即可添加断点规则，输入请求 的 URL 地址（片段），会在请求地址包含对应字符串的异步请求发出的位置自动停止：

    在这里插入图片描述

  11. CSS Overview

    在 Chrome 的管理面板中，开启 CSS Overview 面板之后，就可以查看当前网站的样式信息了，包括颜色信息、字体信息、媒体查询等。当我们需要优化页面的 CSS 时，这个功能就派上用场了。除此之外，还可以使用该功能方便地查看其他优秀网站的样式信息。

    在这里插入图片描述

    默认情况下，该面板是不开启的，可以通过以下步骤来开启此功能：

    1. 在任意页面打开 Chrome 浏览器的 DevTools；
    2. 单击更多选项 -> More tools -> CSS Overview。

    在这里插入图片描述

    那该如何使用 CSS Overview 面板呢？很简单，只需要点击 Capture overview 按钮来生成页面的 CSS overview报告即可。如果想重新运行CSS Overview，只需点击左上角的清除图标，然后再点击 Capture overview 按钮即可。

    在这里插入图片描述

    CSS Overview 报告主要由五部分组成：

    （1）Overview summary： 页面 CSS 的高级摘要

    ​ 在这里插入图片描述

    （2）Colors： 页面中的所有颜色。颜色按背景颜色、文本颜色等用途分组。它还显示了具有低对比度问题的文本。

    在这里插入图片描述

    每种颜色都是可点击的。我们可以单击它以获取使用该颜色的元素列表。将鼠标悬停在列表中的元素上就可以突出显示页面中对应的元素。单击列表中的元素就可以在“Elements”面板中打开该元素。

    在这里插入图片描述

    （3）Font info：字体信息， 页面中的所有字体及其出现，按不同的字体大小、字体粗细和行高分组。与颜色部分类似，可以单击以查看受影响元素的列表。

    在这里插入图片描述

    （4）Unused declarations： 未使用的声明，包含所有无效的样式，按原因分组。

    在这里插入图片描述

    （5）Media queries： 媒体查询，页面中定义的所有媒体查询，按出现次数最高的排序。单击可以查看受影响元素的列表。

    在这里插入图片描述

  12. CSP违规断点

    Chrome DevTools CSP 违规断点可以捕捉到与CSP违规有关的可能的异常，并在代码中指出这些异常。

    CSP 即内容安全策略，它允许限制网站中的某些行为以提高安全性。例如，CSP 可用于禁止内联脚本或禁止eval，这两者都可以减少跨站脚本 (XSS)攻击的攻击面。

    一个特别新的 CSP 是可信类型 (TT)策略，它支持动态分析，可以系统地防止对网站的一大类注入攻击。为了实现这一点，TT 支持网站监管其 JavaScript 代码，只允许将某些类型的东西分配给 DOM 接收器，例如 innerHTML。

    网站可以通过包含特定的 HTTP 标头来激活内容安全策略。例如，标头content-security-policy: require-trusted-types-for ‘script’; trusted-types default激活页面的 TT 策略。

    目前，调试 TT 违规的唯一方法是在 JS 异常上设置断点。由于强制 TT 违规将触发异常，因此此功能可能会很有用。但是，在现实的场景中，需要对 TT 违规进行更细粒度的控制。特别是，我们希望仅在 TT 违规（而不是其他异常）上中断，也在仅报告模式下中断，并区分不同类型的 TT 违规。

    启用该功能将为应用程序增加一个额外的安全层，减少跨站脚本（XSS）等漏洞。

    在这里插入图片描述

    那该如何启用该功能呢？可以通过以下步骤来开启此功能：

    1. 在任意页面打开 Chrome 浏览器的 DevTools；
    2. 点击右上角设置图标 -> 选中左侧 Experiments -> 勾选 Show CSP Violations view；

    在这里插入图片描述

    1. 重启浏览器的 DevTools；
    2. 在 CSP Violations Breakpoints *下选择* Trusted Type Violations 即可。

    在这里插入图片描述

    当遇到有安全问题的代码时，Chrome DevTools 甚至会显示如何修复改问题。

  13. 双屏模式

    通过启用双屏模式，可以在 Chrome DevTools 模拟器的双屏设备上调试你的 web 应用。这对于开发要适配折叠屏手机的应用是非常有用的。

    在这里插入图片描述

    那该如何启用该功能呢？可以通过以下步骤来开启此功能：

    1. 在任意页面打开 Chrome 浏览器的 DevTools；

    2. 点击右上角设置图标 -> 选中左侧 Experiments -> 勾选 Emulation: Support dual-screen mode；

      在这里插入图片描述

      1. 重启浏览器的 DevTools；
      2. ①切换到移动设备调试 -> ②选择一个双屏设备 -> ③点击上方的切换双屏模式。
        在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

快讯！TiDB v8 发版！超硬核 v8 引擎！

快讯！TiDB v8 发版！超硬核 v8 引擎！

TiDB 是 PingCAP 公司自主设计、研发的开源分布式关系型数据库，是一款同时支持在线事务处理与在线分析处理 (Hybrid Transactional and Analytical Processing, HTAP) 的融合型分布式数据库产品。 具备水平扩容或者缩容、金融级高可用、实时 HTAP、云原生的分布式数…
阅读更多...
【Docker】Windows中打包dockerfile镜像导入到Linux

【Docker】Windows中打包dockerfile镜像导入到Linux

【Docker】Windows中打包dockerfile镜像导入到Linux 大家好 我是寸铁👊 总结了一篇【Docker】Windows中打包dockerfile镜像导入到Linux✨ 喜欢的小伙伴可以点点关注 💝 前言 今天遇到一个新需求，如何将Windows中打包好的dockerfile镜像给迁移…
阅读更多...
【Linux】进程程序替换 做一个简易的shell

【Linux】进程程序替换 做一个简易的shell

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 目录 文章目录 前言 进程程序替换 替换原理 先看代码和现象 替换函数 第一个execl()： 第二个execv()： 第三个execvp()： 第四个execvpe()&a…
阅读更多...
android WMS服务

android WMS服务

android WMS服务 WMS的定义 窗口的分类 WMS的启动 WindowManager Activity、Window、DecorView、ViewRootImpl 之间的关系 WindowToken WMS的定义 WMS是WindowManagerService的简称，它是android系统的核心服务之一，它在android的显示功能中扮演着…
阅读更多...
YOLOv9改进策略 ：卷积魔改 | 感受野注意力卷积运算（RFAConv）

YOLOv9改进策略 ：卷积魔改 | 感受野注意力卷积运算（RFAConv）

💡💡💡本文改进内容：感受野注意力卷积运算（RFAConv），解决卷积块注意力模块（CBAM）和协调注意力模块（CA）只关注空间特征，不能完全解决卷积核参数共享的问题 💡💡💡使用方法：代替YOLOv9中的卷积，使得更加关注感受野注意力，提升性能 💡💡💡RFAConv…
阅读更多...
vue3：通过【自定义指令】实现自定义的不同样式的tooltip

vue3：通过【自定义指令】实现自定义的不同样式的tooltip

一、效果展示 vue3自定义不同样式的tooltip 二、实现思路 1.ts文件 在ts文件中创建一个全局容器 import一个容器组件，用于存放自定义的各式组件 创建一个指令并获取到指令传递的数据，并为容器组件传值 2.容器组件 用于存放自定义Tooltip样式的组件…
阅读更多...
最新2024年增强现实（AR）营销指南（完整版）

最新2024年增强现实（AR）营销指南（完整版）

AR营销是新的最好的东西，就像元宇宙和VR营销一样。利用AR技术开展营销活动可以带来广泛的利润优势。更不用说，客户也喜欢AR营销！ 如果企业使用AR，71%的买家会更多地购物。40%的购物者准备在他们可以在AR定制的产品上花更多的钱。…
阅读更多...
详解Java线程的状态

详解Java线程的状态

一、观察线程的所有状态 线程的状态是⼀个枚举类型 Thread.State public class ThreadState {public static void main(String[] args) {for (Thread.State state : Thread.State.values()) {System.out.println(state);}} } NEW: 安排了⼯作, 还未开始⾏动 RUNNABLE: 可⼯…
阅读更多...
JavaSE day16笔记 - string

JavaSE day16笔记 - string

第十六天课堂笔记 学习任务 Comparable接口★★★★ 接口 : 功能的封装 > 一组操作规范 一个抽象方法 -> 某一个功能的封装多个抽象方法 -> 一组操作规范 接口与抽象类的区别 1本质不同 接口是功能的封装 , 具有什么功能 > 对象能干什么抽象类是事物本质的抽象 &…
阅读更多...
MYSQL——索引概念索引结构

MYSQL——索引概念索引结构

索引 索引是帮助数据库高效获取数据的排好序的数据结构。 有无索引时，查询的区别 主要区别在于查询速度和系统资源的消耗。 查询速度： 在没有索引的情况下，数据库需要对表中的所有记录进行扫描，以找到符合查询条件的记录&#…
阅读更多...
《深入理解计算机系统》学习（9）：链接和执行

《深入理解计算机系统》学习（9）：链接和执行

目录 一、链接1.1 编译器驱动程序1.2 链接任务 二、目标文件2.1 目标文件三种形式2.2 可重定位目标文件 三、符号3.1 符号表3.2 符号解析3.3 链接器解析多重定义的全局符号 四、重定位4.1 重定位条目4.2 重定位符号引用 五、可执行目标文件5.1 可执行文件结构5.2 加载可执行目标…
阅读更多...
设置asp.net core WebApi函数请求参数可空的两种方式

设置asp.net core WebApi函数请求参数可空的两种方式

以下面定义的asp.net core WebApi函数为例，客户端发送申请时，默认三个参数均为必填项，不填会报错，如下图所示： [HttpGet] public string GetSpecifyValue(string param1,string param2,string param3) {return $"…
阅读更多...
C++格式化输入和输出

C++格式化输入和输出

格式化输入与输出 除了条件状态外，每个iostream对象还维护一个格式状态来控制IO如何格式化的细节。 格式状态控制格式化的某些方面，如整型值是几进制、浮点值的精度、一个输出元素的宽度等。 标准库定义了一组操纵符来修改流的格式状态。 一个操纵符…
阅读更多...
【进程IO】详细讲解文件描述符fd

【进程IO】详细讲解文件描述符fd

文章目录 前言什么叫文件描述符FILE与fd的关系 再次理解文件为什么要有文件的方法列表呢？ 进程和struct file的关系再次理解open操作 前言 C语言的关于文件操作的各种函数实际上是对系统调用的封装。那么从进程的角度看，一个文件到底是如何被描述的呢&a…
阅读更多...
Postwoman 安装

Postwoman 安装

Postwoman作为Postman的女朋友，具有免费开源、轻量级、快速且美观等特性，是一款非常好用的API调试工具。能帮助程序员节省时间，提升工作效率。 Github地址：GitHub - hoppscotch/hoppscotch: 👽 Open source API devel…
阅读更多...
Qt/QML编程之路：画线及倒车影响(48)

Qt/QML编程之路：画线及倒车影响(48)

前言： 倒车影像中有一个属性比较实用，那就是倒车线，这条线很明显会在视频图像上叠加显示，或者说在视频上面一个图层画的线。这里有一个画线的Qt示例，用于在一个scene上画一个对角线： #include "mainwindow.h" #include <QApplication> #include <QtW…
阅读更多...
ES6 学习（一）-- 基础知识

ES6 学习（一）-- 基础知识

文章目录 1. 初识 ES62. let 声明变量3. const 声明常量4. 解构赋值 1. 初识 ES6 ECMAScript6.0(以下简称ES6)是JavaScript语言的下一代标准&#xff0c;已经在2015年6月正式发布了。它的目标&#xff0c;是使得」JavaScript语言可以用来编写复杂的大型应用程序&#xff0c;成为…
阅读更多...
关系网络c++

关系网络c++

题目&#xff1a; 代码&#xff1a; #include<bits/stdc.h>using namespace std;int n,x,y;struct node{int num;//编号 int t;//步数 node(){}node(int sum,int tt){numsum;ttt;} }; int mp[101][101];//图 bool flag[101];//标记 queue<node> q; void bfs() {q…
阅读更多...
FLASH的读取与写入

FLASH的读取与写入

FLASH的写入 结合HAL库所给参数&#xff1a; 查阅具体使用芯片的参考手册。 就不在详细解释&#xff0c;英文自行翻译。具体代码如下&#xff1a; /*FLASH写入程序*/ void WriteFlashTest(uint32_t L, uint32_t addr, uint32_t *Data,int Page) {int i0;/* 1/4解锁FLASH*/HAL…
阅读更多...
【Anaconda】Linux下Anaconda安装和虚拟环境配置

【Anaconda】Linux下Anaconda安装和虚拟环境配置

Linux下Anaconda安装和虚拟环境配置 一、安装anaconda二、conda虚拟环境管理三、jupyter相关启动部署四、遇到问题 下面介绍整体流程&#xff0c;遇到问题优先看“遇到问题章节”&#xff01; 一、安装anaconda 1.下载anaconda安装包 &#xff08;1&#xff09;可以选择在官网…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023