你真的瞭解console嗎？（肯定不進來看看）
對於console你的印象是什麼呢？ 是console.log();仍是瀏覽器上的控制檯？今天就來講說你可能不瞭解的console；javascript
寫在前面
瀏覽器的控制檯能夠說是前端程序猿最經常使用的東西了，通常都是配合console.log()，一塊兒使用，其實console不止能夠.log,今天就來講說console的其餘用法，要以爲小弟收集總結的還能夠的話，辛苦給個贊，要是以爲那裏寫的有什麼問題的話，請在下面給個評論，一塊兒進步！o(*≧▽≦)ツhtml
總況
打開編譯器打上console.,利用自動補全功能咱們能夠看到console是有不少方法的；前端
總結下目前控制檯方法和屬性有：java
["$$", "$x", "dir", "dirxml","keys","values","profile","profileEnd","monitorEvents", "unmonitorEvents","inspect","copy","clear","getEventListeners","undebug","monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "_"]node
下面咱們來一一介紹一下各個方法主要的用途。chrome
通常狀況下咱們用來輸入信息的方法主要是用到以下四個：api
console.log
這個能夠說是用的最多的了，主要用途是在瀏覽器控制檯輸出咱們想要輸出的信息。數組
console.info
用於輸出錯誤信息，用法和console.log()一致。瀏覽器
剛瞌睡就來了枕頭！ 打開我們掘金網頁的控制檯看下！bash
console.warn
用於輸出警示信息，用法和console.log()一致。
console.error
用於輸出錯誤信息，用法和console.log()一致。
console.debug
用於輸出調試信息，用法和console.log()一致。
爲何都是輸出信息卻要分好幾個呢？看出圖說話。
這是一張IE上截取的圖片，在Chrome上不一樣的信息會分配到不一樣的位置，很差截圖！（萬惡的IE仍是有那麼一點用處的哈，哈哈）。
console對象的上面5種方法，均可以使用printf風格的佔位符。不過，佔位符的種類比較少，只支持字符a（%s）、整數（%d或%i）、浮點數（%f)和對象（%o）四種。
| 格式化符號 | 實現的功能 |
|---|---|
| %s | 格式化成字符串輸出 |
| %d or %i | 格式化成數值輸出 |
| %f | 格式化成浮點數輸出 |
| %o | 轉化成展開的DOM元素輸出 |
| %O | 轉化成JavaScript對象輸出 |
| %c | 把字符串按照你提供的樣式格式化後輸入 |
看個栗子：
%o佔位符，能夠用來查看一個對象內部狀況（Chrome無效）；
var dog = {};
dog.name = "大毛";
dog.color = "黃色";
console.log("%o", dog);
複製代碼
注意：收集資料的時候看到一些能夠用console.log在控制檯輸出帶樣式的文字或者圖片，我的以爲用處不大，這裏就直接忽略了，有興趣的朋友能夠本身查一下！
console.dirxml
用來顯示網頁的某個節點（node）所包含的html/xml代碼。
<body>
<table id="mytable">
<tr>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>bbb</td>
<td>aaa</td>
<td>ccc</td>
</tr>
<tr>
<td>111</td>
<td>333</td>
<td>222</td>
</tr>
</table>
</body>
<script type="text/javascript">
window.onload = function () {
var mytable = document.getElementById('mytable');
console.dirxml(mytable);
}
</script>
複製代碼
console.group和console.groupEnd
用於將顯示的信息分組。它只在輸出大量信息時有用，分在一組的信息，能夠用鼠標摺疊/展開。
好玩不？ 惋惜到如今我都沒以爲他有啥用。
開玩笑的，存在即合理怎麼會沒用呢！ヾ(≧O≦)〃嗷~
在查看別人代碼的時候一打開控制檯全都是輸出的時候這東西就有用了！
console.groupCollapsed
與console.group方法很相似，惟一的區別是該組的內容，在第一次顯示時是收起的（collapsed），而不是展開的。
console.assert
對輸入的表達式進行斷言，接受兩個參數，第一個參數是表達式，第二個參數是字符串。只有當第一個參數爲false，纔會輸出第二個參數，不然不會有任何結果。
假如在代碼中，咱們須要知足條件才輸出，是否是會常常這樣寫：
var isShow = false;
if (!isShow) {
console.log('爲false時輸出信息');
}
複製代碼
如今一個console就給你解決了；
是否是很方便！（鄙人以爲是）
console.count
輸出 count() 被調用的次數。此函數接受一個可選參數label。若是有label，此函數輸出爲那個指定的 label 和 count() 被調用的次數。若是 label 被忽略，此函數輸出count() 在其所處位置上被調用的次數。（這個方法很是實用哦）！
該特性是非標準的，請儘可能不要在生產環境中使用它！
var user = "";
function greet() {
console.count(user);
return "hi " + user;
}
user = "bob";
greet();
user = "alice";
greet();
greet();
console.count("alice");
// "bob: 1"
// "alice: 1"
// "alice: 2"
// "alice: 3"
複製代碼
console.countReset
重置計數器。此函數接受可選的參數標籤。一個字符串， 若傳入此參數 countReset() 重置此label的count爲0。若忽略此參數 countReset() 重置count()默認的 default 字段的count爲0；
// 不傳參
var user = "";
function greet() {
console.count();
return "hi " + user;
}
user = "bob";
greet();
user = "alice";
greet();
greet();
console.count();
console.countReset();
// "default: 1"
// "default: 2"
// "default: 3"
// "default: 1"
// "default: 0"
// 能夠看到 調用 console.counterReset() 重置了default 的計數爲0
複製代碼
// 傳參
var user = "";
function greet() {
console.count(user);
return "hi " + user;
}
user = "bob";
greet();
user = "alice";
greet();
greet();
console.countReset("bob");
console.count("alice");
// "bob: 1"
// "alice: 1"
// "alice: 2"
// "bob: 0"
// "alice: 3"
// 調用countReset("bod")只是重置了 "bob" 的計數器值 而 "alice" 的計數器值沒有改變。
複製代碼
console.table
對於某些複合類型的數據，console.table方法能夠將其轉爲表格顯示。
var languages = [
{ name: "JavaScript", fileExtension: ".js" },
{ name: "TypeScript", fileExtension: ".ts" },
{ name: "CoffeeScript", fileExtension: ".coffee" }
];
console.table(languages);
複製代碼
上面代碼的language，轉爲表格顯示以下。
複合型數據轉爲表格顯示的條件是，必須擁有主鍵。對於上面的數組來講，主鍵就是數字鍵。對於對象來講，主鍵就是它的最外層鍵。
var languages = {
csharp: { name: "C#", paradigm: "object-oriented" },
fsharp: { name: "F#", paradigm: "functional" }
};
console.table(languages);
複製代碼
上面代碼的language，轉爲表格顯示以下。
console.dir
dir方法用來對一個對象進行檢查（inspect），並以易於閱讀和打印的格式顯示。
該方法對於輸出DOM對象很是有用，由於會顯示DOM對象的全部屬性。
console.dir(document.body);
複製代碼
Chrome上我試驗了下感受和log沒區別IE上也是!(不知道什麼鬼。 ╮（╯＿╰）╭)。固然了我沒去實驗DOM對象。哈哈~！
console.time和console.timeEnd
這兩個方法用於計時，能夠算出一個操做所花費的準確時間。
console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("Array initialize");
// Array initialize: 1914.481ms
複製代碼
console.timeLog;
在控制檯輸出計時器的值，該計時器必須已經經過 console.time() 啓動。
若是沒有傳入 label 參數，則以 default: 做爲引導返回數據：
default: 1042ms
若是傳入了一個已經存在的 label ，則會以 label: 做爲引導返回數據：
label: 1242ms
栗子：
console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff...");
console.timeEnd("answer time");
// 上例中的輸出分別顯示了用戶從打開頁面到關閉第一個 alert 和第二個 alert 框的時間間隔：
複製代碼
注意：使用 timelog() 輸出計時器的值會顯示計時器名稱。使用 timeEnd() 中止也會顯示計時器名稱和輸出計時器的值，而且，最後的 " - timer ended" 能夠清楚的顯示計時器再也不計時的信息。
console.profile和console.profileEnd
console.profile方法用來新建一個性能測試器（profile），它的參數是性能測試器的名字。
該特性是非標準的，請儘可能不要在生產環境中使用它！
console.profile('p')
// Profile 'p' started.
複製代碼
console.profileEnd方法用來結束正在運行的性能測試器。
console.profileEnd()
// Profile 'p' finished.
複製代碼
console.timeStamp
該特性是非標準的，請儘可能不要在生產環境中使用它！
向瀏覽器的 Performance或者Waterfall工具添加一個標記。這樣可讓你將代碼中的一個點和其餘在時間軸上已記錄的事件相關聯，例如佈局事件和繪製事件等。
你能夠選擇用一個參數來做爲時間戳標籤，而後標記旁邊就會顯示這個標籤。
console.trace
堆棧跟蹤相關的調試，console.trace方法顯示當前執行的代碼在堆棧中的調用路徑。
上述方法只是我我的理解罷了。若是想查看具體API
console.clear
用於清除當前控制檯的全部輸出，將光標回置到第一行。
- 1. 滿滿的 maven 乾貨，你肯定不來看看嗎？
- 2. 你真的瞭解 console 嗎
- 3. 你肯定不來了解下 Redis 跳躍表的原理嗎
- 4. 你肯定不來了解下 Redis 字符串的原理嗎
- 5. 你肯定不來了解一下Redis中 Hash的原理嗎
- 6. 你肯定不來了解一下Redis列表的原理嗎
- 7. 你真的瞭解package.json嗎？來看看吧，這多是最全的package解析
- 8. ES11來了，不進來看看嘛
- 9. 圖解java數據結構之棧(Stack)，你肯定不看看嗎？
- 10. 面試阿里，字節跳動90%會被問到的微服務，你肯定不進來看看嗎？
- 更多相關文章...
- • 查看 XML 文件 - XML 教程
- • MySQL查看錶中的約束 - MySQL教程
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
- • 互聯網組織的未來：剖析GitHub員工的任性之源
-
每一个你不满意的现在，都有一个你没有努力的曾经。