你可能在 JavaScript 项目中都用了console.log。这是一种查看变量的值或程序运行中发生的事情的便捷方法。但是 JavaScript console 对象还有许多其他的功能,可以在处理项目时提供帮助。本文将会介绍一些我的最爱,希望你在工作时记得使用它们!
请注意,此处的例子适用于在浏览器中运行的 JavaScript。这与在 Node.js 中运行的 JavaScript 相似,但是在 Node.js 中的行为可能略有不同。
在进入其他选项之前,让我们先回顾一下 console.log 的功能。 console.log 将消息输出到控制台。你可以输入一个对象、一个数组、一个对象数组、一个字符串、一个布尔值,基本上你想要打印到控制台的任何内容都可以。这是使用 console.log 及其输出的例子:
console.log({ restaurantName: 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' };
这是 JavaScript 中最常用的调试方法,也是最常用的控制台方法。现在让我们来谈谈其他的一些选择!
console.info 与 console.log 几乎相同。它将信息性消息打印到控制台。据我所知,log 和 info 之间并没有真正的区别,只是取决于你怎样对消息进行分类。但是如果你选择从浏览器控制台中隐藏 “info” 级别的消息,则 “log” 和 “info” 消息都会被隐藏。要使用 console.info 可以这样做:
console.log({ restaurantName: 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' };
同样,输出几乎完全相同。
console.warn 将警告消息打印到控制台。从本质上讲,它与前面的功能相同,但是该消息在控制台中带有黄色背景,并带有警告图标(至少在 Chrome Dev Tools 中是这样)。当执行某些操作可能会导致你程序中的错误,但目前不会引起任何问题时,请使用 console.warn 。它使你和你的用户或其他开发人员知道那里有可能会发生问题。
console.warn({ restaurantName: 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' };
像前面一样,可以通过传递相同的值来把警告打印到控制台。
console.error将错误信息输出到控制台。本质上,它与前面的功能相同,但是该消息在控制台中具有红色背景,并带有带有白色 “x” 错误图标的红色圆圈(至少在 Chrome Dev Tools 中)。当你的程序出现问题时,请使用 console.error。它为其他开发人员提供了一种简便的方法来找出问题的原因并加以解决。它将能够为你提供错误的堆栈跟踪信息,以便你也可以查找错误。
console.error({ restaurantName: 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' };
像前面一样,可以通过传递相同的值来把错误打印到控制台。
这是我最喜欢的控制台选项之一,尽管我经常忘记它。 console.table 接受一些能够以表格形式展示的数据并输出。让我们看几个例子。我们首先从对象上的 console.table 开始:
console.table({ restaurantName: 'Pizza Planet', streetAddress: '123 Maple' });
在dev tools中的输出看起来类似于此:
(index) | Value |
---|---|
restaurantName | Pizza Planet |
streetAddress | 123 Maple |
它获取对象的每个属性名称,并将其放在 index 列中,并将属性的值放入 Value 列中。这发生在数组中的每个属性上。那么,如果我们输出对象数组会怎样?结果将如下所示:
(index) | restaurantName | streetAddress |
---|---|---|
0 | Pizza Planet | 123 Maple |
1 | Pizza Palace | 123 Elm |
我发现自己通常会使用 console.log,因为我已经习惯了,但是我认为很多时候 console.table 会更好地工作,并以一种美观、干净、易读的方式为我输出对象。
console.assert 是一种将未满足你确定条件的消息打印到控制台的方法。该函数有两个参数:要求值的表达式和应显示的错误消息。这是一个例子:
const obj = { restaurantName: 'Pizza Planet' };
console.assert(obj.restaurantName === 'Pizza Palace', 'The name of the restaurant is not "Pizza Palace"');
// Assertion Failed; 'The name of the restaurant is not "Pizza Palace"'
这可能是另一种非常好的调试程序的方法。仅当断言失败时才会显示该消息,因此如果未显示任何消息,则可以假定表达式正评估正确。
console.group 和 console.groupEnd 是可以将许多 console.log 逻辑分组的方式。然后,你可以在需要时通过折叠组以将其隐藏。相当容易使用:
console.group();
console.log({ restaurantName: 'Pizza Palace' });
console.groupEnd();
该组可能会整体折叠。如果你需要在控制台上记录很多内容,这可能会很有用。
在 JavaScript 中,有很多方法可以用于 console 对象。它们可以帮我们进行开发,以便可以根据类型过滤消息;查看表中的一项或多项;或者将它们组合在一起或折叠它们,以便在需要时将其隐藏。它将改善你的工作流程。
以更快的速度和更高的效率来调试JavaScript,js调试,熟悉工具可以让工具在工作中发挥出更大的作用。尽管江湖传言 JavaScript 很难调试,但如果你掌握了几个技巧,就能用很少的时间来解决错误和bug。
断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了。本文主要介绍了“逐语句执行”按钮、“逐过程执行”按钮、console控制台这三个工具,以及调试bug时的一些思路。
js的console对象主要用于在浏览器控制台中输出一些常量或变量,除了大家常用的console.log()方法外,这篇文章在整理总结一些关于console调试的一些小技巧。
对于JavaScript来说,你只需要花一点时间进行调试和分析,你就能够了解到JavaScript代码段的功能逻辑:1. 检测未知的执行环境(我们的代码只想在浏览器中被执行);2. 检测调试工具(例如DevTools);3. 代码完整性控制;4. 流完整性控制;5. 反模拟;
调试准备,安装插件:Chrome,安装方法:Debug -> Install Additional Debuggers... -> Debugger for Chrome,重新启动vscode即可。首先该插件运行需要安装有本地服务器,其次有两种配置方式
在这里 tap 是一个可以用来快速调试、链式调用、匿名函数,还可以打印任何你想打印的东西的函数。为什么我们不用 console.log 这个老方式了?
可使用npm进行安装:在项目的根html文件的<head>标签中引入dist/vconsole.min.js,也可使用CDN免安装:同样需要放在项目根html文件的<head>标签中
除了console.log, debugger是我们最喜欢、快速且肮脏的调试工具;可以通过console.log查看并滚动浏览,亦或者使用console.table展开,更容易看到正在处理的内容!
前端开发中经常用到浏览器的console控制台,而在console.log和console.debug中有时候可以看见%d %s这样的符号,其意义和用法如下
vConsole腾讯出品的 Web 调试面板,相信不少前端小伙伴都用过。Charles 是一款强大的抓包工具,可以截取包括 https 在内的各种网络请求并方便的查看具体信息。weinre是一款很不错的网页检查工具,可以通过在本地启动一个 weinre 服务
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!