Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >10个爽翻天的console调试技巧

10个爽翻天的console调试技巧

作者头像
Jean
发布于 2019-03-02 12:40:03
发布于 2019-03-02 12:40:03
1.1K1
举报
文章被收录于专栏:Web行业观察Web行业观察

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

在过去的十年中,我最热衷的事情之一就是前端开发(特别是JavaScript)。作为一个“匠人”,我喜欢专研各种工具。在本文,我会为你介绍一些用老式console来debug的技巧。

是的,我们都知道下面基本的技巧:

console.log(‘Hello World!’);console.info(‘Something happened…’); console.warn(‘Something strange happened…’); console.error(‘Something horrible happened…’);

从现在开始,我将教会你一些你不知道的技巧,让你成为老司机!

1. console.trace()

如果你想知道消息是哪里打印出来的,使用console.trace()来获取要打印的数据的stacktrace。

2. console.time() && console.timeEnd()

如果你想分析函数的性能,可以使用console.time()来计时,console.timeEnd()来结束计时,控制台会打印出两次之间的时间差。

3. console.memory

如果你发现性能问题很难分析,可能还要考虑是否有内存泄露,你可以使用console.memory(注意memory是console的属性,不是函数),来查看当前的堆的使用情况。

Fundebug助你更好地debug,欢迎试用!

4. console.profile(‘profileName’) & console.profileEnd(‘profileName’)

虽然不是一个标准的做法,不过被广泛接受使用。你可以使用这两个命令来启动和停止profiling。这样有助你你在代码中做精准的profiling。而不依赖于手动的鼠标点击。你可以在浏览器控制台Javacript Profiler中找到刚刚的profile。

5. console.count(“STUFF I COUNT”)

有时候为了记录一个函数或则一段代码重复执行了多少次,可以使用console.count('?')来记录。每一次执行到该代码,就会自动加1。

6. console.assert(false, “Log me!”)

你可以使用console.assert来在某些为假的条件下输出消息,而不是用if-else。 注意:和NodeJS标准库下的assert不同, node下会报错(Assertion Error)。而且浏览器下无法捕获异常?

7. console.group(‘group’) & console.groupEnd(‘group’)

如果你想对打印的log做一个格式化的整理,可以使用console.group()console.groupEnd()。使用console.group可以将log聚合成组,并且形成嵌套的层级。请看示例:

8. String substitutions

你可以使用console.log打印变量(%s = string, %i = integer, %o = object, %f = float)。

9. console.clear()

我们已经在控制台输出了很多记录,来使用console.clear()清空一下。

10. console.table()

最后一个压轴的!你可以使用console.table()将对象以表格的形式打印出来。

本文系外文翻译,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系外文翻译,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
1 条评论
热度
最新
Jean回复Jean
console.memory返回的是堆内存信息, 因为JS当中一切都是对象...
console.memory返回的是堆内存信息, 因为JS当中一切都是对象...
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
10个很少使用的JavaScript Console 方法
你一定听说过 console.log() ,而且可能一直在使用它。它非常流行,在集成开发环境中键入时,Visual Studio Intellicode 等工具通常会在其他控制台方法之前推荐使用它。
前端小智@大迁世界
2023/09/07
3050
10个很少使用的JavaScript Console 方法
Javascript调试命令——你只会Console.log() ?
Console 对象提供对浏览器控制台的接入(如:Firefox 的 Web Console)。不同浏览器上它的工作方式是不一样的,但这里会介绍一些大都会提供的接口特性。Console对象可以在任何全局对象中访问,如 Window,WorkerGlobalScope 以及通过属性工作台提供的特殊定义。它被浏览器定义为 Window.Console,也可被简单的 Console 调用。 最常用的方法就是Console.log(),就是在控制台输出内容。刚开始学前端的时候看到大家都是用的Console.log
崔庆才
2018/04/04
1.1K0
Javascript调试命令——你只会Console.log() ?
你了解Console对象嘛 ? ? 快来瞅瞅吧
你还只是知道Console.log方法嘛,Console对象其实还有很多方法。下面带大家一起来深入了解下Console对象的各个方法。
用户9914333
2022/07/21
2680
你了解Console对象嘛 ? ? 快来瞅瞅吧
Chrome 控制台console的用法(学了之后对于调试js可是大大有用的哦)
["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]
wuweixiang
2019/04/01
1.3K0
Chrome 控制台console的用法(学了之后对于调试js可是大大有用的哦)
12种 console 相关的方法,帮你快速提高调试效率!(建议收藏)
我现在在调试代码的时候基本用的都是console.log() 调试法,虽然低级,但好用呀。当然,遇到复杂点的就会借助其它工具,但日常开发中 console.log() 基本够用了。
前端小智@大迁世界
2022/06/15
1.2K0
12种 console 相关的方法,帮你快速提高调试效率!(建议收藏)
Firebug中的console tab使用总结
Firebug对于Web开发人员来说,已经成为了不可或缺的工具,但是在我日常的工作中,常常感觉还没有能够深刻的挖掘出她的潜力,今天花了点时间仔细研究了Console和命令行的使用在提高工作效率方面的作用,
大江小浪
2018/07/24
7520
灵活使用 console 让 js 调试更简单
Web开发最常用的高度就是 console.log ,虽然 console.log 占有一席之地,但很多人并没有意识到 console 本身除了基本 log 方法之外还有很多其他方法。 适当使用这些方法可以使调试更容易,更快速,更直观。
前端小智@大迁世界
2019/04/17
1.7K0
灵活使用 console 让 js 调试更简单
还是只使用console.log()进行调试?好吧,其实还有更多。
在浏览器控制台中打印消息无疑可以拯救所有开发人员。 console.log()消息就像您的大多数疾病的药,同时调试了代码中的一些有线问题。
Tz一号
2020/09/10
8730
被忽略的console.log
除了console.log之外,还有更多方式调试JavaScript来输出值。 看起来很明显我们没有。
frontoldman
2019/09/03
9260
被忽略的console.log
console有趣的用法
1.修改控制台输出内容样式 2.重写控制台输出格式(追加出错日期) 3.以表格的形式显示控制台输出内容 4.如何统计一个函数在程序中被调用的总次数 5.以便于阅读的形式输出打印内容 6.统计程序执行的时间 7.分组显示控制台输出内容 8.获取当前代码在堆栈中的调用路径 9.清除控制台显示的所有内容 10.断言输出
酷走天涯
2019/06/11
1.1K0
console有趣的用法
你不知道的 console.log 替代品
现在,假设您正在编写一些JS代码,但它无法正常工作。你做的第一件事是什么?你是Console.log 它!因此,我将告诉您 Console.log 的一些替代方案。
海拥
2022/09/26
4360
Chrome控制台console的基本用法
大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方。可能大家对console.log会有一定的了解,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出信息呢,下面我就介绍一些调试的入门技巧,让你爱上console.log
墨渊
2018/05/09
1.8K2
Chrome控制台console的基本用法
JS调试工具,万能的Console,你知道还能这样玩吗?
Console在我们开发中应该使用很频繁并且都会用的一个工具,确实好用。但是你真的会用吗?可能有些用法你到现在都还不知道,那么今天我来给各位分享一下Console的比较具体的玩法,助你开发调试更容易。
吴佳
2022/09/26
1.8K0
你不知道的console.log
对于前端开发者,使用console.log() 次数绝对很多,但是大部分人认识的 console 对象还不是很全面,其实深入了解这些后,你会发现给开发过程带来很多便利,而且还很有趣。
游魂
2018/08/30
1.3K0
Chrome控制台骚操作,知道这些事半功倍
Chrome 浏览器想必是每个前端工程师必备的利器之一,速度快、体积小、支持的特性也比其他浏览器多;除此之外,它还拥有强大的控制台功能,但很多开发者并没有用出控制台的精髓,只是使用 console.log();,其实控制台的功能远不止那么简单。
ConardLi
2019/09/08
1.6K0
9 个让 JavaScript 调试更简单的 Console 命令
一、显示信息的命令 <!DOCTYPE html> <html> <head> <title>常用console命令</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/javascript"> console.log('hello'); console.info(
用户1667431
2018/04/18
7410
9 个让 JavaScript 调试更简单的 Console 命令
提高 DevTools 控制台调试 console 的 12 种方法
使用最多的 console.log() 对于在代码运行时输出值非常有用,通常可以帮助查明错误。
夜尽天明
2023/03/15
8070
提高 DevTools 控制台调试 console 的 12 种方法
JavaScript调试必会的8个console方法
每个JavaScript开发者都用过console.log()来调试程序,但实际上Console对象还提供了很多其他方法可以提高调试效率。本文将介绍8个有趣的Console方法,即使JavaScript老手也不一定知道!
用户1408045
2019/09/23
1K0
JavaScript调试必会的8个console方法
【译】超越console.log() —当debug时你需要使用的8个console方法
你debug时或许没有使用过的超越console.log()的console方法!
腾讯IVWEB团队
2020/06/28
6660
console 命令详解。打印公司logo、表格、有趣动图、堆栈信息、自定义样式
小伙伴们在开发的时候应该都用过 console.log() 打印来调试程序代码,有些小伙伴可能所有不知,其实 console 对象还有很多方法非常实用,比如可以把后台传给前端的类数组对象已表格的形式打印,也可以给打印的信息增加 css 样式,你甚至可以在控制台里打印图片!在封装组件时也经常用它的方法打印警告信息,错误信息。那本文就记录一下 console 对象的其他方法的应用场景和注意事项、以及好玩的地方。
andyhu
2023/08/14
2.3K0
console 命令详解。打印公司logo、表格、有趣动图、堆栈信息、自定义样式
推荐阅读
相关推荐
10个很少使用的JavaScript Console 方法
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档