10个使用Console进行javascript调试的高级技巧

10个使用Console进行javascript调试的高级技巧

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

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

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

登录后复制

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

1. console.trace()

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

立即学习“Java免费学习笔记(深入)”;

10个使用Console进行javascript调试的高级技巧

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

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

10个使用Console进行javascript调试的高级技巧

3. console.memory

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

10个使用Console进行javascript调试的高级技巧

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

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

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

10个使用Console进行javascript调试的高级技巧

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

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

10个使用Console进行javascript调试的高级技巧

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

你可以使用console.assert来在某些为假的条件下输出消息,而不是用if-else。
注意:在Node.js下会报错(Assertion Error)。

10个使用Console进行javascript调试的高级技巧

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

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

10个使用Console进行javascript调试的高级技巧

8. String substitutions

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

10个使用Console进行javascript调试的高级技巧

9. console.clear()

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

10个使用Console进行javascript调试的高级技巧

10. console.table()

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

10个使用Console进行javascript调试的高级技巧

更多编程相关知识,请访问:编程入门!!

以上就是10个使用Console进行javascript调试的高级技巧的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2635166.html

(0)
上一篇 2025年3月7日 04:40:36
下一篇 2025年3月7日 04:40:55

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JavaScript中必须掌握的10个基础问题

    javascript 是一种客户端编程语言。 全球超过90%的网站都在使用它,它是世界上最常用的编程语言之一。 因此,今天javascript栏目来讨论 10 个有关 javascript 的常见问题。 1.如何从数组中移除一个特定的项 思…

    2025年3月7日
    200
  • 了解JS中的回调

    你有无意中看到 “callback” 但并不知道其中的意思么?不用担心。不是只有你一个人这样。很多JavaScript 新手都难以理解回调。 虽然回调比较令人困惑,你仍然需要彻底的学习理解它们,因为它在 JavaSc…

    2025年3月7日 编程技术
    200
  • 详解JavaScript中的回调函数并使用它

    在JavaScript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用。既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回。 因为函数是第一类对象,我们可以在JavaS…

    2025年3月7日
    200
  • 开发react用什么工具?

    react可以用的开发工具有:1、Chrome React Dev Tools;2、React Sight;3、React Bootstrap;4、Create React App;5、React Styleguideist等等。 适用于所…

    2025年3月7日 编程技术
    200
  • 详细了解javascript中的modules、import和export

    在互联网的洪荒时代,网站主要用 HTML和 CSS 开发的。如果将 JavaScript 加载到页面中,通常是以小片段的形式提供效果和交互,一般会把所有的 JavaScript 代码全都写在一个文件中,并加载到一个 script 标签中。尽…

    2025年3月7日
    200
  • JavaScript今年25 岁了!

    javascript视频教程栏目介绍javascript的发展历程 相关免费学习推荐:javascript视频教程 最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。 本文已过…

    2025年3月7日
    200
  • node.js“多线程”如何处理高并发任务?

    下面本篇文章给大家介绍一下使用 nodejs “多线程”处理高并发任务的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 相关推荐:《nodejs视频教程》 摩尔定律 摩尔定律是由英特尔联合创始人戈登·摩尔(Gordo…

    2025年3月7日 编程技术
    200
  • 了解TypeScript中泛型(Generics)的概念和用法

    本文介绍TypeScript中泛型(Generics)的概念和用法,它为什么重要,及其使用场景。我们会以一些清晰的例子,介绍其语法,类型和如何构建参数。你可以在你的集成开发环境中跟着实践。 准备工作 要从本文中跟着学习的话,你需要在电脑上准…

    2025年3月7日 编程技术
    200
  • 10个你可能不知道的很棒的JS字符串技巧

    相关推荐:《javascript视频教程》 我们称一个字符序列为字符串。这几乎是所有编程语言中都有的基本类型之一。这里跟大家展示关于 JS 字符串的10个很棒的技巧,你可能还不知道哦? 1.如何多次复制一个字符串 JS 字符串允许简单的重复…

    2025年3月7日 编程技术
    200
  • javascript需要搭建环境吗

    如果是在html中运行javascript代码,不需要搭建环境;因为JavaScript是运行在浏览器中的语言,不需要搭建环境,只需要浏览器就可运行了。如果直接运行JS程序,需要下载安装node.js环境。 本教程操作环境:windows7…

    2025年3月7日
    200

发表回复

登录后才能评论