almost 4 years ago

底下範例程式可於 Chrome 的 console 視窗游標內貼上執行

1 console.log levels

console.log 在瀏覽器中是大多數人最常用的 command
但除了 log 外還有其他 warning levels

console.debug('This is the regular log output');  
console.info('Informational message');  
console.warn('Warning! It might be dangerous');  
console.error('Error with some tracing');  

2.輸出樣式

你也可以控制輸出的 console 樣式

var styles = 'background: #f00; color: #fff; padding: 0 100px; font-size: 20px;';  
var message = "Can't miss that out";
console.log("%c" + message, styles);

3. console.count

有時我們會需要知道某些函數被執行了幾次
console API 提供了 count 函數來方便統計次數

function reloadData() {  
    console.count('Data reloaded');
    // ...function body omitted...
}

4. console.time

Console API也提供了 time 函數來讓我們測量兩個點之間所執行程序的時間差

console.time('for loop');  
var a = [1,2,3,4,5,6,7,8,9,10];  
var sumA = 0;  
for (var i=0; i<a.length; i++) {  
  sumA += a[i];
}
console.log('A: ' + sumA);  
console.timeEnd('for loop');

console.time('reduce');  
var b = [1,2,3,4,5,6,7,8,9,10];  
var sumB = b.reduce(function(prev, next) {  
  return prev + next;
});
console.log('B: ' + sumB);  
console.timeEnd('reduce');  

5. console.dir

console.dir 會列印出參數物件的 DOM 屬性

console.dir(document.body);

6.顯示 array objects 的內容

console.tabl 提供了方便檢視 array objects 的功能,

var users = [  
  {
    name: "Alice",
    email: "alice@example.com",
    age: 26
  },
  {
    name: "Bob",
    email: "bob@example.com",
    age: 28
  }
];
console.table(users); 


參考網址
http://blog.500tech.com/browser-console-tricks/

作者也提供了
官方 chrome Console API 文件
https://developer.chrome.com/devtools/docs/console-api

免費的 CodeSchool Chrome DevTools 課程
https://www.codeschool.com/courses/discover-devtools

← 解決 Oracle (10.2 以上) 搜尋區分大小寫問題 ES6語法筆記 →
 
comments powered by Disqus