程序猿节日：分享几个日常调试方法让js调试更简单
EspTrott
7年前
<p style="text-align:center"><img src="https://simg.open-open.com/show/67115d387f9b6d8534c7ef3bc8ab0ccf.jpg"></p> <h2> </h2> <p>又是一年1024了，去年那些单身的程序猿今年还单身吗？</p> <p>1024是个美好的日子~程序员节，圈外并没有多少人知道，在班群里默默的讨红包求人介绍女朋友。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/a037e23ee2ca4de1ebf8f324c43b1824.png"></p> <p>当然要举一反三~</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/724933edc197ffa4a83fb3b9a7a00281.jpg"></p> <p>下面分享几个日常调试代码的时候在Console命令行显示你的操作，让你的js调试更简单。</p> <ul> <li> <h2><strong>console显示信息的命令</strong></h2> <p>在浏览器按f12在console上显示你的文本。</p> </li> </ul> <pre> <code class="language-javascript"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="telephone=no" name="format-detection"> <title>热点电视</title> <meta name="keywords" content="热点电视的关键词"> <meta name="description" content="热点电视的网站描述"> </head> <body> <div id="example">10.24程序猿节日</div> <script> console.log('hello000'); console.info('信息111'); console.error('错误222'); console.warn('警告333'); </script> </body> </html></code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/60801c9b3691079daec6107a50a6be93.png"></p> <h2> </h2> <ul> <li> <p>console信息分组</p> </li> </ul> <p>在console上区分开小组信息。</p> <pre> <code class="language-javascript"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="telephone=no" name="format-detection"> <title>热点电视</title> <meta name="keywords" content="热点电视的关键词"> <meta name="description" content="热点电视的网站描述"> </head> <body> <div id="example">10.24程序猿节日</div> <script> console.group("第一组信息"); console.log("第一组第一条:今天是"); console.log("第一组第二条:10.24"); console.groupEnd(); console.group("第二组信息"); console.log("第二组第一条:程序猿节日"); console.log("第二组第二条:节日快乐"); console.groupEnd(); </script> </body> </html></code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/cda25173db4b58d469ec3e30e2baec17.png"></p> <h2> </h2> <ul> <li> <p>console占位符</p> </li> </ul> <p>console上述的集中度支持printf的占位符格式，支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）。</p> <pre> <code class="language-javascript"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="telephone=no" name="format-detection"> <title>热点电视</title> <meta name="keywords" content="热点电视的关键词"> <meta name="description" content="热点电视的网站描述"> </head> <body> <div id="example">10.24程序猿节日</div> <script> console.log("%d年%d月%d日",2016,10,24); </script> </body> </html></code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/5d5f5a023d63e093cf17acd3915d195d.png"></p> <h2> </h2> <ul> <li> <p>console查看对象的信息</p> </li> </ul> <p>console.dir()可以显示一个对象所有的属性和方法</p> <pre> <code class="language-javascript"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="telephone=no" name="format-detection"> <title>热点电视</title> <meta name="keywords" content="热点电视的关键词"> <meta name="description" content="热点电视的网站描述"> </head> <body> <div id="example">10.24程序猿节日</div> <script> var info = { boom: "10.24程序猿节日", message: "不加班" }; console.dir(info); </script> </body> </html></code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/7922306451cf6c2e80e900016e9ea143.png"></p> <h2> </h2> <ul> <li> <p>console显示某个节点的内容</p> </li> </ul> <p>用 <strong>console.dirxml()</strong> 用来显示网页的某个节点（node）所包含的html/xml代码。</p> <pre> <code class="language-javascript"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="telephone=no" name="format-detection"> <title>热点电视</title> <meta name="keywords" content="热点电视的关键词"> <meta name="description" content="热点电视的网站描述"> </head> <body> <div id="example">10.24程序猿节日</div> <script> var info = document.getElementById('example'); console.dirxml(info); </script> </body> </html></code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/5786e6e42796d8601d5262edb37dd1c3.png"></p> <h2> </h2> <ul> <li> <p>判断变量是否是真</p> </li> </ul> <p><strong>console.assert()</strong> 用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。（这里代码中，console.assert()语句保证cat对象的score变量值长度为3，不过我为了显示错误把3改成4。）</p> <pre> <code class="language-javascript"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="telephone=no" name="format-detection"> <title>热点电视</title> <meta name="keywords" content="热点电视的关键词"> <meta name="description" content="热点电视的网站描述"> </head> <body> <div id="example">10.24程序猿节日</div> <script> function cat(name, age, score){ this.name = name; this.age = age; this.score = score; } var c = new cat("miao", 2, [6,8,7]); console.assert(c.score.length==4, "Assertion of score length failed123456"); </script> </body> </html></code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/25ff1f5b8d957f648584fc70ab94ae1d.png"></p> <h2> </h2> <ul> <li> <p>追踪函数的调用轨迹</p> </li> </ul> <p>console.trace()用来追踪函数的调用轨迹。</p> <pre> <code class="language-javascript"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="telephone=no" name="format-detection"> <title>热点电视</title> <meta name="keywords" content="热点电视的关键词"> <meta name="description" content="热点电视的网站描述"> </head> <body> <div id="example">10.24程序猿节日</div> <script> /*函数是如何被调用的，在其中加入console.trace()方法就可以了*/ function add(a, b) { console.trace(); return a + b; } var x = add3(1, 1); function add3(a, b) { return add2(a, b); } function add2(a, b) { return add1(a, b); } function add1(a, b) { return add(a, b); } </script> </body> </html></code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/9dd712ed3a4fd93c07c3b2faff920db7.png"></p> <h2> </h2> <ul> <li> <p>计时功能</p> </li> </ul> <p>console.time()和console.timeEnd()，用来显示代码的运行时间。</p> <pre> <code class="language-javascript"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="telephone=no" name="format-detection"> <title>热点电视</title> <meta name="keywords" content="热点电视的关键词"> <meta name="description" content="热点电视的网站描述"> </head> <body> <div id="example">10.24程序猿节日</div> <script> console.time("控制台计时器一"); for (var i = 0; i < 1000; i++) { for (var j = 0; j < 1000; j++) {} } console.timeEnd("控制台计时器一"); </script> </body> </html></code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/36222f9b9330914ddfc519ddb0502ede.png"></p> <h2> </h2> <ul> <li> <p>console.profile()的性能分析</p> </li> </ul> <p>性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile()。</p> <pre> <code class="language-javascript"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="telephone=no" name="format-detection"> <title>热点电视</title> <meta name="keywords" content="热点电视的关键词"> <meta name="description" content="热点电视的网站描述"> </head> <body> <div id="example">10.24程序猿节日</div> <script> function All() { alert(11); for (var i = 0; i < 10; i++) { funcA(1000); } funcB(10000); } function funcA(count) { for (var i = 0; i < count; i++) {} } function funcB(count) { for (var i = 0; i < count; i++) {} } console.profile('性能分析器'); All(); console.profileEnd(); </script> </body> </html></code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/10bdb28506d29384c21e26d3f187d3ee.png"> <img src="https://simg.open-open.com/show/e8e74af92f0d0665ff5e66f06f1eea42.png"></p> <p> </p> <p> </p> <p>来自：https://zhuanlan.zhihu.com/p/23162358</p> <p> </p>