javascript代码调试中console.log用法的详细说明

每个人都用过各种各样的浏览器，每个浏览器都有自己的特点。以我的拙见，在我用过的浏览器中，我最喜欢Chrome，因为它在调试脚本和前端设计调试方面都优于其他浏览器。可能大家都会对console.log有一定的了解，在调试的时候难免会想用alert。为什么要使用像console.log这样的长字符串来代替警报输出信息？我将介绍一些入门调试技巧，让你爱上console.log。

首先简单介绍一下chrome控制台，打开chrome浏览器，按f12即可轻松打开控制台

你可以看到控制台里有一首诗和其他信息。如果你想清空控制台，你可以点击左上角的那个

当然，要清除，您也可以通过在控制台中输入console.clear()来清除控制台信息。如下图所示

现在假设一个场景，如果一个数组中有数百个元素，但是你想知道每个元素的具体值，那么想想如果你使用alert会有多惨，因为alert会阻止线程运行，除非你点击alert框中的OK按钮，否则下一个alert不会出现。

让我们用console.log代替它，感受它的魅力。

看完上图，你意识到日志的力量了吗？让我们看看控制台中为我们的日常调试提供了哪些方法。

当前的控制台方法和属性有：

['$$ '，' $x '，' dir '，' dirxml '，' key '，' values '，' profile '，' profileEnd '，' monitorEvents '，' inspect '，' copy '，' clear '，' getEventListeners '，' undebug '，' monitor '，' unmonitor '，' table '，' $0 '，' $1 '，' $2 '，' $3 '，' $4 '，' $_']

让我们逐一介绍每种方法的主要用途。

在正常情况下，我们主要使用以下四种方法来输入信息

1.console.log用于输出一般信息

2.console.info用于输出提示信息

3.console.error用于输出错误信息

4.console.warn用于输出警告信息

5.console.debug用于输出调试信息

用图片说话

控制台对象的上述五种方法都可以使用printf样式的占位符。但是，占位符的种类很少，仅支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)。

Console.log('%d年，%d月，%d日'，2011年3月26日)；Console.log ('pi为%f '，3.1415926)；

%o占位符，可用于查看对象的内部情况

var dog={ }；Dog.name='大毛'；Dog.color='黄色'；console . log(“% o”，dog)；

6.console.dirxml用于显示网页某个节点中包含的html/xml代码

body table id=' my table ' tr TDa/TD TDa/TD TDa/TD/tr TDbbb/TD TDaaa/TD TDCCC/TD/tr TD111/TD TD333/TD TD222/TD/tr/table/body script type=' text/JavaScript ' window . onload=function(){ var my table=document . getelementbyid(' my table ')；console . dirxml(my table)；}/脚本

7.console.group输出一组信息的开头

8.console.groupEnd结束一组输出信息

根据您的需要，选择不同的输出方法来使用。如果将以上四种方法与group和groupEnd方法结合使用，可以以不同的形式输入各种输出信息。

哈哈，你觉得很神奇吗？

9.console.assert断言输入表达式，只有当表达式为false时，相应的信息才会输出到控制台

10、console.count(这个方法很实用)当你想统计代码被执行的次数时，

11.console.dir(这个方法我经常用，但是不知道比for in方便多少)直接输出DOM树结构中的DOM节点，可以详细查看对象的方法开发等等

12.控制台。时间计时器启动

13.console.timeEnd计时结束(看完下图瞬间就能感受到它的威力)

14.console.profile和console.profileEnd一起用于查看与CPU使用相关的信息

您可以在“配置文件”面板中查看与cpu相关的使用信息

15.console.timeLine和console.timeLineEnd协作记录一个时间轴。

16.与console.trace堆栈跟踪相关的调试

以上方法只是我个人的理解。如果你想查具体的API，可以通过官方查出来。具体地址是：https://developer.chrome.com/devtools/docs/console-api

控制台的一些快捷键

1、键盘按键的方向，你用的时候就知道了。例如，使用向上键相当于使用控制台中的最后一个输入符号

2.$ _命令返回最后一次表达式执行的结果，其功能与按向上箭头键然后输入相同

上面的$ _需要理解它的含义才能正确使用，而$0~$4则代表你选择的最后五个DOM节点。

你什么意思？在页面上右键选择review元素，然后在弹出的DOM节点树上随机点击。这些被点击的节点将被记录，而$0将返回最后被点击的DOM节点，以此类推。$1将返回最后点击的DOM节点，最多保存5个。如果不够，将返回undefined。

3.Chrome控制台本身支持类jQuery的选择器，这意味着您可以使用$加上熟悉的css选择器来选择DOM节点

4.复制此命令可以将控制台中获得的内容复制到剪贴板

(哈哈，刚从控制台复制过来的正文中的html可以粘贴到任何地方，比如记事本，你觉得很强大吗)

5.键和值前者返回由传入对象的所有属性名组成的数据，而后者返回由所有属性值组成的数组

说到这，我不禁想起了桌案法

6、监控设备

Monitor(function)，接收一个函数名作为参数，比如函数a，每次执行函数a，都会在控制台输出一条消息，消息中包含函数a的名称和执行过程中传入的参数。

Unmonitor(函数)用于停止此监控。

看完这个图应该明白，monitor和unmonitor之间的代码在执行时会在控制台上输出一条消息，其中包含函数a的名称和执行时传入的参数。当监控被移除时(即，当卸载程序被执行时)，信息将不再在控制台中输出。

$//简单理解只是文档. queryselector $ $//简单理解只是文档. queryselectorall $ _//是上一个表达式的值，$0-$4 //是最后五个Elements面板选择的DOM元素，后面会讨论。Dir //实际上是console.dirkeys //取对象的键名，返回由键名组成的数组值//移除对象的值，返回由返回值组成的数组。

让我们来看看console.log的一些技巧

1.重写console.log以更改输出文本的样式

2.使用控制台输出图片

3.指定输出文本的样式

最后，我们来说说chrome控制台的一个简单操作，如何查看页面元素，见下图

只需在控制台上操作就可以知道。你觉得很简单吗？