百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术资源 > 正文

前端奇技淫巧之js调试

off999 2024-11-23 20:38 16 浏览 0 评论

上班写bug,下班修bug。调试在日常开发中占大半,相信小伙伴们和我一样,调试只会用console.log。今天我们一起学习其他js调试工具,帮忙我们提高效率。

首先看下console对象中有什么我们不知道的方法

哎呀,不看不知道,一看吓一跳。简单的console居然有这么多方法!

console.log()

相信小伙伴们会拍着胸口说:不就是简单的输出吗?console.log("Hello World")js入门级别的代码。

但console.log()还有其他好玩小窍门

占位符:

%s对字符串进行占位

%o 对对象进行占位

%d 对数字类型进行占位,这个就不演示了

%c css占位符,利用console.log输出内容可以携带css样式

console.dir()

console.dir与log类似,不同之处在于dir打印对象的json表示形式

console.warn()

给生活添加色,console.warn()给控制台添一祙小黄色

console.table()

这个方法爽爽的不要不要的了,小伙伴们是否console.log输出过json数据,一长串,看得是眼花瞭乱。

当然这还没到眼花的地步,数据多了,对象属性多了,反正看着不爽

这点数据对比两种方法谁好,还不明显。

在看一种情况:我们只需要查看某个对象属性,不需要对象所有的属性都展示给我们看

console.tabel完美解决

不足之处在于:处理最多 1000 行的数据的能力,所以它可能并不适用于所有的数据集合。

console.assert()

console.assert当做log用只输出undefined,

assert第一个参数是一个boolean值。否则直接输出undefined

若为true,输出undefinend,其他参数并不鸟

若为false,输出Assertion failed:+其他参数

console.clear()

清空控制台

好像有点鸡肋,目前我找不到实际的用处

console.count()

写入count()在同一行与同一标签被调用的次数。

与它配套的console.countReset()重置计数

该方法可用于统计循环次数:

var arr = [1,2,3,2,...];
arr.forEach(()=>{
    console.count();//不传则默认用default
})

console.time()

启动一个新的计时器。调用console.timeEnd()停止计时器并将运行时间在控制台

console.time();
for(let i=0;i<1000;i++){}
console.timeEnd();

console.debug()

console.debug与log一样,但在不同浏览器中表现不同,下面是firefox与chrome中的展现

console.error()

将对象打印到控制台,将其格式化为错误,并包括堆栈跟踪

console.info()

与 console.log ()相同。

console.group(label)

可视化地将消息分组在一起,直到调用 console.groupEnd (label)。 当组最初登录到控制台时,使用 console.groupcollapped (label)将其折叠。

相关推荐

Python开发管理神器--UV 使用教程:从安装到项目管理

UV是一个用Rust编写的高效Python包和项目管理工具,提供了比传统工具更快的速度和更强的功能。本文将指导你如何使用UV从安装到运行一个Python项目。重点:它可以独立安装,可...

python入门-Day 26: 优化与调试(python优化方法)

优化与调试,内容包括处理模型运行中的常见问题(内存、依赖)、调整参数(如最大生成长度),以及练习改进Day25的文本生成结果。我会设计一个结构化的任务,帮助你掌握优化和调试技巧,同时提升模型性能...

Python安装(python安装发生严重错误)

Windows系统1.安装python1.1下载Python安装包打开官方网站:https://www.python.org/downloads/点击"DownloadPython3.1...

UV 上手指南:Python 项目环境/包管理新选择

如果你是一位Python开发者,曾因pipinstall的安装速度而感到沮丧,或者希望Python的依赖管理能够像Node.js那样高效顺滑,那么UV可能正是你所需要的工具。UV...

uv——Python开发栈中的高效全能小工具

每天写Python代码的同学,肯定都离不开pip、virtualenv、Poetry等基础工具,但是对这些工具可能是又恨又离不开。那么有什么好的替代呢,虫虫今天就给大家介绍一个替代他们的小工具uv,一...

使用Refurb让你的Python代码更加优秀

还在担心你写的Python代码是否专业,是否符合规范吗?这里介绍一个Python代码优化库Refurb,使用它可以给你的代码提出更加专业的建议,让你的代码更加的可读,规范和专业。下面简单介绍这个库的使...

【ai】dify+python开发AI八字排盘插件

Dify插件是什么?你可以将Dify插件想象成赋予AI应用增强感知和执行能力的模块化组件。它们使得将外部服务、自定义功能以及专用工具以”即插即用”的简洁方式集成到基于Dify构建的AI...

零基础AI开发系列教程:Dify升级指南

Dify近期发布很是频繁,基本两三天一个版本。值得肯定的是优化和改进了很多问题,但是官方的升级文档有点分散,也有点乱。我这里整理了一个升级文档供大家参考,如果还没有升级到新版本的小伙伴,可以按照我的文...

升级到PyTorch 2.0的技巧总结(如何更新pytorch版本)

来源:DeepHubIMBA本文约6400字,建议阅读12分钟在本文将演示PyTorch2.0新功能的使用,以及介绍在使用它时可能遇到的一些问题。PyTorch2.0发布也有一段时间了,大家...

dify 1.6.0版本发布解读:引入MCP支持与多项核心优化升级指南详解

2025年7月10日,dify发布了1.6.0版本。这是一次功能深度升级与性能优化的综合性更新,标志着dify在技术规范支持、操作体验以及系统稳定性方面迈出了重要的一步。本文将从核心新特性、功能增强、...

Python教程(十四):列表(List)(python列表方法总结)

昨天,我们学习了变量作用域,理解了局部和全局变量的概念。今天,我们将开始探索Python的数据结构,从最常用的**列表(List)**开始。列表是Python中最灵活、最常用的数据结构,它可以存储不同...

Python列表操作(python列表有哪些基本操作)

Python添加列表4分钟阅读在Python操作列表有各种方法。例如–简单地将一个列表的元素附加到for循环中另一个列表的尾部,或使用+/*运算符、列表推导、extend()和i...

Python字符串变形术:replace替换+join连接,10分钟掌握核心操作

字符串替换魔法:replace()实战手册核心价值:一键更新文本内容,精准控制替换范围#基础替换:Python变Javas="hellopython"print(s.re...

python集合set() 数据增册改查统计序循常用方法和数学计算

概念特点定义和创建常用操作集合间的关系集合数学操作集合生成式遍历概念:可变、无序、不重复的序列数据容器特点:无序,不支持下标唯一性,可以删除重复数据可修改定义和创建赋值法:语法:s={x,....

Python列表方法append和extend的区别

在Python编程中,列表是一种非常常用的数据结构。而列表有两个方法append()和extend(),它们看起来有点相似,但实际上有着明显的区别。今天咱们就来好好唠唠这俩方法到底有啥不同。基本区别a...

取消回复欢迎 发表评论: