炫酷的console
看到不少的其餘網站的console控制檯 招聘啊什麼的 看起來還不錯 今天花了半小時查找的一點console的資料 找了一下資料 就給貼過來了javascript
因爲我不想轉載 因此在最後 最後附上原文連接 前端
在開發過程當中須要監控某些表達式或變量的值的時候，用 debugger 會顯得過於笨重，取而代之則是會將值輸出到控制檯上方便調試。最經常使用的語句就是console.log(expression)了。java
然而對於做爲一個全局對象的console對象來講，大多數人瞭解得還並不全面，固然我也是，通過個人一番學習，如今對於這個能玩轉控制檯的 JS 對象有了必定的認識，想與你們分享一下。express
console 對象除了console.log()這一最常被開發者使用的方法以外，還有不少其餘的方法。靈活運用這些方法，能夠給開發過程增添許多便利。segmentfault
console 的方法
console.assert(expression, object[, object...])數組
接收至少兩個參數，第一個參數的值或返回值爲false的時候，將會在控制檯上輸出後續參數的值。例如：瀏覽器
console.assert(1 == 1, object); // 無輸出，返回 undefined console.assert(1 == 2, object); // 輸出 object
console.count([label])性能優化
輸出執行到該行的次數，可選參數 label 能夠輸出在次數以前，例如：框架
(function() { for (var i = 0; i < 5; i++) { console.count('count'); } })(); // count: 1 // count: 2 // count: 3 // count: 4 // count: 5
console.dir(object)函數
將傳入對象的屬性，包括子對象的屬性以列表形式輸出，例如：
var obj = { name: 'classicemi', college: 'HUST', major: 'ei' }; console.dir(obj);
輸出：
console.error(object[, object...])
用於輸出錯誤信息，用法和常見的console.log同樣，不一樣點在於輸出內容會標記爲錯誤的樣式，便於分辨。輸出結果：
console.group
這是個有趣的方法，它可以讓控制檯輸出的語句產生不一樣的層級嵌套關係，每個console.group()會增長一層嵌套，相反要減小一層嵌套可使用console.groupEnd()方法。語言表述比較無力，看代碼：
console.log('這是第一層'); console.group(); console.log('這是第二層'); console.log('依然第二層'); console.group(); console.log('第三層了'); console.groupEnd(); console.log('回到第二層'); console.groupEnd(); console.log('回到第一層');
輸出結果：
和console.group()類似的方法是console.groupCollapsed()做用相同，不一樣點是嵌套的輸出內容是摺疊狀態，在有大段內容輸出的時候使用這個方法可使輸出版面不至於太長。。。吧
console.info(object[, object...])
此方法與以前說到的console.error同樣，用於輸出信息，沒有什麼特別之處。
console.info('info'); // 輸出 info
console.table()
可將傳入的對象，或數組以表格形式輸出，相比傳統樹形輸出，這種輸出方案更適合內部元素排列整齊的對象或數組，否則可能會出現不少的 undefined。
var obj = { foo: { name: 'foo', age: '33' }, bar: { name: 'bar', age: '45' } }; var arr = [ ['foo', '33'], ['bar', '45'] ]; console.table(obj); console.table(arr);
也能夠
console.log(object[, object...])
這個不用多說，這個應該是開發者最經常使用的吧，也不知道是誰規定的。。。
console.log('log'); // 輸出 log
console.profile([profileLabel])
這是個挺高大上的東西，可用於性能分析。在 JS 開發中，咱們經常要評估段代碼或是某個函數的性能。在函數中手動打印時間當然能夠，但顯得不夠靈活並且有偏差。藉助控制檯以及console.profile()方法咱們能夠很方便地監控運行性能。
例以下面這段代碼：
function parent() { for (var i = 0; i < 10000; i++) { childA() } } function childA(j) { for (var i = 0; i < j; i++) {} } console.profile('性能分析'); parent(); console.profileEnd();
而後咱們能夠在 Profiles 面板下看到上述代碼運行過程當中的消耗時間。
頁面加載過程的性能優化是前端開發的一個重要部分，使用控制檯的 profiles 面板能夠監控全部 JS 的運行狀況使用方法就像錄像機同樣，控制檯會把運行過程錄製下來。如圖，工具欄上有錄製和中止按鈕。
錄製結果：
console.time(name)
計時器，能夠將成對的console.time()和console.timeEnd()之間代碼的運行時間輸出到控制檯上，name參數可做爲標籤名。
console.time('計時器'); for (var i = 0; i < 1000; i++) { for (var j = 0; j < 1000; j++) {} } console.timeEnd('計時器');
（剛纔實際多寫了一層循環，結果電腦風扇嗚嗚轉啊，瀏覽器直接無響應了。。。）
console.trace()
console.trace()用來追蹤函數的調用過程。在大型項目尤爲是框架開發中，函數的調用軌跡能夠十分複雜，console.trace()方法能夠將函數的被調用過程清楚地輸出到控制檯上。
function tracer(a) { console.trace(); return a; } function foo(a) { return bar(a); } function bar(a) { return tracer(a); } var a = foo('tracer');
輸出：
console.warn(object[, object...])
輸出參數的內容，做爲警告提示。
console.warn('warn'); // 輸出 warn
佔位符
console對象上的五個直接輸出方法，console.log(),console.warn(),console.error(),console.exception()(等同於console.error())和console.info()，均可以使用佔位符。支持的佔位符有四種，分別是字符(%s)、整數(%d 或 %i)、浮點數(%f)和對象(%o)。
console.log('%s是%d年%d月%d日', '今天', 2014, 4, 15); console.log('圓周率是%f', 3.14159); var obj = { name: 'classicemi' } console.log('%o', obj);
還有一種特殊的標示符%c，對輸出的文字能夠附加特殊的樣式，當進行大型項目開發的時候，代碼中可能有不少其餘開發者添加的控制檯語句。開發者對本身的輸出定製特別的樣式就能夠方便本身在眼花繚亂的輸出結果中一眼看到本身須要的內容。想象力豐富的童鞋也能夠作出有創意的輸出信息，好比常見的招聘信息和我的介紹啥的。
輸出結果：
console.log('%cMy name is classicemi.', 'color: #fff; background: #f40; font-size: 24px;');
%c標示符能夠用各類 CSS 語句來爲輸出添加樣式，再隨便舉個栗子，background屬性的url()中添加圖片路徑就能夠實現圖片的輸出了，各位前端童鞋快施展大家的 CSS 神技來把控制檯玩壞吧~~
https://segmentfault.com/a/1190000000481884