Chrome開發者工具使用小技巧

轉

Chrome開發者工具使用小技巧

2018年04月20日 10:47:36 蔡俊鋒 閱讀數：143 標籤： Chrome開發工具使用技巧前端 更多

我的分類： 開發技巧工具前端

 

正所謂不用Chrome的開發者不合格，不曉得Chrome開發者工具進行web調試也不是合格的web開發者。因此本文總結了Chrome開發者工具使用的一些小技巧。

一：首先來講下如何打開開發者工具吧：

1.  
   a.直接在頁面上點擊右鍵，而後選擇審查元素或者檢查；
2.  
   b.打開瀏覽器工具下的開發者工具；
3.  
   c.直接F12鍵；
4.  
   d.快捷鍵Command + Option+I（Ctrl+Shift+I）打開。

• 1
• 2
• 3
• 4
• 5

打開後咱們看到的界面大概以下： 

二：Chrome開發者工具結構

1.Elements

1.  
   容許咱們從瀏覽器的角度看頁面，也就是說咱們能夠看到chrome渲染頁面所須要的的HTML、CSS和DOM(Document Object Model)對象。此外，還能夠編輯這些內容更改頁面顯示效果。
2.  
   在Elements下點擊左上方小箭頭能夠指定頁面元素對應相應代碼；

• 1
• 2
• 3

點擊元素右鍵對元素進行監聽

2.Network

能夠看到頁面向服務器請求了哪些資源、資源的大小以及加載資源花費的時間，固然也能看到哪些資源不能成功加載。此外，還能夠查看HTTP的請求頭，返回內容等；

• 1
• 2

3.Sources

主要用來調試js或者修改樣式表啥的，主要是修改編輯源文件吧；

• 1
• 2

4.Timeline

提供了加載頁面時花費時間的完整分析，全部事件，從下載資源處處理Javascript，計算CSS樣式等花費的時間都展現在Timeline中；

• 1
• 2

5.Profiles

分析web應用或者頁面的執行時間以及內存使用狀況；

• 1
• 2

6.Resources

對本地緩存（IndexedDB、Web SQL、Cookie、應用程序緩存、Web Storage）中的數據進行確認及編輯；

• 1
• 2

7.Audits

分析頁面加載的過程，進而提供減小頁面加載時間、提高響應速度的方案；

• 1
• 2

8.Console

顯示各類警告與錯誤信息，而且提供了shell用來和文檔、開發者工具交互，在調試js代碼很重要。

• 1
• 2

三：Workspace工具

是一個能夠在開發者工具中調試修改js或者css同時自動保存文件的工具，可以避免開發人員在工具中調試好，再在編輯器中修改一次代碼的重複操做，提升效率。把文件添加到workspace中修改的方法：

• 1
• 2

1. 打開開發者工具（F12），切換到Sources選項卡==》在須要編輯的資源文件下右鍵選擇 『Add Folder to Workspace』==》選擇源文件所在文件夾，當彈出提示時，選擇容許==》在Chrome的Source面板右鍵選擇須要編輯的源文件，選擇「Map to a Network Resource」
2. 打開開發者工具（F12），點擊右下角的設置按鈕==》選擇 Workspace, 而後選擇 Add folder==》選擇源文件所在文件夾，當彈出提示時，選擇容許==》在Chrome的Source面板右鍵選擇須要編輯的源文件，選擇「Map to a Network Resource」
3. 這樣在Chrome的調試工具裏面編輯該源文件，或者直接修改css樣式（對於css文件），再用Ctrl+S保存，這樣修改的代碼就自動保存到本地文件中了。

四：代碼格式化

有不少css/js的代碼都會被 minify 掉，你能夠點擊代碼窗口左下角的那個 { }  標籤，chrome會幫你給格式化掉。

• 1
• 2

四：強制dom狀態 
有些HTML的DOM是有狀態的，好比a 標籤，其會有 active，hover， focus，visited這些狀態，有時候，咱們的CSS會來定關不一樣狀態的樣式，在分析網頁查看網頁上DOM的CSS樣式時，咱們能夠點擊CSS樣式上的 :hov 這個小按鈕來強制這個DOM的狀態。 

五：動畫

如今的網頁上都會有一些動畫效果。在Chrome的開發者工具中，經過右上角的菜單中的 More Tools => Animations 呼出相關的選項卡。因而你就能夠慢動做播放動畫了（能夠點選 25% 或 10%），而後，Chrome還能夠幫你把動畫錄下來，你能夠拉動動再畫的過程，甚至能夠作一些簡單的修改。 

• 1
• 2

六：顏色取色和選擇

咱們能夠在網頁中獲取某元素字體顏色或者背景顏色等，只須要點擊該元素顏色那個框框那裏就會彈出顏色取色器，進行顏色選擇和查看，以下：

• 1
• 2

七：Sources中的調試

1.斷點調試

這一步就是打開文件，在任意一行的行號，點擊就會出現一個斷點！

• 1
• 2

2.debugger調試

你們可能看到，上圖紅框的按鈕，我按照編號簡單說下： 
a.中止當前的斷點調試 
b.繼續執行下一行代碼，（1.這個方式不會進入函數，2.這個方式快捷鍵是f10） 
c.跳入函數中去（這個方式快捷鍵是f11） 
d.跳出當前的函數 
e.禁用全部的斷點，中止任何調試 
f.程序運行時遇到異常時是否中斷調試

八：application中的緩存和文件

1. cookie
2. localstorage和localsession
3. 緩存（Cache Storage）
4. indexedDB
5. Frames（頁面上的資源包括fonts，images，js文件，css文件等）。

---

以上就是Chrome開發者工具一些基本常見的操做或者小技巧