程序猿节日:分享几个日常调试方法让js调试更简单

EspTrott 8年前
   <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>