Chrome控制檯使用技巧

1、經常使用功能

• 一、查看BOM，變量，簡單計算

• 二、copy和saving

你能夠經過全局的方法 copy() 在 console 裏複製任何能拿到的資源，好比一些嵌套層級深的數據結構，使用copy能夠直接拿到

假如你在 console 中打印了一堆數據 (例如你在 App 中計算出來的一個數組) ，而後想對數據作額外的操做，好比剛剛說的 copy (在不影響它原來值的狀況下) 。 那就能夠將它轉換成一個全局變量，只須要 右擊 它，並選擇 「 Store as global variable 」 (保存爲全局變量) 選項。

• 三、快捷鍵

Chrome 中有些快捷鍵對於咱們提高工做效率仍是有的：

ctrl + L    清空控制檯
ctrl + shift + P 打開功能搜索
ctrl + [    向左移動控制檯tab
ctrl + ]    向右移動控制檯tab
ctrl + 0~9  分別表明9個tab
複製代碼

• 四、截圖

當你只想對某一個 DOM 節點截圖時，大機率會用工具弄半天，但如今不須要了：直接選中那個節點，打開 Command 菜單而且使用 節點截圖 的就能夠了。你覺得這就是所有了嗎？你還能夠用這種方式 全屏截圖 - 經過 Capture full size screenshot 命令。請注意，這裏說的是全屏，並非嵌入頁面的一部分。

ctrl + shift + P 
Capture full size screenshot
複製代碼

• 五、保存一段腳本測試運行

若是我想看看，當前頁面內全部 p 標籤包含的文字總數，應該怎麼作呢？

$$('.content p')
    .map(el => parseInt(el.innerText.length))
    .reduce((sum, value) => sum + value)
複製代碼

這樣的腳本，並不須要花費我太多的精力來寫，但只是偶爾用用。因此我並不肯意每次都本身寫。

那怎麼解決這個問題呢？

這就是 Snippets 的用武之地了：經過它能夠存放 JavaScript 代碼到 DevTools 中，方便下一次使用：

1.進入到 Sources 面板
2.在導航欄裏選中 Snippets 這欄
3.點擊 New snippet(新建一個代碼塊)
4.輸入你的代碼以後保存
5.[ctrl] + [enter] 來運行你剛剛保存的腳本吧
複製代碼

2、Elements

在這個tab欄下查看當前頁面的DOM結構，具體信息

• 一、使用 'h' 來隱藏DOM元素

某些的時候這頗有用：例如你想截圖，但你想去掉裏面的敏感信息

• 二、拖動 & 放置 元素

可使用鼠標拖動DOM元素，暫時放置到其餘地方，在於設計師扣細節時有用

• 三、在元素面板中展開全部的子節點

一個一個點擊 ▶ 展開太慢？右鍵選擇 expand recursively

3、Console

在這個tab欄下查看打印信息，也是調試使用最多的tab欄

console中的 $

• 一、$0

在 Chrome 的 Elements 面板中， $0 是對咱們當前選中的 html 節點的引用。

理所固然， $1 是對上一次咱們選擇的節點的引用， $2 是對在那以前選擇的節點的引用，等等。一直到 $4

• 二、$ 和 $$

$是jquery中集合體，上面掛載了大量的方法、屬性；$$是chrome中操做dom的利器，並且更加厲害了，不只僅是雙倍的快樂，還能節省更多的時間，由於它不只執行 document.QuerySelectorAll 而且它返回的是：一個節點的 數組 ，而不是一個 Node list 。

• 三、$_

調試的過程當中，常常會打印一些變量的值，但若是你想看一下上次執行的結果呢？再輸一遍表達式嗎？

$_ 登場， $_ 是對上次執行的結果的 引用 
複製代碼

console中的異步

• 一、Promise的處理

• 二、一些異步的系統api

await navigator.storage.estimate()  Storage 系統的 佔用數 和 空閒數
await navigator.getBattery()        設備的 電池信息
await navigator.mediaCapabilities.decodingInfo({ type: 'file', audio: {contentType: 'audio/ogg'} }) 媒體能力
複製代碼

console的打印方式

• 一、log

使用最多的調試方式，能打印信息

• 二、table

將打印信息展現成表格

• 三、time

要給應用中發生的事件, 加上一個確切的時間戳，須要開啓 timestamps 。你能夠在設置(在調試工具中的 ⋮ 下拉中找到它，或者按下 F1 )中來開啓。可是我建議你使用 Commands Menu

console.time() — 開啓一個計時器
console.timeEnd() — 結束計時而且將結果在 console 中打印出來
複製代碼

四、assert

當咱們傳入的第一個參數爲 假 時， console.assert 打印跟在這個參數後面的值。

console.log直接做爲回調

假若有這麼一個函數，咱們會對服務器返回的數據進行加工，而且傳遞給回調函數：

function getName(callback) {
    // 假設這個對象是從服務器請求回來的數據
    const mySkey = {
        name: 'mySkey',
    }
    // 咱們會使用一個回調來處理他的返回結果
    callback(mySkey)
}
複製代碼

原本在回調中打印回調信息以下：

getName(v => console.log(v))
複製代碼

直接將console.log做爲回調

getName(console.log)
複製代碼

4、Network

在這個tab欄下查看網絡信息，經常使用來調試接口信息

• 一、經常使用選項分別的功能

Preserve log    （保留）日誌，在何時會用到呢？當須要記錄頁面刷新先後的 log 或者是頁面跳轉先後的 log 來進行對比調試的時候
Disable catch   不緩存
Online          能夠切換網速測試
Hide data Urls  隱藏數據Url
All             查看全部請求
xhr             查看xml的http的request
複製代碼

• 二、從新發送 XHR 的請求

• 三、禁止請求

當你想測試頁面在某個接口失敗時的表現，就可使用 Network 面板中的禁止請求的方法。

5、Source

在這個tab欄下查看當前網頁加載到的資源信息，常在緩存致使問題時查看目前加載文件的正確性

什麼是 Drawer ？

Chrome DevTools 有不少部分，被分爲9個 tab (俗稱選項卡) ( Elements ， Console ， Sources ， Network ， 等等...) 可是，那僅僅是它的一部分而已！有一組平行的選項卡，被隱藏在主窗口之下。這個組合被稱爲 Drawer

• 一、如何打開 Drawer ?

當你在 DevTools （任何選項卡）中時，按 [esc] 來顯示它，再次按 [esc] 隱藏它

• 二、Animations 檢查動畫

當你看到一個很酷炫的動畫，但它是好幾個元素同時變化組成的，這種狀況很難經過檢索 element 的方式來弄懂它的原理是什麼，這時候就可使用 Drawer 慢速播放、重播或檢查動畫組的源代碼：

動畫組 : 動畫檢查器會根據開始時間（不包括延遲等等）檢測哪些動畫是相關的並將它們分到一組。換句話說，在同一腳本塊中觸發就被分爲同一組，但若是是異步的，它們將單獨分組。
複製代碼

能夠選擇播放速度的百分比[若是按下藍色的循環按鈕，動畫就會循環播放]：

• 三、coverage 代碼覆蓋率

coverage 能夠提供冗餘代碼的細節信息。使用 Drawer 菜單或者 Command 菜單來打開它

DevTools 的 coverage 工具能夠跟蹤當前加載的 JS 和 CSS 文件的 哪些行正在被執行 ，並顯示 未使用字節的百分比 , 綠色 的線條表示 已使用內容 ， 紅 線表示 未使用的內容

• 四、Changes 檢查你修改的內容

在 Chrome 裏調 CSS 應該是我工做的平常了，但我老是想將 新寫的樣式 與 最初樣式 進行比較，看看到底有什麼不同，這時候就可使用 Drawer 的 Changes

• 五、在 Chrome 中修改你的文件

咱們老是習慣於先在 IDE 或者文本編輯器中修改代碼，而後再進入 Chorme 中進行調試，那有沒有想過直接就在 Chrome 中來修改咱們的代碼呢？

代碼執行的位置也是最容易編輯代碼的位置。若是把項目的文件夾直接拖到 Source 面板， DevTools 會將修改同步到系統文件中。

Workspace 支持即時同步樣式，正如咱們剛纔所說，一旦設置好了 DevTools workspace ，就能夠在 Sources 面板中編輯 HTML 和 JavaScript （或者甚至是 TypeScript ，若是你有 sourcemaps ）文件，按 ctrl + s 後它將被保存 在文件系統中。

6、Performance

在這個tab欄下能夠記錄和分析頁面在運行時的全部活動

• 一、移動端設置CPU

在DevTools中，點擊 Performance 的 tab。 確保 Screenshots checkbox 被選中；點擊 Capture Settings（⚙️）按鈕，DevTools會展現不少設置，來模擬各類情況；對於模擬CPU，選擇4x slowdown，因而Devtools就開始模擬4倍低速CPU

• 二、錄製當前網頁運行

通常錄製15s就ok了，信息捕獲也比較齊全了

點擊stop，中止後生成下面數據信息