[[188774]]

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

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

1. 顯示標尺

FireFox提供了一個標尺工具，能夠以像素為單位同時顯示橫向和縱向的標尺。這個工具對你進行頁面元素的排版非常有用。

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

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

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

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

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

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

3. 在頁面上拾取顏色

Firefox內置了一個顏色拾取器并將其命名為“Eyedropper”。你可以通過菜單項 ☰ > Developer > Eyedropper 來調用它。

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

4. 顯示頁面3D布局

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

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

5. 顯示瀏覽器樣式

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

你可以通過菜單項 ☰ > Developer > Inspector，然后選擇“Computed” 標簽頁，并勾選“Browser styles”復選框。

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

6. 對當前會話禁用JavaScript

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

在“Toolbox Options”中的“Advanced settings”下勾選"Disable JavaScript*" 復選框，便能在整個會話中禁用JavaScript。

7. 禁用樣式表

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

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

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

8. 查看請求對應的返回HTML內容

Firefox開發(fā)者工具提供了一個選項可以以HTML的形式查看請求對應的服務器響應內容。這能幫助開發(fā)人員查看所有302跳轉以及檢查返回內容中是否包含敏感信息。

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

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

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

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

10. 在頁面中運行JavaScript

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

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

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

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