標籤：har 簡單 hub 控制 img url www tle target
一、顯示資訊的命令最常用的就是console.log了。
二、預留位置console上述的集中度支援printf的預留位置格式，支援的預留位置有：字元（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）:
<script type="text/javascript"> console.log("%d年%d月%d日",2011,3,26);</script>
%o、%O都是用來輸出Object對象的，對普通的Object對象，兩者沒區別，但是列印dom節點時就不一樣了：
// 格式成可展開的的DOM，像在開發人員工具Element面板那樣可展開 console.log(‘%o‘,document.body.firstElementChild); // 像JS對象那樣訪問DOM元素，可查看DOM元素的屬性 // 等同於console.dir(document.body.firstElementChild) console.log(‘%O‘,document.body.firstElementChild);
%c預留位置是最常用的。使用%c預留位置時，對應的後面的參數必須是CSS語句，用來對輸出內容進行CSS渲染。常見的輸出方式有兩種：文字樣式、圖片輸出。
三、顯示某個節點的內容<!DOCTYPE html> <html> <head> <title>常用console命令</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="info"> <h3>我的部落格：http://www.cnblogs.com/chaoran/</h3> </div> <script type="text/javascript"> var info = document.getElementById(‘info‘); console.dirxml(info); </script> </body> </html>
四、判斷變數是否是真
console.assert()用來判斷一個運算式或變數是否為真。如果結果為否，則在控制台輸出一條相應資訊，並且拋出一個異常。
console.assert對輸入的運算式進行斷言，只有運算式為false時，才輸出相應的資訊到控制台。
<script type="text/javascript"> var result = 1; console.assert( result ); var year = 2014; console.assert(year == 2018 );</script>
1是非0值，是真；而第二個判斷是假，在控制台顯示錯誤資訊
五、追蹤函數的調用軌跡console.trace()用來追蹤函數的調用軌跡。
<script type="text/javascript"> /*函數是如何被調用的，在其中加入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>
控制台輸出資訊：
六、計時功能console.time()和console.timeEnd()，用來顯示代碼的已耗用時間。
<script type="text/javascript"> console.time("控制台計時器一"); for(var i=0;i<1000;i++){ for(var j=0;j<1000;j++){} } console.timeEnd("控制台計時器一");</script>
七、console.profile()的效能分析
效能分析（Profiler）就是剖析器各個部分的已耗用時間，找出瓶頸所在，使用的方法是console.profile()。
<script type="text/javascript"> 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>
參考：
Chrome 控制台console的用法
九個Console命令，讓js調試更簡單
讓js調試更簡單—console
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
