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

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

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

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

常用操作

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

Elements

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

手機(jī)屏幕調(diào)試

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

Memory

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

Sources

Sources這個(gè)tab用來(lái)查看頁(yè)面的源代碼，包括HTML、CSS、JS等。通常會(huì)被用來(lái)debug JavaScript代碼。

Network

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

Console

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

其他tab

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