Chrome DevTools 操作歸納

目錄

• • 前言
  • 1、打開開發者工具快捷鍵
  • 2、在element 檢視DOM節點
  • 3、 實習編輯HTML 和 DOM （臨時）
  • 4、在console 中通路節點
  • 5、給DOM斷點調試（斷點生效自能通過JS來觸發）
  • 6、檢視和編輯看CSS（臨時）
  • 7、快速調試CSS 數值及顔色圖形動畫等
  • 8、 Console 面闆
  • 9、Sources 面闆
  • 10、Network 面闆調試網絡
  • 11、用戶端 Application 面闆
  • 12、模拟移動裝置進行調試
  • 後記

前言

本文是對Chrome DevTools 操作一個較為全面的歸納介紹。主要介紹的Chrome DevTools 的各個面闆的功能作用以及前端開發人員的一些調試技巧。相信很多人在這之前已經在日常開發中使用着Chrome DevTools ，對其也有着一點的了解和了解。希望看完本文後對您有一點的啟發和收獲。

1、打開開發者工具快捷鍵

a)、F12
b)、ctrl + shift + I
c)、ctrl + shift + c			快速進入element
d)、ctrl + shift + j 			快速進入console
           

2、在element 檢視DOM節點

a)、在element 選擇節點

滑鼠浮動到Elements上的元素時，在頁面自動凸顯對應的元素
           

b)、點選左上角的 Select a Element 按鈕或者 ctrl + shift + c ，然後光标直接選擇頁面上的任何地方進行反向定位DOM

滑鼠浮動到頁面的任何位置，Elements自動展開對應的标簽元素，滑鼠單擊可立即在Elements
位到對應的标簽元素
           

c)、在element 頁面中 按 ctrl + F, 呼出搜尋框，進行搜尋查詢

搜尋框輸入“lg”并回車，網頁和Elements 對應結果自動高亮。

3、 實習編輯HTML 和 DOM （臨時）

a)、在element定位到要編輯的 DOM 節點，輕按兩下你想要進行的 DOM 節點（文本節點、屬性節點、元素節點 等等）

b)、像在編輯器中編輯HTML: Element中定位到想要編輯的HTML DOM元素節點，選中右鍵，在彈出的菜單欄中 選擇Edit as HTML 即可進入

c)、複制節點：Element中選中要複制的節點，右鍵選中Copy，然後選中需要黏貼的位置的父節點使用快捷鍵 ctrl + v （注意：添加的新節點預設放在父節點的最後）

4、在console 中通路節點

a)、Js的元素選中器：document.querySelectorAll();

b)、$0,通路目前選中的節點

c)、在element選中要通路的節點，右鍵->Copy->Copy JS Path，然後在console 中黏貼 回車

5、給DOM斷點調試（斷點生效自能通過JS來觸發）

a)屬性修改時打斷點：break on –> attribute modifications

1. 添加一個屬性修改斷點

   

2. 在console 運作上面代碼

   

3. 在斷點處自動暫停

   

b)、節點删除時斷點：break on -> node removal

c)、子樹修改時打斷點：break on ->subtree modifications

6、檢視和編輯看CSS（臨時）

a)、打開 Element ,在 Style 子分欄檢視，選中css樣式可以進行編輯

1. 點選class 最後面一行可以動态增加新的樣式
2. style 中的樣式越在後面優先級越低

b)、在Computed 分欄中檢視全部生效的css樣式

c)、在Sources 面闆中打開css檔案進行檢視（如果是壓縮後的檔案，可以點選面闆左下角的“{}” Format 按鈕 格式化css 為未壓縮前）

d)、顔色選擇器插件：可以動态的進行顔色選擇設定、另有取色器可以快捷的擷取頁面中的顔色

e)、盒模型檢視器：Element 中有盒模型檢視器分欄，可以清晰的檢視每個DOM 的 padding、margin、border、width、height

f)、動态增加類和僞類

1. 增加類、僞類：在Style 分欄的右上角點選“+”
2. 檢視編輯 Element 的force狀态：在Style 分欄的右上角點選 “:hov”,在展開的CheckBox中對應的 state

   

3. 新增加的類都是臨時的，但是Chrome會把這些類存儲在 inspector-stylesheet檔案中，點選新增樣式右上角的inspector-stylesheet 連結， 可以跳轉的該檔案，進行複制等操作

7、快速調試CSS 數值及顔色圖形動畫等

a)、動态設定 text-shadow、box-shadow、color、background-color：滑鼠浮動到類的右下角的三個點的

b)、動畫效果設計可視化：點選DevTools 的左上角的三個點->More toold ->Animations，打開Animations 分欄進行動态調試

8、 Console 面闆

a)、可進行互動式程式設計

b)、調試log日志

c)、Debug

1. 使用debugger指令調試代碼：在需要暫停的js代碼後一行插入debugger；打開DevTools 的 Sources頁面中的對應的js檔案，代碼運作時自動在debugger處暫停，這時我們就可以使用Chrome自帶的debugger工具調試代碼（調試工具就在Sources 界面中）
2. 直接使用Chrome自帶的debugger工具互動式的調試代碼
   1. 添加斷點

      

   2. 重新運作，在斷點處暫停

      

9、Sources 面闆

a)、Sources 面闆中可以檢視網站的全部靜态資源

1. 在Sources 面闆的左側分欄是目錄分欄，在該分欄的Page 頁籤顯示的時目前網頁的全部靜态資源
2. 中間或者右邊是代碼展示分欄，可以進行互動式編輯（臨時的）
3. ctrl + p 可以呼出靜态資源搜尋框
4. 右邊或者下面，就是Chrome自帶的debugger工具

   

b)、使用Snippets來輔助Debugger

1. 什麼是Snippets?

   Snippet是一個代碼片段，用于輔助我們進行Debugger。也可以說，它就是個插件。例如，我們可以制作一個Jquery的 Snippet，然後在Sources 面闆中Run這個snippet，就可以臨時在目前頁面生效使用jquery了(即使我們)。

2. 在Sources 面闆的目錄分欄的最後一個頁籤選項有個Snippets, 選中該頁籤，我們可新增一個Snippet來輔助調試，也可以在對已存在的sinppets 進行管理。

   

c)、如何把DevTools 作為代碼編輯器

在Sources 的目錄分欄有一個頁籤--Filesystem，在這裡我們可以把項目檔案添到工作區（也就是生成一
個工作區）。添加後，我們就可以在浏覽器中修改工作區中的所有檔案，這些修改都是永久的。
比如說，我們除了在Soursces面闆中對檔案進行修改，在 Elements 的Style 中隊class 進行的修改編輯
也會存儲到本地檔案。
           

10、Network 面闆調試網絡

a)、Network 面闆可以做什麼？

1. 檢視網頁資源請求概覽，檢視資源分布

Network 主要三部分：工具欄、整個頁面請求的時間軸、單一請求展示清單

1. 檢視單一請求的Request/Response 或者時間消耗
2. 分析網頁性能優化，使用Watefall
3. 使用 ctrl + f 呼出搜尋框，搜尋範圍：全部請求的請求内容

   

11、用戶端 Application 面闆

a)、檢視、調試 cookie

打開application 面闆，展開Storage中Cookie，選擇目前網頁的 Cookie, 即可檢視目前網頁的全部Cookie,
 同時也可以對Cookie進行增删改
           

b)、檢視、調試LocalStorage 與 sessionStotage

操作同 Cookie

12、模拟移動裝置進行調試

a)、如何進入：在DevTools 頁面點選左上角的第二個按鈕進入 或 快捷鍵方式：在DevTools 中按 ctrl + shift +M 進入

b)、如何使用

1. 進入模拟移動端模式後，我們可以選擇要模拟的手機、狀态、或是模拟手機橫屏

   

2. 使用Sensors模拟手機的傳感器的各種情景
   1. 在 DevTools 按 ctrl + shift + p , 在打開的輸入框中輸入 Show Sensors 打開 Sensors 頁面進行情景設定。

      

後記

這篇筆記的 大部分内容來源于慕課網的視訊教程《Chrome DevTools開發者工具調試指南》。在學習該教材之前，我在日常開發中一直都有使用Chrome DevTools。但一直都是較為淺顯的使用（如調樣式布局）。學習該教程後，獲益良多呀！下面我将附上我學習Chrome DevTools 的視訊教程連結，以便您更全面的了解Chrome DevTools 。

視訊教材連結：https://www.imooc.com/learn/1164