`console.log`调试完全指南

大家好,这里是 Geek技术前线

今天我们来探讨 Console.log() 的一些优点。并分析一些基本概念和实践,这些可以让我们的调试工作变得更加高效。
在这里插入图片描述

理解前端 log 与后端 log 的区别

前端 log 与后端 log 有着显著的不同,理解这一点至关重要。与后端系统中持久化 log 对于监控和调试不同,前端开发的流动性带来了不同的挑战。在调试后端时,我们通常会使用 tracepoints。

然而,前端由于需要不断刷新、重新加载、切换上下文等,情况就大不相同。在前端,过于依赖复杂的 log 机制可能会变得繁琐。

虽然 tracepoints 在基本打印语句之上仍然更为优越,但在前端工作流程中,持续的测试和浏览器重载减少了它们的优势。此外,像将 log 记录到文件或结构化摄取这样的功能在浏览器中很少有用

不过,使用 log 记录器仍然被认为是长期 log 记录的最佳实践,而典型的 Console.log 在短期 log 记录中也有一些小技巧。

利用 Console log 级别

浏览器控制台的一个隐藏功能是它对 log 级别的支持,这比基本的打印语句要强大得多。控制台提供了五个级别:

log:标准 log 记录

debug:与 log 相同,但用于调试目的

info:信息性消息,通常与 log/debug 呈现相似

warn:可能需要注意的警告

error:发生的错误

虽然 log 和 debug 可能难以区分,但这些级别使得调试体验更加有序和过滤。浏览器允许根据这些级别过滤输出,类似于服务器端 log 系统的功能,让我们能够专注于相关消息。
image

使用 CSS 自定义控制台输出

前端开发为我们提供了创造性解决方案的机会,而 log 记录也不例外。在控制台中使用 CSS 样式可以使 log 更加引人注目。通过在控制台消息中使用 %c,我们可以应用自定义的 CSS 样式:

console.customLog = function (msg) {console.log("%c" + msg,"color:black;background:pink;font-family:system-ui;font-size:4rem;-webkit-text-stroke: 1px black;font-weight:bold");
};
console.customLog("Dazzle");

这种方法在我们需要让特定 log 突出或以视觉方式组织输出时非常有用。我们可以使用多个 %c 替换符来为 log 消息的不同部分应用各种样式。

image

使用 console.trace() 进行堆栈追踪

console.trace() 方法可以在特定位置打印堆栈追踪,这在理解代码流时有时会非常有帮助。然而,由于 JavaScript 的异步特性,堆栈追踪并不总是像后端调试那样简单。不过,在某些场景下,例如同步代码段或事件处理,它仍然非常有价值。

断言

前端代码中的断言允许开发者强制执行预期,并促进“快速失败”的心态。使用 Console.assert(),我们可以测试条件:

console.assert(x > 0, "x must be greater than zero");

在浏览器中,失败的断言会显示为错误,类似于 console.error。一个额外的好处是,断言可以从生产构建中剔除,从而消除任何性能影响

image

将对象复制到剪贴板

在调试过程中,我们常常需要检查对象,而 copy(object) 方法则允许我们将对象的内容复制到剪贴板,以便在外部使用。这一功能在我们需要传输数据或在浏览器外部分析数据时非常有用。

使用 console.dir() 和 dirxml() 进行检查

console.dir() 方法提供了更详细的对象视图,展示了它们的属性,就像在调试器中看到的一样。这对于检查 DOM 元素或探索 API 响应特别有帮助。同时,console.dirxml() 允许我们以 XML 形式查看对象,这在调试 HTML 结构时也非常实用。

计数函数调用

跟踪函数被调用的频率或代码块的执行次数是至关重要的。console.count() 方法可以记录它被调用的次数,帮助我们验证函数是否按预期被调用:

function myFunction() {console.count("myFunction called");
}

我们可以使用 console.countReset() 来重置计数器。这个简单的工具可以帮助我们捕捉性能问题或确认正确的执行流程。

使用分组组织 log

为了防止 log 杂乱,我们可以使用控制台分组来组织相关消息。console.group() 开始一个可折叠的 log 部分,而 console.groupEnd() 则关闭它:

console.group("My Group");
console.log("Message 1");
console.log("Message 2");
console.groupEnd();

分组使得我们更容易浏览复杂的 log,并保持控制台的整洁。

Chrome 特定的调试功能

监控功能:Chrome 的 monitor() 方法可以记录对函数的每一次调用,显示参数,从而提供一种方法追踪的体验。

监控事件:使用 monitorEvents(),我们可以记录某个元素上的事件。这对于调试用户界面交互非常有用。例如,monitorEvents(window, 'mouseout') 只会记录 mouseout 事件。

查询对象实例queryObjects(Constructor) 列出所有使用特定构造函数创建的对象,让我们对内存使用和对象实例化有更深入的了解。

总结

前端调试工具已经取得了长足的进步。这些工具提供了一系列丰富的功能,远远超出了简单的 console.log() 语句。从 log 级别和 CSS 样式到断言和事件监控,掌握这些技巧可以彻底改变我们的调试工作流程。

参考 https://hackernoon.com/front-end-debugging-part-2-consolelog-to-the-max-explained?source=rss

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

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

相关文章

k8s 1.28 聚合层部署信息记录

–requestheader-client-ca-file –requestheader-allowed-namesfront-proxy-client –requestheader-extra-headers-prefixX-Remote-Extra- –requestheader-group-headersX-Remote-Group –requestheader-username-headersX-Remote-User –proxy-client-cert-file –proxy-cl…

Flutter:列表分页,上拉加载下拉刷新,在GetBuilder模板使用方式

GetBuilder模板使用方式参考上一节 本篇主要代码记录如何使用上拉加载下拉刷新, 接口请求和商品组件的代码不包括在内 pubspec.yaml装包 cupertino_icons: ^1.0.8# 分页 上拉加载,下拉刷新pull_to_refresh_flutter3: 2.0.2商品列表:controlle…

使用Cmake导入OpenCV库的大坑记录

CMakeLists.txt cmake_minimum_required(VERSION 3.20)set(OpenCV_DIR D:/Package/opencv4/opencv/mingw-build/install) #这里根据自己OpenCV位置设定find_package(OpenCV REQUIRED)project(PROJ1 CXX)add_executable(PROJ1 main.cpp)target_include_directories(PROJ1 PR…

MySQL —— MySQL 程序

目录 前言 一、MySQL 程序简介 二、mysqld -- MySQL 服务器 三、mysql -- MySQL 客户端 1. mysql 客户端简介 2. mysql 客户端选项 (1)指定选项的方式 (2)mysql 客户端命令常用选项 (3)在命令行中使…

STM32 PWM波形详细图解

目录 前言 一 PWM介绍 1.1 PWM简介 1.2 STM32F103 PWM介绍 1.3 时钟周期与占空比 二.引脚映像关系 2.1引脚映像与寄存器 2.2 复用功能映像 三. PWM 配置步骤 3.1相关原理图 3.2配置流程 3.2.1 步骤一二: 3.2.2 步骤三: 3.2.3 步骤四五六七: …

【软件安装】在Ubuntu中安装mysql5.7

参考:cubuntu安装mysql5.6_mob649e81553a70的技术博客_51CTO博客 问题1:sudo apt install mysql-server-5.7 -y 若提示mysql-server 没有可安装候选 答: sudo nano /etc/apt/sources.list 在开头加入: # 阿里源 deb http://mi…

多方法做配对样本t检验(三)

Wilcoxon符号秩检验 Wilcoxon符号秩检验(Wilcoxon Signed-Rank Test) 是一种非参数统计方法,用于检验两组相关样本(配对样本)之间的差异是否显著。它通常用来代替配对样本t检验,特别是在数据不符合正态分布…

修改IDEA配置导致Spring Boot项目读取application.properties中文乱码问题

之前很多配置都是放在nacos里面,然后这次同事有个配置写在application.properties中,这个配置含有中文,启动之后发现拿到的中文值会乱码,然后就帮忙看了一下问题。 排查问题 经过不停的百度、排查发现,spring读取app…

0.shell 脚本执行方式

1.脚本格式要求 🥑脚本以 #!/bin/bash 开头 🥦 脚本要有可执行权限 2.执行脚本的两种方式 🥬 方式1:赋予x执行权限 🥒 ​​​​​​​方式2: sh执行 ​​​​​​​

[2024年3月10日]第15届蓝桥杯青少组stema选拔赛C++中高级(第二子卷、编程题(6))

参考程序&#xff1a; #include<bits/stdc.h> using namespace std; int n; int a[305]; int dp[305][305];//打掉ij之间所有靶子可以获得的最大积分&#xff08;不含i&#xff0c;j&#xff09; int main() {cin>>n;for(int i1;i<n;i){cin>>a[i];}a[0]1…

深入了解 Adam 优化器对显存的需求:以 LLaMA-2 7B 模型为例 (中英双语)

中文版 深入了解 Adam 优化器对显存的额外需求&#xff1a;模型参数与优化器状态的显存开销分析 在深度学习模型的训练过程中&#xff0c;显存是一个关键的资源&#xff0c;尤其在处理大型语言模型或深度神经网络时。训练时的显存需求不仅包括模型参数本身&#xff0c;还涉及…

k8s Init:ImagePullBackOff 的解决方法

kubectl describe po (pod名字) -n kube-system 可查看pod所在的节点信息 例如&#xff1a; kubectl describe po calico-node-2lcxx -n kube-system 执行拉取前先把用到的节点的源换了 sudo mkdir -p /etc/docker sudo tee /etc/docker/daemon.json <<-EOF {"re…

Vue--------导航守卫(全局,组件,路由独享)

全局导航守卫 beforeEach 全局前置守卫 afterEach 全局后置守卫 路由独享守卫 beforeEnter 路由独享守卫 组件导航守卫 beforeRouteEnter 进入组件前 beforeRouteUpdate 路由改变但是组件复调用 beforeRouteLeave 离开组件之前 执行顺…

入门产品经理,考PMP还是NPDP?

PMP和NPDP都是管理行业内的高含金量证书&#xff0c;不过PMP侧重项目管理&#xff0c;NPDP侧重产品开发。如果你已经确定了自己的职业方向是产品经理的话&#xff0c;那么考NPDP证书会更加契合一些。 PMP和NPDP有什么不同? 1、认证体系不同 PMP&#xff08;项目管理专业人士…

【继承】—— 我与C++的不解之缘(十九)

前言&#xff1a; 面向对象编程语言的三大特性&#xff1a;封装、继承和多态 本篇博客来学习C中的继承&#xff0c;加油&#xff01; 一、什么是继承&#xff1f; ​ 继承(inheritance)机制是⾯向对象程序设计使代码可以复⽤的最重要的⼿段&#xff0c;它允许我们在保持原有类…

OpenCV相机标定与3D重建(6)将3D物体点投影到2D图像平面上函数projectPoints()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::fisheye::projectPoints 是 OpenCV 库中用于鱼眼镜头模型的函数&#xff0c;它将3D物体点投影到2D图像平面上。这个函数对于模拟或者理解鱼眼…

自闭症全托管理:提供综合关怀的专业机构

在当今社会&#xff0c;随着对特殊儿童教育需求的日益增长&#xff0c;寻找一个能够提供全面、专业且充满爱心的全托管理机构&#xff0c;成为了许多自闭症、ADHD&#xff08;注意力缺陷多动障碍&#xff09;、谱系障碍、发育迟缓及注意力缺失等特殊儿童家庭的首要任务。星贝育…

安卓-碎片的使用入门

1.碎片(Fragment)是什么 Fragment是依赖于Activity的&#xff0c;不能独立存在的,是Activity界面中的一部分&#xff0c;可理解为模块化的Activity,它能让程序更加合理和充分地利用大屏幕的空间&#xff0c;因而在平板上应用得非常广泛. Fragment不能独立存在&#xff0c;必须…

WRF-Chem模式安装、环境配置、原理、调试、运行方法;数据准备及相关参数设置方法

大气污染是工农业生产、生活、交通、城市化等方面人为活动的综合结果&#xff0c;同时气象因素是控制大气污染的关键自然因素。大气污染问题既是局部、当地的&#xff0c;也是区域的&#xff0c;甚至是全球的。本地的污染物排放除了对当地造成严重影响外&#xff0c;同时还会在…

Admin.NET框架使用宝塔面板部署步骤

文章目录 Admin.NET框架使用宝塔面板部署步骤&#x1f381;框架介绍部署步骤1.Centos7 部署宝塔面板2.部署Admin.NET后端3.部署前端Web4.访问前端页面 Admin.NET框架使用宝塔面板部署步骤 &#x1f381;框架介绍 Admin.NET 是基于 .NET6 (Furion/SqlSugar) 实现的通用权限开发…