如果您从事Web编程，则意味着您无需谈论调试在您的工作中的重要性。 通常，外部库用于将数据写入日志，对其进行格式化或将其显示在屏幕上，而无需考虑程序员具有用于处理内置于浏览器中的控制台的JavaScript命令的事实。 而且这些控制台的功能比乍看之下要严重得多。
许多人说“控制台”时想到的第一件事就是
console.log()命令。 但是，她只是许多这样的团队之一。 该材料（我们今天发布的翻译）专用于使用JavaScript控制台的功能。
什么是控制台？
JavaScript控制台是一种集成到现代浏览器中的机制，它在命令行界面中支持内置开发工具。 使用控制台，开发人员可以执行以下操作：
- 查看网页上发生的错误和警告日志。
- 使用JavaScript命令与网页进行交互。
- 直接从浏览器调试应用程序并使用DOM。
- 调查和分析网络活动。
通常，控制台使开发人员能够直接在浏览器中编写JavaScript代码，监视页面上发生的事情以及管理这些过程。
方法console.log，console.error，console.warn和console.info
使用控制台时，最常用的方法可能是
console.log() ，
console.error() ，
console.warn()和
console.info() 。 您可以将一个或多个参数传递给这些方法。 系统将计算每个值，然后将所有结果组合成一个字符串，字符串的一部分由空格分隔。 对于对象或数组，这些命令允许您以允许您查看其内容的形式显示它们。 这是它的外观。
使用各种命令将数据输出到控制台Console.group方法
console.group()方法允许您
console.group()的一系列调用（以及其他类似方法）收集到可以折叠和扩展其内容的组中。 使用此方法非常简单：在调用
console.group() （或在
console.groupCollapsed() ，如果要立即显示最小化的组），则需要放置所有需要分组的
console.log()调用。 然后，在要分组的命令集的末尾，您需要放置
console.groupEnd()命令。 考虑一个例子。
function doSomething(obj){ console.group('doSomething Profile'); const _data = new Date(); console.log('evaluating data: ', _data); const _fullName = `${obj.firstName} ${obj.lastName}`; console.log('fullName: ', _fullName); const _id = Math.random(1); console.log('id: ', _id); console.groupEnd(); } doSomething({"firstName":"Riccardo", "lastName":"Canella"});
执行完此代码片段后，以下内容将进入控制台。
使用console.group（）方法在控制台中对数据进行分组Console.table方法
了解了
console.table()方法的存在之后，我的生活永远改变了。 例如，使用常规
console.log()命令输出JSON代码或大型JSON数组是一场噩梦。
console.table()方法允许您在漂亮的表中显示复杂的数据结构，可以通过将其列作为参数来给它们的列命名（并非所有浏览器都支持
console.table() ）。 这是与该团队合作的一个例子。
const typeOfConsole = [ {name:'log', type:'standard'}, {name:'info', type:'standard'}, {name:'table', type:'wow'} ]; console.table(typeOfConsole); const mySocial = { facebook: true, linkedin: true, flickr: true, instagram: true, VKontaktebadoo: false }; console.table(mySocial, ["Socials", "I'v an account"]);
发生了什么，看起来很棒，并且可以促进调试。
使用console.table（）制表输出方法console.count，console.time和console.timeEnd
对于从事调试应用程序的开发人员，可以将
console.count() ，
console.time()和
console.timeEnd()方法称为“瑞士刀”。 因此，
console.count()方法允许您计算自己的调用次数，并使用给定标签将其显示在控制台中。
console.time()方法允许您运行一个命名计时器（名称作为参数传递给它，一个页面上最多可以存在10,000个计时器）。 为了停止特定的计时器，将
console.timeEnd()命令与作为参数传递的计时器标签一起使用。 她停止计时器并在控制台中显示他的工作时间。 这是使用这些方法的方法。
console.time('total'); console.time('init arr'); const arr = new Array(20); console.timeEnd('init arr'); for(var i = 0; i < arr.length; i++){ arr[i] = new Object(); const _type = (i % 2 === 0) ? 'even' : 'odd'; console.count(_type+'added'); } console.timeEnd('total');
这是此代码在控制台中工作的结果。
使用console.count（），console.time（）和console.timeEnd（）方法Console.trace和console.assert方法
console.trace()和
console.assert()方法允许您从调用它们的位置输出堆栈信息。 假设您正在开发JS库，并想告诉用户错误发生在哪里。 在这种情况下，这些方法可能非常有用。
console.assert()方法类似于
console.trace() ，两者之间的区别在于
console.assert()仅在不满足传递给它的条件时才输出数据。 这是使用这些方法的方法。
function lesserThan(a,b){ console.assert(a<b, { "message":"a is not lesser than b", "a": a, "b": b }); } lesserThan(6,5); console.trace("End");
可以很容易地看到，这段代码生成的输出就像框架报告异常时在React（或任何其他库）中的输出一样。
使用console.assert（）和console.trace（）命令的结果使用控制台和生产代码的命令
在应用程序的开发和调试阶段，需要用于控制台的命令。 这意味着当需要发布产品时，这些命令将必须从代码中删除。 您可以简单地忘记它，并且在组装项目的生产版本后的一段时间内，请注意，该程序在不需要时会向控制台写入一些内容。 不要将计算机加载到不必要的工作中，尽管看起来与将数据输出到控制台无关紧要。 同时，考虑到用于控制台的命令在应用程序完成期间可能有用的事实，最好不要将其从程序的源代码中永久删除，而应仅从其生产版本中删除它们。 在这里，组装项目的资金将用于我们的援助。 因此，在工作中和我自己的项目中，我都会不断使用Webpack。 使用此工具，您可以使用
uglifyjs-webpack-plugin从生产程序
集中删除所有与控制台一起使用的不必要命令（它可以将它们与其他命令区分开）。
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') var debug = process.env.NODE_ENV !== "production"; ..... optimization: { minimizer: !debug ? [ new UglifyJsPlugin({ // uglifyOptions: { // comments: false, compress: { // warnings: false, // drop_console: true }, } })] : [] }
这种配置非常简单，但是它方便了程序员的日常工作，并且消除了忘记控制台命令的问题。
总结
在本文中，我们讨论了一些使用控制台的有用命令。 它们允许使用现代浏览器中的工具来解决客户端JavaScript应用程序的开发和调试所伴随的许多问题。
亲爱的读者们！ 您使用哪种与JavaScript控制台一起使用的命令？
