如何使用firefox的web開發工具

Firefox的webdeveloper選單包含用於檢查頁面、執行任意JavaScript程式碼以及檢視HTTP請求和其他訊息的工具。firefox10增加了一個全新的檢查器工具並更新了Scratchpad。...

Firefox的webdeveloper選單包含用於檢查頁面、執行任意JavaScript程式碼以及檢視HTTP請求和其他訊息的工具。firefox10增加了一個全新的檢查器工具並更新了Scratchpad。

Firefox的新web開發者特性，結合Firebug和web開發者工具欄等優秀的web開發者外掛，使Firefox成為web開發者的理想瀏覽器。所有工具都可以在Firefox選單的WebDeveloper下找到。

頁面檢查器

透過右鍵單擊特定圖元並選擇“檢查”（或按Q鍵）來檢查該圖元。也可以從“Web開發人員”選單啟動檢查器。

您將在螢幕底部看到一個工具欄，您可以使用它來控制檢查器。選定的元素將高亮顯示，頁面上的其他元素將變暗。

如果要選擇新元素，請單擊工具欄上的“檢查”按鈕，將滑鼠懸停在頁面上，然後單擊元素。Firefox突出顯示游標下的元素。

透過單擊工具欄上的麵包屑，可以在父元素和子元素之間導航。

html檢查器

單擊HTML按鈕檢視當前選定元素的HTML程式碼。

HTML檢查器允許您展開和摺疊HTML標記，使其易於視覺化。如果要在平面檔案中檢視頁面的HTML，可以從“Web開發人員”選單中選擇“檢視頁面源”。

css檢查器

單擊樣式按鈕檢視應用於選定元素的CSS規則。

還有一個CSS屬性面板-透過單擊規則和屬性按鈕在兩者之間切換。為了幫助您查詢特定屬性，“屬性”面板包含一個搜尋框。

您可以從規則面板動態編輯元素的CSS。取消選中任何複選框可停用規則，單擊文字可更改規則，或將您自己的規則新增到窗格頂部的元素中。在這裡，我添加了font-weight:bold；CSS規則，使元素的文字加粗。

javascript草稿行

Scratchpad還看到了firefox10的更新，現在包含語法高亮顯示。您可以鍵入要在當前頁上執行的JavaScript程式碼。

一旦有，單擊執行選單並選擇Run。程式碼執行在當前選項卡中。

web控制檯

Web控制檯取代了舊的錯誤控制檯，該控制檯已被棄用，並將在未來版本的Firefox中刪除。

控制檯顯示四種不同型別的訊息，您可以切換這些訊息的可見性—網路請求、CSS錯誤訊息、JavaScript錯誤訊息和web開發人員訊息。

什麼是web開發人員訊息？這是一條印在報紙上的資訊視窗控制檯物件。例如，我們可以執行window.c***ole.log日誌（“Hello World”）；Scratchpad中的JavaScript程式碼，用於將開發人員訊息列印到控制檯。Web開發人員可以將這些訊息整合到JavaScript程式碼中，以幫助進行除錯。

重新整理頁面，您將看到生成的網路請求和其他訊息。

使用搜索框篩選郵件；如果要檢視更多詳細資訊，請單擊請求。

從firefox10開始，Web控制檯可以與頁面檢查器協同工作。$0變量表示檢查器中當前選定的物件。例如，如果要隱藏當前選定的物件，可以執行$0。樣式.顯示=控制檯中的“無”。

如果您有興趣瞭解有關使用控制檯及其內建功能的更多資訊，請檢視Mozilla開發者網路網站上的Web控制檯頁面。

獲取更多工具

“獲取更多工具”選項會將您帶到Mozilla載入項網站上的Web開發人員工具箱載入項集合。它包含一些最適合web開發人員的外掛，包括Firebug和web開發人員工具欄。

如果您已經使用Firefox幾年了，您可能還記得DOM檢查器。從那時起，Firefox的整合開發工具已經取得了長足的進步。

發表於 2021-04-12 14:50
閱讀 ( 32 )
分類：網際網路

你可能感興趣的文章

internet explorer 11(internet explorer 11)和火狐33(firefox 33)的區別

internet explorer 11與firefox 33之比較本文試圖比較Firefox和IE瀏覽器的最新版本。Internet Explorer 11是Microsoft為Windows作業系統設計的最新專有web瀏覽器。另一方面，由Mozilla基金會開發的Firefox是開源的，可以跨多個平臺使用，包括Windo...

發佈於 2020-10-25 15:00
閲讀 ( 51 )

火狐(firefox)和鉻（2014）(chrome (2014))的區別

...狐vs chrome（2014）在當今許多可用的web瀏覽器中，Mozilla Firefox和googlechrome非常受歡迎，因為它們之間存在一些有趣的差異，這使得它們各具特色。本文比較了2014年釋出的Mozilla Firefox和googlechrome。Firefox是由Mozilla開發的免費開源web...

發佈於 2020-10-26 22:08
閲讀 ( 52 )