Chrome 開發工具之Console

時間 2019-11-21

原文原文鏈接

前段時間看git的相關，記的筆記也大體寫到了博客上，還有些由於運用不熟，或者還有一些疑惑點，暫時也不作過多糾纏，以後在實踐中多運用得出結論再整理分享吧。javascript

工欲善其事，必先利其器。要想作好前端的工做，也應該多瞭解瀏覽器開發工具的使用，近來幾天在看html和css的一些技巧性知識，順便也把chrome一些懂的地方再熟悉和不懂的地方去學習，把開發工具理解理解，也分享給小夥伴們，今天暫時是console相關的吧(偷個小懶，從用的最熟的面板入手，以後計劃整理出chrome開發工具各個面板的使用說明~也須要時間測測，還有兩個面板用的不熟呢)。css

console.assert(expression,object)html

當expression表達式的結果爲true的時候，控制檯無顯示；當知足expression表達式知足false條件的時候，該消息以及堆棧跟蹤被寫入控制檯。前端

console.assert(1>1,"false");
// Assertion failed: false
console.assert(1>0,"false");
// undefined

console.clear()java

清除控制檯信息，若是setting(設置)中"Preserve Logs"(保持日誌)是打開狀態時，console.clear()失效。jquery

console.count(label)git

打印出這個方法被執行的次數。在調試js執行的時候挺有幫助,能夠結合console.time(label)／console.timeEnd(label)結合，看某函數執行的次數及每次執行所耗的時間。chrome

function showCount(){
  console.count("call");
}
showCount();   // call: 1
showCount();   // call: 2
showCount();   // call: 3

console.dir(object)express

將指定對象用javascript封裝並打印，若是指定的對象是一個HTML元素，則列出DOM屬性。數組

console.dir(document.body);
// DOM對象(body)

對於這個方法，好比咱們須要看某個DOM的屬性的時候，document.getElementById('someid')打印出來的應該是個<div id="someid">...</div>,這就比較尷尬了，打印的是個html元素，而後使用console.dir(document.getElementById('someid'))打印後，便可以看到整個DOM對象及屬性了。

console.group(object[,object,...])

根據可選的標題產生一個新的日誌列表，以後直至console.groupEnd()以前的控制檯輸出信息都會列在這個日誌組中，若是沒使用console.groupEnd()進行閉合，則以後的輸出將都包括在這個日誌組中。

console.group("g");
console.log(1);
console.dir(document.body);
console.groupEnd("g");
console.log(2);
/*
g
|-- 1
|-- DOM對象(body)
-
2
*/

日誌組可嵌套輸出：

console.group("g1");
console.log(1);
console.group("g2");
console.log(2);
console.dir(document.body);
console.groupEnd("g2");
console.dir(document.body);
console.groupEnd("g1");
console.log(3);
/*
g1
|-- 1
|-- g2
|---- 2
|---- DOM對象(body)
|-- DOM對象(body)
-
3
*/

console.groupCollapsed(object[, object, ...])

和console.group(object[,object,...])使用方式相同，不一樣的是console.group(object[,object,...])打印的日誌組的狀態是打開的，而console.groupCollapsed(object[, object, ...])打印的是閉合的日誌組。

console.log(object [, object, ...])

在控制檯打印信息。你能夠在這個方法中傳入一個或多個對象，每一個對象會經過計算後加入一串使用空格分隔的字符串。傳入的第一個參數可能會包含格式說明符號，該說明符號由一個百分號(%)後加一個表明須要被替換內容的字母。

開發工具支持如下說明符號:

%s            字符串
%d or %i      整數
%f            浮點數
%o            可擴展DOM元素(在element面板同樣)
%O            可擴展javascript元素
%c            根據提供的css樣式輸出字符串

效果：

console.log("hello world",1,true);
// hello world 1 true

console.log("%s > %d ", "100", 50);
// 100 > 50

console.log("%s > %d ", "100", "50");
// 100 > NaN

console.log("%s > %f ", "100", 50.2);
// 100 > 50.2

console.log("%O is a object", {a:"1"});
// Object{/*object*/} is a object

console.log("%o is a element", document.body);
// <body>...</body> html元素

console.log("%O is a element", document.body);
// DOM對象(body)

console.log("%c hello world","background:black;color:white");
// hello world(白字黑背景)

console.error(object [, object, ...])

以報錯的格式打印信息，而且在調用列出產生堆棧跟蹤。

console.error(1);
// 1

console.info(object [, object, ...])

以信息的格式打印信息。

console.info(1);
// 1

console.warn(object [, object, ...])

以警告的格式打印信息。

console.warn(1);
// 1

console.profile([label])（已廢棄）

標出cpu使用的開始(start)和結束(finish)的點，對應結束標識是console.porfileEnd()，能夠經過這兩個方法看函數形成cpu消耗信息，chrome開發工具的Profile面板也是處理CPU信息的功能，而且執行這個方法以後，在Profile面板也會出現一塊內容，對應的正是代碼所執行的那塊信息內容。

console.profile("cpu-profile");
var a = 1;
var b = a;
var c = a+b;
console.profileEnd();
// Profile 'cpu-profile' started.
// Profile 'cpu-profile' finished.

console.time(label)

開始一個新的帶有標籤的計時器。在以後的代碼中調用console.timeEnd(label)時，中止計時而且將所耗時間間打印在控制檯。注意：timeEnd的label須要和time的label對應上纔算閉合這個計時。

console.time("Array initialize");
var arr = new Array(100),
      len = arr.length,
      i;
for (i = 0; i < len; i++) {
  arr[i] = new Object();
};
console.timeEnd("Array initialize");   // 輸出: Array initialize: 0.233ms

在測試這個的時候深深嫌棄下個人電腦，老電腦了...上次測這串代碼甚至是0.711ms，而在公司的電腦才0.046ms...

console.trace()

顯示當前所執行到的代碼處的堆棧跟蹤信息。

console.trace("trace info");
/*
trace info
(anonymous function) fileName:line_num
*/

console.table(array[object])

將數組數據(數組元素爲對象)以table佈局展現。

var data = [{id:1,value:"a"},{id:2,value:"b"},{id:3,value:"c"},{id:4,value:"d"},{id:5,value:"e"},{id:6,value:"f"}];
console.table(data);

chrome自帶有html元素選擇器，和衆人所熟悉的jquery的選擇器使用規則類似

<div id="nav" index="0"></div>
<div class="nav" index="1"></div>
<div class="nav" index="2"></div>
<div class="nav" index="3"></div>
<script>
  var obj = {value:1};
</script>

$()

返回符合css選擇器條件的第一個元素，是document.querySelector()的簡寫。

$('#nav')
// <div id="nav" index="0"></div>(html元素)
$('.nav')
// <div class="nav" index="1"></div>(html元素) 注意:這裏取的是class含有nav樣式的元素列表中的第一個元素

$$()

返回符合css選擇器條件的全部元素組成的數組，是document.querySelectorAll()的封裝。

$$('.nav')
// [<div class="nav" index="1"></div>,<div class="nav" index="2"></div>,<div class="nav" index="3"></div>]

返回最近一次計算得出的值，默認undefined。

1+2
// 3
$_
// 3
$$('.nav')
// [<div class="nav" index="1"></div>,<div class="nav" index="2"></div>,<div class="nav" index="3"></div>]
$_
// [<div class="nav" index="1"></div>,<div class="nav" index="2"></div>,<div class="nav" index="3"></div>]
$_.length 
// 3

$0-$4

返回最近5次選中的元素。

$0 最近的第一次

$1 最近的第二次

$2 最近的第三次

$3 最近的第四次

$4 最近的第五次

inspect()

inspect()函數須要傳入一個DOM元素或者javascript引用，若是傳入的是DOM元素，開發者工具會跳到Elements面板，而且展現對應的元素；若是傳入的是javascript引用，開發者工具跳到Profile面板或者控制檯顯示堆棧信息。