Console.log

见过太多同学调试Javascript只会用简单的console.log甚至alert，看着真为他们捉鸡。。因为大多数同学追求优雅而高效地写代码，却忽略了如何优雅而高效地调试代码，不得不说是有点“偏科”了。下面我就分享一些实用且聪明的调试技巧，希望能让大家调试自己代码的时候更加从容自信。 1. 不要使用alert首先，alert只能打印出字符串，如果打印的对象不是String，则会调用toString()方法将该对象转成字符串（比如转成[object Object]这种），所以除非你打印String类型的对象，其他什么信息都获取不到。其次，alert会阻塞UI和javascript的执行，必须点击'OK'按钮才能继续，非常低效。所以，喜欢使用alert的同学可以改改这个习惯了。 2. 学会使用console.logconsole.log谁都会用，但是很多同学只知道最简单的console.log(x)这样打印一个对象，当你的代码里面console.log多了之后，会很难将某条打印结果和代码对应，所以我们可以给打印信息加上一个标签便于区分： let x = 1;console.log('aaaaaaaa', x);得到： 标签不一定要有明确的含义，视觉效果显著就可以了，当然有明确意义更好。 事实上，console.log可以接收任意多的参数，最后将这些对象拼接输出，比如： 如果打印信息过多，不容易找到目标信息的话，可以在控制台中进行过滤： 注意点 在使用console.log打印一个引用类型（比如数组和自定义对象）的对象的时候，输出结果可能并不是执行console.log方法那个时间点的值。举个例子： 可以发现两个console.log输出的结果展开后都是[1, 2, 3, 4]，因为数组是引用类型，所以在展开后获取到的都是数组最新的状态。我们可以使用JSON.parse(JSON.stringify(...))来解决这个问题： 3. 学会使用console.dir我们有时候想看看一个DOM对象里面到底有什么属性和方法，但是常规的console.log打印出来的只是HTML标签，就像这样： 和直接审查元素没有什么区别。 如果我们想看到DOM对象作为JavaScript对象的结构可以使用console.dir，比如： 事实上，console.dir可以打印出任何JavaScript对象的属性列表，比如打印一个方法： 4. 学会使用console.table我们经常会遇到这样的场景：获取到一个用户列表，每个用户有很多属性，但是我们只想查看其中的某些属性，在用console.log打印出来的时候需要把每个用户对象展开一个个查看，非常麻烦。而console.table完美的解决这个问题，比如我只想获取到下列用户的id和坐标： console.log打印结果： console.table打印结果： 非常的准确和快速！ 5. 学会使用console.time有时候我们想知道一段代码的性能或者一个异步方法需要运行多久，这时候需要用到定时器，JavaScript提供了现成的console.time方法，例如： 6. 使用debugger打断点有时候我们需要打断点进行单步调试，一般会选择在浏览器控制台直接打断点，但这样还需要先去Sources里面找到源码，然后再找到需要打断点的那行代码，比较费时间。使用debugger关键词，我们可以直接在源码中定义断点，方便很多，比如： 7. 查到源码文件有时候我们想在控制台的Sources中查找某个js源文件，要把文件夹逐一点开找，非常麻烦。其实Chrome提供了文件的搜索功能，只不过大部分时候我们给忽略了。。 只要按Command + P（windows的快捷键请自行查看）就能弹出搜索框搜索你想要找的文件啦： 8. 压缩JS文件的阅读有时候我们需要在Sources中阅读一段js代码，但是发现它被压缩了，Chrome也提供了和方便的格式化工具，让代码变得重新可读： 点完之后变成这样： 以上就是我个人在平时比较常用的一些调试小技巧，如果大家有其他好的调试技巧也欢迎分享，谢谢????！

翻译：疯狂的技术宅原文：https://www.twilio.com/blog/g...本文首发微信公众号：前端先锋欢迎关注，每天都给你推送新鲜的前端技术文章 当你开始用 JavaScript 进行开发时，可能学到的第一件事就是如何用 console.log 将内容记录到控制台。如果你去搜索如何调试 JavaScript，会发现数百篇博文和 StackOverflow 文章都会简单的告诉你用 console.log。因为这是一种很常见的做法，我们甚至会在代码中使用像 no-console 这样的 linter 规则来确保不会留下意外的日志信息。但是如果我们真的想要去记录某些内容呢？ 在本文中，我们将梳理各种情况下要记录的日志信息，Node.js 中 console.log 和console.error之间的区别是什么，以及如何在不发生混乱的情况下把你库中的日志记录输出到用户控制台。 console.log(`Let's go!`);理论先行：Node.js 的重要细节虽然你可以在浏览器和 Node.js 中使用 console.log 或 console.error，但在使用 Node.js 时要记住一件重要的事。当你在 Node.js 中将以下代码写入名为 index.js 的文件中时： console.log('Hello there');console.error('Bye bye');并用 node index.js 在终端中执行它，你会直接看到两者的输出： 虽然它们看起来可能一样，但实际上系统对它们的处理方式是不同的。如果你查阅 Node.js 文档的 console部分，会看到 console.log 是输出到 stdout 而 console .error 用的是 stderr。 每个进程都有三个可用的默认 stream。那些是 stdin，stdout 和 stderr。 stdin 流用来在处理进程的输入。例如按下按钮或重定向输出。 stdout 流用于程序的输出。最后 stderr 用于错误消息。如果你想了解为什么会有 stderr 存在，以及应该在什么时候使用它，可以查看这篇文章。 简而言之，这允许我们在 shell 中使用重定向（>）和管道（|）来处理错误和诊断信息，它们是与程序的实际输出结果是分开的。虽然 > 允许我们将命令的输出重定向到文件中，但是 2> 允许我们将 stderr 的输出重定向到文件中。例如，下面这个命令会将 “Hello there” 传给一个名为 hello.log 的文件并把 “Bye bye” 传到一个名为 error.log 的文件中。 ...

最近我在做基于nodejs的微服务开发，需要在windows命令行里启动很多微服务。我的windows 10任务栏是这样子的：我想找一款能像下图Chrome标签页这样打开windows 10 CMD窗口的工具，在网上找了一圈后，发现了这个名叫console2的工具：网址：https://sourceforge.net/proje…下载下来压缩包只有1点几兆，解压即用。可以像Chrome那样任意新建tab：可以在多个tab间方便切换：

JavaScript-console的使用onsole 对象提供对浏览器控制台的接入（如：Firefox 的 Web Console）。不同浏览器上它的工作方式是不一样的，但这里会介绍一些大都会提供的接口特性。Console对象可以在任何全局对象中访问，如 Window，WorkerGlobalScope 以及通过属性工作台提供的特殊定义。它被浏览器定义为 Window.console，也可被简单的 console 调用。方法console.log()console.log(obj1 [, obj2, …, objN);console.log(msg [, subst1, …, substN);console.log(‘String: %s, Int: %d,Float: %f, Object: %o’, str, ints, floats, obj)console.log(temp的值为: ${temp})对于打印对象数据的时候要注意：原来浏览器在打印对象的时候只是打印的一个对象快照信息，当你在控制台点击展开对象的时候，浏览器才会去读这个对象具体属性，但是那个时候，这段代码早就已经运行完了类似出现这种，都为null的情况：SyntheticClipboardEvent {dispatchConfig: {…}, targetInst: ReactDOMComponent, nativeEvent: ClipboardEvent, type: “paste”, target: input, …}bubbles: nullcancelable: nullclipboardData: nullcurrentTarget: nulldefaultPrevented: nulldispatchConfig: nulleventPhase: nullisDefaultPrevented: nullisPropagationStopped: nullisTrusted: nullnativeEvent: nulltarget: nulltimeStamp: nulltype: null_dispatchInstances: null_dispatchListeners: null_targetInst: null__proto_: SyntheticEvent　console.table()这个方法需要一个必须参数 data，data 必须是一个数组或者是一个对象；还可以使用一个可选参数 columns。表格的第一列是 index。如果数据 data 是一个数组，那么这一列的单元格的值就是数组的索引。 如果数据是一个对象，那么它们的值就是各对象的属性名称。 注意（在 FireFox 中）console.table 被限制为只显示1000行（第一行是被标记的索引（原文：labeled index））。console.assert()console.assert为断言输出。第一个参数的表达式值为false时，则打印输出后面参数的值，否则为 true，则无输出并继续执行程序。例如：function notEqual(a, b) { console.assert(a === b, { msg: ‘a is not equal b’, a: a, b: b });}// console.assertnotEqual({a: 1}, {a: 2});console.time你可以启动一个计时器（timer）来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字，页面中最多能同时运行10,000个计时器。当以此计时器名字为参数调用 console.timeEnd() 时，浏览器将以毫秒为单位，输出对应计时器所经过的时间.https://developer.mozilla.org…https://www.jianshu.com/p/cf2… ...

对于一个特别喜欢用console.log来调试代码的人来说，console.log的一些坑和console.log的详细用法确实是一件值得深究的事。先记录一下console.log的一些坑：1.对于引用对象，比如Array和Object，打印出来的内容可能是当前在内存里的内容，而不是打印的那个时刻的内容2.对于一个大型项目而言，如果console.log过多，管理满屏的console.log是一件很恐怖的事，因为你很可能找不到想要的信息针对问题1，如果你还是要用console.log来debug，那么这是不可避免的。解决方法1：改变习惯，以后用断点的方式调试。解决方法2：使用JSON.stringify把对象变成字符串打印本文主要针对【问题2】提供了一个解决方案。代码如下let consoleVersion = [1000, 1001];let emptyFunc = function(){}let _log = function(version){ if(consoleVersion.includes(version)){ return console.log; }else{ return emptyFunc; }}使用方式log(1000)(‘显示1’);log(1001)(‘显示2’);log(1002)(‘不会显示1’);log(1003)(‘不会显示2’);原理是通过consoleVersion数组管理打印的内容，比如今天我需要调试登录模块我们记录登录模块的console.log的调试内容为1001，那么所有的登录模块的打印都使用这样的方式打印log(1001)(‘登录模块调试1’);log(1001)(‘登录模块调试2’);log(1001)(‘登录模块调试3’);log(1001)(‘登录模块调试4’);log(1002)(‘其他模块调试1’);然后设置consoleVersion = [1001];这样只会打印：登录模块调试1登录模块调试2登录模块调试3登录模块调试4不会打印其他内容