建站
咨詢
售后
建站咨詢
新聞中心
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”復(fù)選框。
2. 通過CSS選擇器作局部截屏
盡管Firefox的工具欄上提供了截屏工具(可截取當前窗口區(qū)域或整個頁面)，但我認為基于CSS選擇器的局部截屏更加實用。
你可以通過菜單項 > Developer > Developer Toolbar (快捷鍵：Shift+F2)來顯示工具欄，然后輸入screenshot --selector any_unique_css_selector 并回車，你所截取的內(nèi)容就能下載下來了。
同樣在“Toolbox Options”中的“Available Toolbox Buttons”下勾選“Take fullpage screenshot”復(fù)選框能夠在工具條上顯示這個按鈕。
3. 在頁面上拾取顏色
Firefox內(nèi)置了一個顏色拾取器并將其命名為“Eyedropper”。你可以通過菜單項 > Developer > Eyedropper 來調(diào)用它。
在“Toolbox Options”中的“Available Toolbox Buttons”下勾選“Grab a color from the page”復(fù)選框能夠在工具條上顯示這個顏色拾取器按鈕。
4. 顯示頁面3D布局
以3D的形式顯示頁面能夠有效幫助我們解決布局問題。在3D視圖中你可以更加清晰地看到在不同層上的元素。直接在工具欄上點擊“3D View”按鈕，就可以顯示這個3D視圖。
在“Toolbox Options”中的“Available Toolbox Buttons”下勾選“3D View”復(fù)選框能夠在工具條上顯示這個3Ds視圖按鈕。
5. 顯示瀏覽器樣式
瀏覽器樣式由兩種類型組成：瀏覽器為每一個元素添加的默認樣式，以及瀏覽器特有的樣式(它們會帶上瀏覽器的前綴信息)。通過查看瀏覽器樣式，你可以診斷你自定義樣式中的樣式覆蓋問題以及瀏覽器兼容性問題。
你可以通過菜單項 > Developer > Inspector，然后選擇“Computed” 標簽頁，并勾選“Browser styles”復(fù)選框。
你也可以通過快捷鍵 Ctrl +Shift + C 來打開“Inspector”面板，然后勾選“Browser styles”復(fù)選框。
6. 對當前會話禁用JavaScript
基于***實踐以及對屏幕閱讀器支持的考慮，我們所開發(fā)的網(wǎng)站頁面不應(yīng)該由于JavaScript沒有被調(diào)用而破壞原有的內(nèi)容。因此你需要測試在JavaScript禁用的情況下，你的網(wǎng)頁是否依舊可以正常工作。
在“Toolbox Options”中的“Advanced settings”下勾選"Disable JavaScript*" 復(fù)選框，便能在整個會話中禁用JavaScript。
7. 禁用樣式表
與禁用JavaScript同樣的原因類似，你的頁面內(nèi)容也應(yīng)該在不加載任何樣式表的情況下能夠正常顯示。你可以在開發(fā)者工具中，讓樣式表失效，來檢查頁面內(nèi)容是否依然完整可讀。
在“Style Editor”面板中，點擊樣式表前面的眼睛圖標，就可以隱藏這些樣式表(包括 內(nèi)聯(lián)的、內(nèi)部的 或 外部的)，再點擊一次就能恢復(fù)樣式表應(yīng)用。
你可以通過菜單項 > Developer > Style Editor (快捷鍵：Shift + F7)來調(diào)用樣式編輯器。
8. 查看請求對應(yīng)的返回HTML內(nèi)容
Firefox開發(fā)者工具提供了一個選項可以以HTML的形式查看請求對應(yīng)的服務(wù)器響應(yīng)內(nèi)容。這能幫助開發(fā)人員查看所有302跳轉(zhuǎn)以及檢查返回內(nèi)容中是否包含敏感信息。
你可以通過菜單項 > Developer > Network (快捷鍵：Ctrl + Shift + Q)來打開網(wǎng)絡(luò)面板，然后重新加載當前頁面，所有的請求便會在面板中以列表的形式顯示出來，你可以選擇任何一個請求，然后點擊“Preivew”標簽頁，響應(yīng)內(nèi)容便會在顯示出來。
9. 以不同的設(shè)備尺寸查看網(wǎng)頁
要測試一個網(wǎng)頁是否支持響應(yīng)式布局并在各種不同尺寸的設(shè)備中可以正常瀏覽，我們可以使用“Responsive Design View”。通過菜單項 > Developer > Responsive Design View (快捷鍵：Ctrl + Shift + Q)來打開這個視圖。
你也可以在“Toolbox Options”中的“Advanced settings”下勾選"Responsive Design Mode" 復(fù)選框，來讓這個按鈕出現(xiàn)在工具欄上。
10. 在頁面中運行JavaScript
如果你希望在任何頁面上快速執(zhí)行JavaScript腳本，你可以使用Firefox的“Scratchpad”工具。通過菜單項 > Developer > Scratchpad (快捷鍵：Ctrl + F4)來打開這個視圖。
同樣可以在“Toolbox Options”中的“Advanced settings”下勾選"Scratchpad" 復(fù)選框，來讓這個按鈕出現(xiàn)在工具欄上。
【本文是專欄作者“陳逸鶴”的原創(chuàng)文章，如需轉(zhuǎn)載請聯(lián)系作者本人(微信公眾號:techmask)】
戳這里，看該作者更多好文
文章題目：這10個FireFox工具讓前端開發(fā)效率x2
標題URL：http://www.dlmjj.cn/article/dhjddgs.html
