web开发中最常用的高度就是console.log，虽然console.log有一席之地，但是很多人没有意识到console本身除了基本的log还有很多其他的方法方法。适当地使用这些方法可以使调试更简单、更快速、更直观。console.log()在console.log中有很多意想不到的功能。虽然大多数人使用console.log(object)来查看对象，但您也可以使用console.log(object,otherObject,string)将它们整齐地记录下来，偶尔会很方便。不仅如此，还有一个格式化的：console.log(msg,values)，很像C或PHP中的sprintf。console.log('Ilike%sbutIdonotlike%s.','Skittles','pus');将按照您的预期输出：>IlikeSkittlesbutIdonotlikepus。常见的占位符%o（这是字母o，不是0），它接受对象，%s接受字符串，%d代表小数或整数。另一个有趣的事情是%c，它可能不是你想的那样，它实际上是一个CSS值的占位符。使用%c占位符时，对应的后续参数必须是CSS语句，用于用CSS渲染输出内容。常见的输出方式有两种：文字样式和图片输出。console.log('Iama%cbutton','color:white;background-color:orange;padding:2px5px;border-radius:2px');它不优雅，也不是特别有用。当然，这并不是真正的按钮。它有效吗？能量。在大多数情况下，console.dir()console.dir()的功能与log()非常相似，尽管它看起来略有不同。小下拉箭头将显示与上面相同的对象详细信息，这也可以从console.log版本中看到。当您查看元素的结构时，您会发现它们之间的差异更大且更有趣。letelement=document.getElementById('2x-container');检查console.log：一些元素已打开，这清楚地显示了DOM，我们可以在其中导航。但是console.dir(element)给出的输出更便于查看DOM结构：这是一种更客观的查看元素的方式。有时这可能是您真正想要的，更像是检查元素。console.warn()可能是log()最明显的直接替代品，您可以以完全相同的方式使用console.warn()。唯一真正的区别是输出词颜色是黄色。具体来说，输出处于警告级别而不是信息级别，因此浏览器会略有不同地对待它。这具有使其在杂乱的输出中更加明显的效果。然而，还有一个更大的优势，因为输出的是警告而不是信息，你可以过滤掉所有的console.log并只保留console.warn。这对于偶尔会在浏览器中输出大量无用废话的应用程序特别有用。清除掉一些无用的信息可以更容易地看到你想要的输出。console.table()令人惊讶的是，这并不为人所知，但console.table()函数旨在以比仅转储原始对象数组更简洁的方式显示表格数据。例如，这里是一个数据列表。constdata=[{id:"7cb1-e041b126-f3b8",seller:"WAL0412",buyer:"WAL3023",price:203450,time:1539688433},{id:"1d4c-31f8f14b-1571",seller:"WAL0452",买家:"WAL3023",价格:348299,时间:1539688433},{id:"b12c-b3adf58f-809f",卖家:"WAL0012",买家:"WAL2025",价格:59240,时间:1539688433}];如果我们使用console.log输出上面的内容，我们会得到一些非常无用的输出：?(3)[{…},{…},{…}]点击这个小箭头展开，可以看到对象的内容，然而，并不是我们想要的“一目了然”。但是console.table(data)的输出更有用。第二个可选参数是必需列的列表。显然，所有列都是默认值，但我们也可以这样做：>console.table(data,["id","price"]);注意这里是乱序的——最右边的列标题上面的箭头显示了原因。我单击该列进行排序。非常方便查找列的最大值或最小值，或者只是以不同的方式查看数据。顺便说一句，该功能与仅显示一些列无关，它始终可用。console.table()最多只能处理1000行，因此它可能不适合所有数据集。console.assert()assert()与log()功能相同，assert()对输入的表达式进行断言，只有当表达式为false时，才向控制台输出相应的信息，示例如下：vararr=[1,2,3]；console.assert(arr.length===4);有时我们需要更复杂的条件句。例如，我们发现用户WAL0412的数据存在问题，并希望仅显示来自该数据的交易，这是一种直观的解决方案。console.assert(tx.buyer==='WAL0412',tx);这看起来不错，但行不通。请记住，断言执行的条件必须为假，将其更改为：console.assert(tx.buyer!=='WAL0412',tx);与其中一些一样，console.assert()并不总是特别有用。但在特定情况下，这可能是一个优雅的解决方案。console.count()是另一个专用计数器，count只是作为计数器使用，或者作为命名计数器，可以统计代码执行的次数。for(leti=0;i<10000;i++){if(i%2){console.count('odds');}if(!(i%5)){console.count('multiplesOfFive');}if(isPrime(i)){console.count('prime');}}这不是有用的代码，而且有点抽象。我不打算在这里演示isPrime函数，假设它是真的。执行后我们会得到一个列表：odds:1odds:2prime:1odds:3multiplesOfFive:1prime:2odds:4prime:3odds:5multiplesOfFive:2...还有一个相关的console.countReset()，可以用来重置柜台。console.trace()trace()很难用简单的数据来证明。当您试图找出导致问题的类或库中的实际调用者时，它的优势就来了。例如，可能有12个不同的组件调用一个服务，但其中一个没有正确设置依赖关系。exportdefaultclassCupcakeService{constructor(dataLib){this.dataLib=dataLib;if(typeofdataLib!=='object'){console.log(dataLib);console.trace();}}...}在这里使用console.log()它只是告诉我们dataLib是什么，并没有具体的传递路径。然而，console.trace()会非常清楚地告诉我们问题出在Dashboard.js上，我们可以看到newCupcakeService(false)导致了错误。console.time()console.time()是一个专门用于跟踪操作时间的函数，它是跟踪JavaScript执行时间的好方法。functionslowFunction(number){varfunctionTimerStart=newDate().getTime();//somethingsloworcomplexwiththenumbers.//Factorials,orwhatever.varfunctionTime=newDate().getTime()-functionTimerStart;console.log(`Functiontime:${functionTime}`);}varstart=newDate().getTime();for(i=0;i<100000;++i){slowFunction(i);}vartime=newDate().getTime()-start;console.log(`执行时间：${time}`);这是一种老派的做法，我们使用console.time()来简化上面的代码。constslowFunction=number=>{console.time('slowFunction');//somethingsloworcomplexwiththenumbers.//Factorials,orwhatever.console.timeEnd('slowFunction');}console.time();for(i=0;i<100000;++i){slowFunction(i);}console.timeEnd();我们现在不再需要进行任何计算或设置临时变量。console.group()//thisistheglobalscopeletnumber=1;console.group('OutsideLoop');console.log(number);console.group('Loop');for(leti=0;i<5;i++){number=i+number;console.log(number);}console.groupEnd();console.log(number);console.groupEnd();console.log('Alldonenow');输出如下：不是很有用，但你可以看到其中一些是如何组合在一起的。classMyClass{constructor(dataAccess){console.group('Constructor');console.log('Constructorexecuted');console.assert(typeofdataAccess==='object','PotentiallyincorrectdataAccessobject');this.initializeEvents();console.groupEnd();}initializeEvents(){console.group('events');console.log('Initialisingevents');console.groupEnd();}}letmyClass=newMyClass(false);这是很多工作和很多调试信息代码，可能没那么有用。但这仍然是一个有趣的想法，并且以这种方式编写它可以使您的日志记录更加清晰。选择DOM元素如果您熟悉jQuery，就会知道$('.class')和$('#id')选择器的重要性。他们根据关联的类或ID选择DOM元素。但是当您没有引用jQuery时，您仍然可以在GoogleDevConsole中执行相同的操作。$('tagName')$('.class')$('#id')和$('.class#id')等价于document.querySelector('')，会返回DOM中的选择器的第一个元素。可以使用\$\$(tagName)或\$\$(.class)，注意二进制符号，根据特定的选择器选择DOM的所有元素。这也将它们放入一个数组中，您还可以通过指定该元素在数组中的位置来从中选择特定元素。例如，$$('.className')获取所有具有类className的元素，而\$\$('.className')[0]和\$\$('.className')[1]获取的是分别是第一个和第二个元素。将浏览器变成编辑器有多少次您想知道是否可以在浏览器中编辑一些文本？答案是肯定的，您可以将浏览器转换为文本编辑器。您可以在DOM中的任何位置添加和删除文本。您不再需要检查元素和编辑HTML。相反，进入开发人员控制台并输入以下内容：document.body.contentEditable=true这将使内容可编辑。现在，您几乎可以编辑DOM中的任何内容。查找与DOM中的元素关联的事件在调试时，当您需要查找DOM中某个元素的事件监听器时，GoogleConsole添加了getEventListeners以使得查找这些事件更加简单和直观。getEventListeners($('selector'))返回包含绑定到此元素的所有事件的对象数组。您可以展开对象以查看事件：要查找特定事件的侦听器，请执行以下操作：getEventListeners($('selector')).eventName[0].listener这将显示与特定事件关联的侦听器。这里的eventName[0]是一个数组，其中列出了特定事件的所有事件。例如：getEventListeners($('firstName')).click[0].listener将显示与ID为“firstName”的元素的点击事件关联的侦听器。监视事件如果您希望在执行时监视绑定到DOM中特定元素的事件，您也可以在控制台中执行此操作。您可以使用不同的命令来监控部分或全部这些事件：如果您想要在DOM中的特定元素执行时监控绑定到特定元素的事件，您也可以在控制台中执行此操作。您可以使用不同的命令来监视部分或所有这些事件：monitorEvents($('selector'))将监视与选择器元素关联的所有事件，然后在它们被触发时将它们打印到控制台。例如，monitore($(#firstName))将打印ID为firstName元素的所有事件。monitorEvents($('selector'),'eventName')将打印绑定到元素的特定事件。您可以将事件名称作为参数传递给函数。这只会记录绑定到特定元素的特定事件。例如，monitorEvents($('#firstName'),'click')将打印所有绑定到ID为“firstName”的元素的点击事件。monitere($(selector),[eventName1,eventName3',.])会根据自己的需要记录多个事件。不是传递单个事件名称作为参数，而是传递包含所有事件的字符串数组。例如monitore($(#firstName),[click,focus])会记录ID为firstName的元素绑定的click事件和focus事件。unmonitorevent($(selector))：这将停止监视并在控制台中打印事件。检查DOM中的元素您可以直接从控制台检查元素：inspect($('selector'))将检查与选择器匹配的元素并转到Chrome开发人员工具中的元素选项卡。例如，inspect($('#firstName'))将检查ID为'firstName'的元素，而spect($('a')[3])将检查DOM中的第4个a元素。$0、$1、$2等可以帮助您获取最近检查的元素。例如，$0表示检查的最后一个DOM元素，而$1是检查的倒数第二个DOM元素。要检索最后结果的值，您可以将控制台用作计算器。执行此操作时，您可能需要使用第二个来跟踪计算。下面介绍如何从内存中检索之前计算的结果：$_过程如下：2+3+49//-TheAnsweroftheSUMis9$_9//GivesthelastResult$_*$_81//AstelastResultwas9Math.sqrt($_)9//AstelastResultwas81$_9//AstheLastResultis9清除控制台和内存如果要清除控制台及其内存，请输入以下内容：clear()无法实时了解代码部署后可能存在的错误。之后为了解决这些BUG，花了很多时间记录Debugging，顺便推荐一个好用的BUG监控工具Fundebug。
