作者：CraigBuckler译者：前端小智来源：.本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。我在调试代码的时候基本都是使用console.log()调试方式。虽然它是低级的，但很容易使用。当然，遇到复杂的点会用到其他工具，但是console.log()对于日常开发来说基本够用了。前缀差不多准备好了。今天我们就来看看console.log()中其他奇特的写法。1.使用ES6解构赋值输出变量名。如果打印多个值，为了区分它们，我们通常将它们连同变量名一起打印：constvariableX=42;console.log('variableX:',variableX);//或console.log(`variableX:${variableX}`);其实还有一个很简洁的解构使用方式：constvariableX=42;console.log({variableX});//{variableX:42}2.使用正确的打印类型console.log()通常这样使用：console.log('no-frillslogmessage');但它不是唯一的类型。消息可以归类为信息（其处理方式与console.log()相同）。console.info('这??是一条信息消息');warning:console.warn('我警告过你这可能会发生！');error:console.error('对不起戴夫，恐怕我做不到');或不太重要的调试信息：console.debug('nothingtoseehere-pleasemovealong');console.table()可以以更友好的格式输出对象的值。constobj={propA:1,propB:2,propC:3};console.table(obj);或对象数组：constarr2=[{a:1,b:2,c:3},{a:4,b:5,c:6},{a:7,b:8,c:9}];console.table(arr2);其他选项包括：console.dir(obj)显示交互式属性列表console.dirxml(element)显示指定HTML或XML节点的子元素的交互式树。console.clear()清除控制台上所有以前的信息。3.过滤日志消息浏览器以适当的颜色显示日志消息，但也可以过滤以显示特定类型。您可以通过单击控制台窗格左上角的图标来打开Chrome的边栏。请注意，console.debug()消息仅在查看详细选项时显示。4.使用printf-type的消息所有日志类型都可以使用C风格的printf消息格式，它定义了一个包含替换变量的%指示符的模板。例如console.log('Theanswerto%sis%d.','life,theuniverseandeverything',42);//Theanswertolife,theuniverseandeverythingis42.Styledconsole.log('%cOK，现在情况真的很糟糕！',`font-size:2em;padding:0.5em2em;margin:1em0;color:yellow;background-color:red;border-radius:50%;`);控制台中的结果：6.使用类似测试的断言类似测试的console.assert()命令可用于在条件失败时输出消息。断言可以定义一个条件和一个或多个对象在条件失败时输出，例如console.assert(life===42,'lifeisexpectedtobe',42,'butissetto',life);或者，可以使用消息和替换值。console.assert(life===42,'life预计为%s但被设置为%s',42,life);当条件失败时，这两个选项都会显示断言错误。7.运行堆栈跟踪您可以使用console.trace()输出构成当前执行点的所有函数调用的日志。函数callMeTwo(){console.trace();返回真；}函数callMeOne(){返回callMeTwo();}constr=callMeOne();跟踪显示每次调用在哪一行，可以在控制台窗格中查看收起或展开：8.分组日志消息打印日志时，可以在开头使用console.group(label)将日志消息分为命名组和控制台。groupEnd()最后。消息组可以嵌套和折叠或展开（console.groupCollapsed(label)最初显示处于折叠状态的组）：//startloggroupconsole.group('iloop');for(leti=3;i>0;我--){console.log(i);//启动折叠日志组console.groupCollapsed('jloop');for(letj=97;j<100;j++){console.log(j);}//结束日志组(jloop)console.groupEnd();}//结束日志组(iloop)console.groupEnd();9.使用定时器console.time和console.timeEnd这两个方法可以让WEB开发者测量一个javascript脚本程序执行所消耗的时间。随着WEB应用越来越重要，JavaScript的执行性能也越来越受到重视，WEB开发者都知道一些性能测试机是必不可少的。console.time方法是开始计时，console.timeEnd是停止计时，输出脚本的执行时间。//启动定时器console.time('testForEach');//(写一些测试代码)//停止计时，输出时间console.timeEnd('testForEach');//4522.303ms两种方法都可以传一个参数作为定时器的名称，其作用是在代码并行运行时区分各个定时器。调用console.timeEnd会立即输出以毫秒为单位的总执行时间。10.按名称调试和监控功能DevToolsSources面板（或Firefox中的调试器）允许通过单击行号打开文件和设置断点。基于Chrome的浏览器还允许您通过在控制台中键入debug(functionName)来设置断点，例如：debug(doSomething)；该函数必须在全局命名空间中可用，浏览器将在调用设备时立即开始调试。可以使用undebug(functionName)或重新加载页面来取消调试。monitor(function)，它接收一个函数名作为参数，比如函数a，每执行一次a，它就会在控制台输出一条消息，消息中包含函数名a和执行时传入的参数。unmonitor(function)用于停止此监视。11.查找并修复事件监听器FirefoxDevToolsInspector面板将在任何附加了处理程序的DOM元素旁边显示一个事件图标。单击该图标可查看函数名称，然后单击左侧的箭头图标可展开代码。或者，“在调试器中打开”图标将在调试器窗格中定位处理程序，以便可以设置断点.例如，getEventListeners($0)显示应用于当前Elements面板中突出显示的DOM节点的监听器12.将属性复制到剪贴板控制台的copy()命令可以将任何值复制到剪贴板。它可以是原始值、数组、对象或DOM节点。当传递一个DOM节点时，copy()将该元素及其所有子元素的HTML放置在剪贴板上。这与右键单击节点并选择复制，然后选择复制外部HTML相同。命令copy(document.documentElement)复制整个HTML文档。这可以粘贴到文本编辑器中并进行美化以提高可读性。~最后，方法有很多，我选择自己用，我是小智，我去洗碗了，我们下期见~代码部署后可能存在的bug无法真实知道时间。之后为了解决这些BUG，花了很多时间在记录Debugging上，顺便推荐一个好用的BUG监控工具Fundebug。原文：https://blog.openreplay.com/1...交流有梦想，有干货，微信搜索【大招天下】关注这位大清早还在洗碗的洗碗智慧。本文GitHubhttps://github.com/qq44924588...已收录，有完整的测试站点、资料和我的一线厂商访谈系列文章。
