(73)Wangdao.com第十二天_JavaScript consol 對象與控制檯

時間 2019-11-08

標籤 wangdao.com wangdao com 第十二天 2天 javascript consol 對象控制檯欄目 JavaScript 简体版

原文原文鏈接

consol 對象api

console對象是 JavaScript 的原生對象數組

它有點像 Unix 系統的標準輸出stdout和標準錯誤stderr，瀏覽器

能夠輸出各類信息到控制檯，而且還提供了不少有用的輔助方法
緩存

常見用途

調試程序，顯示網頁代碼運行時的錯誤信息
提供了一個命令行接口，用來與網頁代碼互動

打開開發者工具之後，頂端有多個面板。
- Elements：查看網頁的 HTML 源碼和 CSS 代碼。
- Resources：查看網頁加載的各類資源文件（好比代碼文件、字體文件 CSS 文件等），以及在硬盤上建立的各類內容（好比本地緩存、Cookie、Local Storage等）。
- Network：查看網頁的 HTTP 通訊狀況。
- Sources：查看網頁加載的腳本源碼。
- Timeline：查看各類網頁行爲隨時間變化的狀況。
- Performance：查看網頁的性能狀況，好比 CPU 和內存消耗。
- Console：用來運行 JavaScript 命令

console.log()
- 用於在控制檯輸出信息
- 能夠接受一個或多個參數，將它們鏈接起來輸出
- 會自動在每次輸出的結尾，添加換行符
- ```
console.log('Hello World');    // Hello World

console.log('a', 'b', 'c');    // a b c
```
- 若是第一個參數是格式字符串（使用了格式佔位符），console.log方法將依次用後面的參數替換佔位符，而後再進行輸出
- ```
console.log(' %s + %s = %s', 1, 1, 2);    //  1 + 1 = 2
```
  console.log方法支持如下佔位符，不一樣類型的數據必須使用對應的佔位符。函數

- - - - 使用%c佔位符時，對應的參數必須是 CSS 代碼，用來對輸出內容進行 CSS 渲染
        
        console.log( '%cThis text is styled!', 'color: red; background: yellow; font-size: 24px;' ); // 輸出的內容將顯示爲黃底紅字
  - console.log方法的兩種參數格式，能夠結合在一塊兒使用
    - console.log(' %s + %s ', 1, 1, '= 2'); // 1 + 1 = 2

console.info()
- 是console.log方法的別名，用法徹底同樣。
- 只不過console.info方法會在輸出信息的前面，加上一個藍色圖標

console.debug()
- 與console.log方法相似，會在控制檯輸出調試信息。
- 可是，默認狀況下，console.debug輸出的信息不會顯示，只有在打開顯示級別在verbose的狀況下，纔會顯示。
- console對象的全部方法，均可以被覆蓋。所以，能夠按照本身的須要，定義console.log方法
  - ```
  // 使用自定義的console.log方法，能夠在顯示結果添加當前時間
  ['log', 'info', 'warn', 'error'].forEach(function(method) {
      console[method] = console[method].bind(
          console,
          new Date().toISOString()
      );
  });
  
  console.log("出錯了！");
  // 2014-05-18T09:00.000Z 出錯了！
```
console.warn() 方法 和 console.error() 方法 也是在控制檯輸出信息
- warn方法輸出信息時，在最前面加一個黃色三角，表示警告；
- error方法輸出信息時，在最前面加一個紅色的叉，表示出錯
- 還會高亮顯示輸出文字和錯誤發生的堆棧
- 其餘方面都同樣
- 能夠這樣理解，log方法是寫入標準輸出（stdout），warn方法和error方法是寫入標準錯誤（stderr）

console.table() 方法能夠數組或者對象將其轉爲表格顯示

var languages = [
  { name: "JavaScript", fileExtension: ".js" },
  { name: "TypeScript", fileExtension: ".ts" },
  { name: "CoffeeScript", fileExtension: ".coffee" }
];

console.table(languages);

console.table(languages);
，轉爲表格顯示以下

console.count()

用於計數，輸出它被調用了多少次

每次調用greet函數，內部的console.count方法就輸出執行次數

function greet(user) {
    console.count();
    return 'hi ' + user;
}

greet('bob')
//  : 1
// "hi bob"

greet('alice')
//  : 2
// "hi alice"

greet('bob')
//  : 3
// "hi bob"

能夠接受一個字符串做爲參數，做爲標籤，對執行次數進行分類

function greet(user) {
  console.count(user);
  return "hi " + user;
}

greet('bob')
// bob: 1
// "hi bob"

greet('alice')
// alice: 1
// "hi alice"

greet('bob')
// bob: 2
// "hi bob"

console.dir()
- 對一個對象進行檢查（inspect），並以易於閱讀和打印的格式顯示
- 對於輸出 DOM 對象很是有用，由於會顯示 DOM 對象的全部屬性
- Node 環境之中，還能夠指定以代碼高亮的形式輸出
  - ```
  console.dir(obj, {colors: true});
```
- console.dirxml() 方法主要用於以目錄樹的形式，顯示 DOM 節點

console.assert()

主要用於程序運行過程當中，進行條件判斷
若是不知足條件，就顯示一個錯誤，但不會中斷程序執行。

這樣就至關於提示用戶，內部狀態不正確

console.assert(false, '判斷條件不成立')    // Assertion failed: 判斷條件不成立

// 至關於
try {
    if (!false) {
        throw new Error('判斷條件不成立');
    }
} catch(e) {
      console.error(e);
}

判斷子節點的個數是否大於等於500

console.assert(list.childNodes.length < 500, '節點個數大於等於500');

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.group() 和 console.groupEnd()
- 用於將顯示的信息分組。
- 只在輸出大量信息時有用，
- 分在一組的信息，能夠用鼠標摺疊/展開

console.groupCollapsed() 和 console.groupEnd()
- 該組的內容，在第一次顯示時是收起的（collapsed），而不是展開的

console.trace()

顯示當前執行的代碼在堆棧中的調用路徑

console.trace()
// console.trace()
//   (anonymous function)
//   InjectedScript._evaluateOn
//   InjectedScript._evaluateAndWrap
//   InjectedScript.evaluate

console.clear()
- 清除當前控制檯的全部輸出，將光標回置到第一行
- 若是用戶選中了控制檯的「Preserve log」選項，console.clear方法將不起做用

控制檯命令行 API
- 自帶的命令行方法
  - $_ 屬性返回上一個表達式的值
  - $0 - $4 制臺保存了最近5個在 Elements 面板選中的 DOM 元素，$0表明倒數第一個（最近一個），$1表明倒數第二個，以此類推直到$4
  - $(selector) 返回第一個匹配的元素，等同於document.querySelector()。注意，若是頁面腳本對$有定義，則會覆蓋原始的定義。好比，頁面裏面有 jQuery，控制檯執行$(selector)就會採用 jQuery 的實現，返回一個數組
  - $$(selector) 返回選中的 DOM 對象，等同於document.querySelectorAll
  - inspect(object)方法打開相關面板，並選中相應的元素，顯示它的細節
    - 好比inspect(document)會在 Elements 面板顯示document元素
  - getEventListeners(object)方法返回一個對象，該對象的成員爲object登記了回調函數的各類事件（好比click或keydown），每一個事件對應一個數組，數組的成員爲該事件的回調函數
  - keys(object)方法返回一個數組，包含object的全部鍵名
  - values(object)方法返回一個數組，包含object的全部鍵值
    - var o = {'p1': 'a', 'p2': 'b'}; keys(o) // ["p1", "p2"] values(o) // ["a", "b"]
  - monitorEvents(object[, events])方法監聽特定對象上發生的特定事件。事件發生時，會返回一個Event對象，包含該事件的相關信息
    - monitorEvents(window, "resize"); // 單個事件的監聽方法 monitorEvents(window, ["resize", "scroll"]); // 多個事件的監聽方法
  - unmonitorEvents方法用於中止監聽
    - monitorEvents($0, 'mouse'); unmonitorEvents($0, 'mousemove');
  - monitorEvents容許監聽同一大類的事件。全部事件能夠分紅四個大類
    - mouse："mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
    - key："keydown", "keyup", "keypress", "textInput"
    - touch："touchstart", "touchmove", "touchend", "touchcancel"
    - control："resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"
      - monitorEvents($("#msg"), "key"); // 上面代碼表示監聽全部 key 大類的事件
其餘方法
- clear()：清除控制檯的歷史。
- copy(object)：複製特定 DOM 元素到剪貼板。
- dir(object)：顯示特定對象的全部屬性，是console.dir方法的別名。
- dirxml(object)：顯示特定對象的 XML 形式，是console.dirxml方法的別名。

debugger()
- 主要用於除錯，做用是設置斷點。
- 若是有正在運行的除錯工具，程序運行到debugger語句時會自動停下
- 若是沒有除錯工具，debugger語句不會產生任何結果，JavaScript 引擎自動跳過這一句
- Chrome 瀏覽器中，當代碼運行到debugger語句時，就會暫停運行，自動打開腳本源碼界面
  - ```
  for(var i = 0; i < 5; i++){
      console.log(i);
      if (i === 2){
          debugger;    // 打印出0，1，2之後，就會暫停，自動打開源碼界面，等待進一步處理
      }
  }
```