標籤：根據 運算式 work www 分享 展開 ons net pen
一、顯示資訊的命令<!DOCTYPE html><html><head> <title>常用console命令</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body> <script type="text/javascript"> console.log(‘hello‘); console.info(‘資訊‘); console.error(‘錯誤‘); console.warn(‘警告‘); </script></body></html>
最常用的就是console.log了。
二、預留位置console上述的集中度支援printf的預留位置格式，支援的預留位置有：字元（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）:
| 預留位置 | 作用 |
|---|---|
| %s | 字串 |
| %d or %i | 整數 |
| %f | 浮點數 |
| %o | 可展開的DOM |
| %O | 列出DOM的屬性 |
| %c | 根據提供的css樣式格式化字串 |
<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渲染。常見的輸出方式有兩種：文字樣式、圖片輸出。
文字輸出
// 輸出紅色的、20px大小的字串：Hello world,歡迎您！console.log("%cHello world,歡迎您！","color: red; font-size: 20px");
除了普通文本，還能輸出如知乎的console面板一樣的字元畫。這些字元畫是可以線上產生的：
大概方法：使用線上工具產生字元畫，然後複製到sublime中，將每行開頭的換行刪除，且替換成\n。最後只有一行代碼，即保證沒有換行，最後再丟到console.log("")代碼中即可，當然，也可以添加結合%c做出更酷炫的效果(console輸出預設是不換行的)。
圖片輸出
由於 console不能定義img，因此用背景圖片代替。此外，console不支援width和height，利用空格和font-size代替；還可以使用padding和line-height代替寬高。
不想這麼麻煩，可以試試console-image這個外掛程式。
三、資訊分組console.group("第一組資訊");console.log("第一組第一條:我的部落格(http://www.cnblogs.com/chenjiacheng)");console.log("第一組第二條:CSDN(http://www.cnblogs.com/chenjiacheng)");console.groupEnd();console.group("第二組資訊");console.log("第二組第一條:程式愛好者QQ群：***");console.log("第二組第二條:歡迎你加入");console.groupEnd();
四、查看對象的資訊
var info = { blog:"http://www.cnblogs.com/chenjiacheng", QQGroup:"***", message:"程式愛好者歡迎你的加入"};console.dir(info);
五、顯示某個節點的內容
console.dirxml()用來顯示網頁的某個節點（node）所包含的html/xml代碼。
<!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/chenjiacheng</h3> <p>程式愛好者:***,歡迎你的加入</p> </div> <script type="text/javascript"> var info = document.getElementById(‘info‘); console.dirxml(info); </script></body></html>六、判斷變數是否是真
console.assert()用來判斷一個運算式或變數是否為真。如果結果為否，則在控制台輸出一條相應資訊，並且拋出一個異常。
var result = 1;console.assert(result);var year = 2014;console.assert(year == 2018);
1是非0值，是真；而第二個判斷是假，在控制台顯示錯誤資訊
七、追蹤函數的調用軌跡console.trace()用來追蹤函數的調用軌跡。
/*函數是如何被調用的，在其中加入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);}
八、計時功能
console.time()和console.timeEnd()，用來顯示代碼的已耗用時間。
console.time("控制台計時器一");for(var i=0;i<1000;i++){ for(var j=0;j<1000;j++){}}console.timeEnd("控制台計時器一");
已耗用時間是5.97...ms
九、console.profile()的效能分析效能分析（Profiler）就是剖析器各個部分的已耗用時間，找出瓶頸所在，使用的方法是console.profile()。
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();
輸出
其它從console.log說起
九個Console命令，讓js調試更簡單
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
