[[188774]]

FireFox正因其提供的大量開發(fā)輔助功能而成為“開發(fā)人員的瀏覽器”。你可以在Firefox開發(fā)者工具頁面上找到大量開發(fā)工具，你也可以直接下載開發(fā)者版本瀏覽器，它直接集成了這些開發(fā)工具。

在這篇文章中，列舉了FireFox開發(fā)者工具中，我最喜歡的10個(gè)工具，并通過一小段示例來告訴你如何使用它們。

1. 顯示標(biāo)尺

FireFox提供了一個(gè)標(biāo)尺工具，能夠以像素為單位同時(shí)顯示橫向和縱向的標(biāo)尺。這個(gè)工具對(duì)你進(jìn)行頁面元素的排版非常有用。

你可以通過菜單項(xiàng) ☰ > Developer > Developer Toolbar (快捷鍵：Shift+F2)來顯示工具欄，然后輸入 rulers 并回車，標(biāo)尺便會(huì)顯示出來。

如果你希望標(biāo)尺按鈕能夠顯示在工具欄中，可以在“Toolbox Options”中的“Available Toolbox Buttons”下勾選“Toggle rulers for the page”復(fù)選框。

2. 通過CSS選擇器作局部截屏

盡管Firefox的工具欄上提供了截屏工具(可截取當(dāng)前窗口區(qū)域或整個(gè)頁面)，但我認(rèn)為基于CSS選擇器的局部截屏更加實(shí)用。

你可以通過菜單項(xiàng) ☰ > Developer > Developer Toolbar (快捷鍵：Shift+F2)來顯示工具欄，然后輸入screenshot --selector any_unique_css_selector 并回車，你所截取的內(nèi)容就能下載下來了。

同樣在“Toolbox Options”中的“Available Toolbox Buttons”下勾選“Take fullpage screenshot”復(fù)選框能夠在工具條上顯示這個(gè)按鈕。

3. 在頁面上拾取顏色

Firefox內(nèi)置了一個(gè)顏色拾取器并將其命名為“Eyedropper”。你可以通過菜單項(xiàng) ☰ > Developer > Eyedropper 來調(diào)用它。

在“Toolbox Options”中的“Available Toolbox Buttons”下勾選“Grab a color from the page”復(fù)選框能夠在工具條上顯示這個(gè)顏色拾取器按鈕。

4. 顯示頁面3D布局

以3D的形式顯示頁面能夠有效幫助我們解決布局問題。在3D視圖中你可以更加清晰地看到在不同層上的元素。直接在工具欄上點(diǎn)擊“3D View”按鈕，就可以顯示這個(gè)3D視圖。

在“Toolbox Options”中的“Available Toolbox Buttons”下勾選“3D View”復(fù)選框能夠在工具條上顯示這個(gè)3Ds視圖按鈕。

5. 顯示瀏覽器樣式

瀏覽器樣式由兩種類型組成：瀏覽器為每一個(gè)元素添加的默認(rèn)樣式，以及瀏覽器特有的樣式(它們會(huì)帶上瀏覽器的前綴信息)。通過查看瀏覽器樣式，你可以診斷你自定義樣式中的樣式覆蓋問題以及瀏覽器兼容性問題。

你可以通過菜單項(xiàng) ☰ > Developer > Inspector，然后選擇“Computed” 標(biāo)簽頁，并勾選“Browser styles”復(fù)選框。

你也可以通過快捷鍵 Ctrl +Shift + C 來打開“Inspector”面板，然后勾選“Browser styles”復(fù)選框。

6. 對(duì)當(dāng)前會(huì)話禁用JavaScript

基于***實(shí)踐以及對(duì)屏幕閱讀器支持的考慮，我們所開發(fā)的網(wǎng)站頁面不應(yīng)該由于JavaScript沒有被調(diào)用而破壞原有的內(nèi)容。因此你需要測試在JavaScript禁用的情況下，你的網(wǎng)頁是否依舊可以正常工作。

在“Toolbox Options”中的“Advanced settings”下勾選"Disable JavaScript*" 復(fù)選框，便能在整個(gè)會(huì)話中禁用JavaScript。

7. 禁用樣式表

與禁用JavaScript同樣的原因類似，你的頁面內(nèi)容也應(yīng)該在不加載任何樣式表的情況下能夠正常顯示。你可以在開發(fā)者工具中，讓樣式表失效，來檢查頁面內(nèi)容是否依然完整可讀。

在“Style Editor”面板中，點(diǎn)擊樣式表前面的眼睛圖標(biāo)，就可以隱藏這些樣式表(包括 內(nèi)聯(lián)的、內(nèi)部的 或 外部的)，再點(diǎn)擊一次就能恢復(fù)樣式表應(yīng)用。

你可以通過菜單項(xiàng) ☰ > Developer > Style Editor (快捷鍵：Shift + F7)來調(diào)用樣式編輯器。

8. 查看請(qǐng)求對(duì)應(yīng)的返回HTML內(nèi)容

Firefox開發(fā)者工具提供了一個(gè)選項(xiàng)可以以HTML的形式查看請(qǐng)求對(duì)應(yīng)的服務(wù)器響應(yīng)內(nèi)容。這能幫助開發(fā)人員查看所有302跳轉(zhuǎn)以及檢查返回內(nèi)容中是否包含敏感信息。

你可以通過菜單項(xiàng) ☰ > Developer > Network (快捷鍵：Ctrl + Shift + Q)來打開網(wǎng)絡(luò)面板，然后重新加載當(dāng)前頁面，所有的請(qǐng)求便會(huì)在面板中以列表的形式顯示出來，你可以選擇任何一個(gè)請(qǐng)求，然后點(diǎn)擊“Preivew”標(biāo)簽頁，響應(yīng)內(nèi)容便會(huì)在顯示出來。

9. 以不同的設(shè)備尺寸查看網(wǎng)頁

要測試一個(gè)網(wǎng)頁是否支持響應(yīng)式布局并在各種不同尺寸的設(shè)備中可以正常瀏覽，我們可以使用“Responsive Design View”。通過菜單項(xiàng) ☰ > Developer > Responsive Design View (快捷鍵：Ctrl + Shift + Q)來打開這個(gè)視圖。

你也可以在“Toolbox Options”中的“Advanced settings”下勾選"Responsive Design Mode" 復(fù)選框，來讓這個(gè)按鈕出現(xiàn)在工具欄上。

10. 在頁面中運(yùn)行JavaScript

如果你希望在任何頁面上快速執(zhí)行JavaScript腳本，你可以使用Firefox的“Scratchpad”工具。通過菜單項(xiàng) ☰ > Developer > Scratchpad (快捷鍵：Ctrl + F4)來打開這個(gè)視圖。

同樣可以在“Toolbox Options”中的“Advanced settings”下勾選"Scratchpad" 復(fù)選框，來讓這個(gè)按鈕出現(xiàn)在工具欄上。

【本文是51CTO專欄作者“陳逸鶴”的原創(chuàng)文章，如需轉(zhuǎn)載請(qǐng)聯(lián)系作者本人(微信公眾號(hào):techmask)】

戳這里，看該作者更多好文