[譯] 前端 Console 調試小技巧

時間 2019-11-16

標籤前端 console 調試技巧简体版

原文原文鏈接

原文地址：How to debug Front-end: Console

原文做者：Michał Witkowski

譯文出自：掘金翻譯計劃

本文永久連接：github.com/xitu/gold-m…

譯者：lsvih

校對者：Raoul1996

前端 Console 調試小技巧

開發者們在開發的過程當中會無心地產生一些 bug。bug 越老，找到並修復它的難度就越高。在本系列的文章中，我將試着向你展現如何使用 Google Chrome 開發者工具、Chrome 插件以及 WebStorm 進行調試。html

這篇文章將介紹最經常使用的調試工具 —— Chrome Console。請享用！前端

Console

打開 Chrome 開發者工具的方法：react

在主菜單中選擇「更多工具」菜單 > 點擊開發者工具。
在頁面任何元素上右鍵，選擇「檢查」。
在 Mac 中，按下 Command+Option+I；在 Windows 與 Linux 中，按下 Ctrl+Shift+I。

請觀察 Console 選項卡中的內容。android

第一行：ios

清空 console 控制檯

top — 在默認狀態下，Console 的上下文（context）爲 top（頂級）。不過當你檢查元素或使用 Chrome 插件上下文時，它會發生變化。
你能夠在此更改 console 執行的上下文（頁面的頂級 frame）。git

過濾：
對控制檯的輸出進行過濾。你能夠根據輸出嚴重級別、正則表達式對其進行過濾，也能夠在此隱藏網絡鏈接產生的消息。github

設置：
Hide network — 隱藏諸如 404 之類的網絡錯誤。
Preserve log — 控制檯將會在頁面刷新或者跳轉時不清空記錄。
Selected context only — 勾上後能夠根據前面 top 選擇的上下文來指定控制檯的日誌記錄範圍。
User messages only — 隱藏瀏覽器產生的訪問異常之類的警告。
Log XMLHttpRequests — 顧名思義，記錄 XMLHttpRequest 產生的信息。
Show timestamps — 在控制檯中顯示時間戳信息。
Autocomplete from history — Chrome 會記錄你曾經輸入過的命令，進行自動補全。web

選擇合適的 Console API

控制檯會在你應用的上下文中運行你輸入的 JS 代碼。你能夠輕鬆地經過控制檯查看全局做用域中存儲的東西，也能夠直接輸入並查看錶達式的結果。例如：「null === 0」。正則表達式

console.log — 對象引用

根據定義，console.log 將會在控制檯中打印輸出內容。除此以外，你還得知道，console.log 會對你展現的對象保持引用關係。請看下面的代碼：chrome

var fruits = [{one: 1}, {two: 2}, {three: 3}];
console.log('fruits before modification: ', fruits);
console.log('fruits before modification - stringed: ', JSON.stringify(fruits));
fruits.splice(1);
console.log('fruits after modification: ', fruits);
console.log('fruits after modification - stringed : ', JSON.stringify(fruits))複製代碼

當調試對象或數組時，你須要注意這點。咱們能夠看到 fruits 數組再被修改前包含 3 個對象，但以後發生了變化。如須要在特定時刻查看結果，可使用 JSON.stringify 來展現信息。不過這種方法對於展現大對象來講並不方便。以後咱們會介紹更好的解決方案。

console.log — 對對象屬性進行排序

JavaScript 是否能保證對象屬性的順序呢？

4.3.3 Object — ECMAScript 第三版 (1999)

對象是 Object 的成員，它是一組無序屬性的集合，每一個屬性都包含一個原始值、對象或函數。稱存儲在對象屬性中的函數爲方法。

可是…… 在 ES5 中它的定義發生了改變，屬性能夠有序 —— 但你仍是不能肯定你的對象屬性是否能按順序排列。瀏覽器經過各類方法實現了有序屬性。在 Chrome 中運行下面的代碼，能夠看到使人困惑的結果：

var letters = {
  z: 1,
  t: 2,
  k: 6
};
console.log('fruits', letters);
console.log('fruits - stringify', JSON.stringify(letters));複製代碼

Chrome 按照字母表的順序對屬性進行了排序。無法說咱們是否應該喜歡這種排序方式，但瞭解這兒發生了什麼總沒壞處。

console.assert(expression, message)

若是 expression 表達式的結果爲 false，Console.assert 將會拋出錯誤。關鍵的是，assert 函數不會因爲報錯而中止評估以後的代碼。它能夠幫助你調試冗長棘手的代碼，或者找到屢次迭代後函數自身產生的錯誤。

function callAssert(a,b) {
  console.assert(a === b, 'message: a !== b ***** a: ' + a +' b:' +b);
}
callAssert(5,6);
callAssert(1,1);複製代碼

console.count(label)

簡而言之，它就是一個會計算相同表達式執行過多少次的 console.log。其它的都同樣。

for(var i =0; i <=3; i++){
    console.count(i + ' Can I go with you?');
    console.count('No, no this time');
}複製代碼

如上面的例子所述，只有徹底相同的表達式纔會增長統計數字。

console.table()

很好用的調試函數，但即便它會提升工做效率，我也通常懶得用它…… 別像我這樣，咱要保持高效。

var fruits = [
  { name: 'apple', like: true },
  { name: 'pear', like: true },
  { name: 'plum', like: false },
];
console.table(fruits);複製代碼

它很是棒。第一，你能夠將全部東西都整齊地放在表格中；第二，你也會獲得 console.log 的結果。它在 Chrome 中能夠正常工做，可是不保證兼容全部瀏覽器。

var fruits = [
  { name: 'apple', like: true },
  { name: 'pear', like: true },
  { name: 'plum', like: false },
];
console.table(fruits, ['name'])複製代碼

咱們能夠決定是徹底展現數據內容仍是隻展現整個對象的某幾列。這個表格是可排序的 —— 點擊須要排序的列的表頭，便可按此列對錶格進行排序。

console.group() / console.groupEnd();

此次讓咱們直接從代碼開始介紹。運行下面的代碼看看控制檯是如何進行分組的。

console.log('iteration');
for(var firstLevel = 0; firstLevel<2; firstLevel++){
  console.group('First level: ', firstLevel);
  for(var secondLevel = 0; secondLevel<2; secondLevel++){
    console.group('Second level: ', secondLevel);
    for(var thirdLevel = 0; thirdLevel<2; thirdLevel++){
      console.log('This is third level number: ', thirdLevel);
    }
    console.groupEnd();
  }
  console.groupEnd();
}複製代碼

它能夠幫助你更好的處理數據。

console.trace();

console.trace 會將調用棧打印在控制檯中。若是你正在構建庫或框架時，它給出的信息將十分有用。

function func1() {
  func2();
}
function func2() {
  func3();
}
function func3() {
  console.trace();
}
func1();複製代碼

對比 console.log 與 console.dir

console.log([1,2]);
console.dir([1,2]);複製代碼

它們的實現方式取決於瀏覽器。在最開始的時候，規範中建議 dir 要保持對對象的引用，而 log 不須要引用。（Log 會顯示一個對象的副本）。但如今，如上圖所示，log 也保持了對於對象的引用。它們展現對象的方式有所不一樣，但咱們再也不加以深究。不過 dir 在調試 HTML 對象的時候會很是有用。

譯註：console.dir 會詳細打印一個對象的全部屬性與方法。

$_, $0 — $4

$_ 會返回最近執行表達式的值。
$0 — $4 — 分別做爲近 5 此檢查元素時對 HTML 元素的引用。

getEventListeners(object)

返回指定 DOM 元素上註冊的事件監聽器。這兒還有一種更便捷的方法來設置事件監聽，下次教程會介紹它。

monitorEvents(DOMElement, [events]) / unmonitorEvents(DOMElement)

在指定 DOM 元素上觸發任何事件時，均可以在控制檯中看到相關信息。直到取消對相應元素的監視。

在控制檯中選擇元素

在 Element 標籤中按 ESC 鍵展開這個界面。

在 $ 沒有另作它用的狀況下：

$() — 至關於 **document.querySelector()**。它會返回匹配 CSS 選擇器的第一個元素（例如 $('span') 會返回第一個 span）
$$() — 至關於 **document.querySelectorAll()**。它會以數組的形式返回全部匹配 CSS 選擇器的元素。