作為web開發(fā)者，瀏覽器開發(fā)者工具是我們必不可少的工具，用好瀏覽器開發(fā)者工具是一項基本技能。大家對于Windows上的Chrome應(yīng)該很熟悉了，但是在Mac上是怎樣使用瀏覽器開發(fā)工具的呢？ 打開瀏覽

作為web開發(fā)者，瀏覽器開發(fā)者工具是我們必不可少的工具，用好瀏覽器開發(fā)者工具是一項基本技能。大家對于Windows上的Chrome應(yīng)該很熟悉了，但是在Mac上是怎樣使用瀏覽器開發(fā)工具的呢？

打開瀏覽器開發(fā)工具

在Mac上使用瀏覽器開發(fā)工具和在Windows上使用類似，都是通過快捷鍵或右鍵點擊來打開。在Chrome瀏覽器中打開任意網(wǎng)頁，可以鼠標(biāo)右鍵選擇檢查，或者使用快捷鍵Command Alt I來打開瀏覽器開發(fā)工具。

常用操作

瀏覽器開發(fā)工具有9個tab，下面講一些常用的操作：

Elements

Elements這個tab是網(wǎng)頁的標(biāo)簽代碼結(jié)構(gòu)頁面，當(dāng)鼠標(biāo)定位到某個標(biāo)簽時，頁面會突出顯示出來。你還可以點擊前面的箭頭圖標(biāo)來選擇頁面的元素，并查看它的代碼。

手機屏幕調(diào)試

選擇第二個手機屏幕圖標(biāo)，可以打開移動設(shè)備調(diào)試。屏幕切換為手機屏幕大小，你還可以自己設(shè)置大小。這是做響應(yīng)式設(shè)計的最好的調(diào)試工具。

Memory

Memory這個tab是用于測試頁面性能表現(xiàn)的。對于一些長時間打開就會崩潰的網(wǎng)頁問題，可以借助這個工具進行分析。選擇"Take heap snapshot"，然后點擊"take snapshot"，就可以得到第一次內(nèi)存使用情況。之后，每次點擊左邊的小圓點，就可以看到兩次內(nèi)存使用情況的差別。右邊還提供了詳細的數(shù)據(jù)供參考。

Sources

Sources這個tab用來查看頁面的源代碼，包括HTML、CSS、JS等。通常會被用來debug JavaScript代碼。

Network

Network這個tab記錄了所有的網(wǎng)絡(luò)請求，包括靜態(tài)資源（CSS、JS、圖片等）的下載以及HTTP請求等。它對于頁面請求時間優(yōu)化非常有用，你可以看到每個請求花費的時間。

Console

Console這個tab用來調(diào)試代碼，可以打印出運行結(jié)果，還可以顯示我們在JS代碼中加入的輸出語句。它本身就是一個編輯器，我們可以在這里編輯函數(shù)并運行。

其他tab

除了上述提到的幾個tab，還有一些其他的tab，如Audits、Performance、Application、Security等。在日常使用中可能用得比較少，暫時可以忽略。