火狐web開發清楚緩存

Firefox’s Web Developer menu contains tools for inspecting pages, executing arbitrary JavaScript code, and viewing HTTP requests and other messages. Firefox 10 added an all-new Inspector tool and updated Scratchpad.

Firefox的Web Developer菜單包含用于檢查頁面，執行任意JavaScript代碼以及查看HTTP請求和其他消息的工具。 Firefox 10添加了全新的Inspector工具并更新了Scratchpad。

Firefox’s new web developer features, in combination with awesome web-developer add-ons like Firebug and the Web Developer Toolbar, make Firefox an ideal browser for web developers. All tools are available under Web Developer in Firefox’s menu.

Firefox的新Web開發人員功能，再加上Firebug和Web Developer Toolbar等出色的Web開發人員附加組件，使Firefox成為Web開發人員的理想瀏覽器。 在Firefox菜單中的Web Developer下可以使用所有工具。

頁面檢查器 (Page Inspector)

Inspect a specific element by right-clicking it and selecting Inspect (or pressing Q). You can also launch the Inspector from the Web Developer menu.

通過右鍵單擊特定元素并選擇“檢查” (或按Q )來檢查該元素。 您也可以從Web Developer菜單啟動Inspector 。

You’ll see a toolbar at the bottom of the screen, which you can use to control the inspector. Your selected element will be highlighted and other elements on the page will be dimmed.

您將在屏幕底部看到一個工具欄，可用于控制檢查器。 您選擇的元素將突出顯示，頁面上的其他元素將變灰。

If you want to choose a new element, click the Inspect button on the toolbar, hover your mouse over the page and click your element. Firefox highlights the element under your cursor.

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

You can navigate between parent and child elements by clicking the breadcrumbs on the toolbar.

您可以通過單擊工具欄上的面包屑在父元素和子元素之間導航。

HTML檢查器 (HTML Inspector)

Click the HTML button to view the HTML code of the currently selected element.

單擊HTML按鈕以查看當前所選元素HTML代碼。

The HTML inspector allows you to expand and collapse the HTML tags, making it easy to visualize at a glance. If you want to see the page’s HTML in a flat file, you can select View Page Source from the Web Developer menu.

HTML檢查器使您能夠展開和折疊HTML標簽，從而一目了然。 如果要在平面文件中查看頁面HTML，可以從Web Developer菜單中選擇View Page Source 。

CSS檢查器 (CSS Inspector)

Click the Style button to see the CSS rules applied to the selected element.

單擊樣式按鈕以查看應用于所選元素CSS規則。

There’s also a CSS properties panel — switch between the two by clicking the Rules and Properties buttons. To help you find specific properties, the properties panel includes a search box.

還有一個CSS屬性面板-通過單擊“規則”和“屬性”按鈕在兩者之間切換。 為了幫助您找到特定的屬性，屬性面板包括一個搜索框。

You can edit the element’s CSS on the fly from the Rules panel. Uncheck any of the check boxes to deactivate a rule, click the text to change a rule, or add your own rules to the element at the top of the pane. Here, I’ve added the font-weight: bold; CSS rule, making the element’s text bold.

您可以從“規則”面板中即時編輯元素CSS。 取消選中任何復選框以停用規則，單擊文本以更改規則，或將自己的規則添加到窗格頂部的元素。 在這里，我添加了font-weight：粗體； CSS規則，使元素的文本變為粗體。

JavaScript便簽本 (JavaScript Scratchpad)

The Scratchpad also saw an update with Firefox 10, and now contains syntax highlighting. You can type in JavaScript code to run on the current page.

Scratchpad還看到了Firefox 10的更新，現在包含語法高亮顯示。 您可以鍵入JavaScript代碼以在當前頁面上運行。

Once you have, click the Execute menu and select Run. The code runs in the current tab.

完成后，單擊“執行”菜單，然后選擇“運行”。 該代碼在當前選項卡中運行。

網絡控制臺 (Web Console)

The Web Console replaces the old Error Console, which has been deprecated and will be removed in a future version of Firefox.

Web控制臺取代了舊的錯誤控制臺，該控制臺已不建議使用，并將在以后的Firefox版本中刪除。

The console displays four different types of messages, which you can toggle the visibility of — network requests, CSS error messages, JavaScript error messages and web developer messages.

控制臺顯示四種不同類型的消息，您可以切換它們的可見性-網絡請求，CSS錯誤消息，JavaScript錯誤消息和Web開發人員消息。

What’s a web developer message? It’s a message printed to the window.console object. For example, we could run the window.console.log(“Hello World”); JavaScript code in the Scratchpad to print a developer message to the console. Web developers can integrate these messages into their JavaScript code to help with debugging.

什么是Web開發人員消息？ 這是一條打印到window.console對象的消息。 例如，我們可以運行window.console.log(“ Hello World”); Scratchpad中JavaScript代碼可將開發人員消息打印到控制臺。 Web開發人員可以將這些消息集成到他們JavaScript代碼中，以幫助進行調試。

Refresh the page and you’ll see the generated network requests and other messages.

刷新頁面，您將看到生成的網絡請求和其他消息。

Use the search box to filter the messages; click a request if you want to see more details.

使用搜索框過濾郵件； 如果您想查看更多詳細信息，請單擊一個請求。

As of Firefox 10, the Web Console can work in tandem with the Page Inspector. The $0 variable represents the currently selected object in the inspector. So, for example, if you wanted to hide the currently selected object, you could run $0.style.display=”none” in the console.

從Firefox 10開始，Web控制臺可以與Page Inspector協同工作。 $ 0變量表示檢查器中當前選擇的對象。 因此，例如，如果要隱藏當前選擇的對象，則可以在控制臺中運行$ 0.style.display =” none” 。

If you’re interested in learning more about using the console and its built-in functions, check out the Web Console page on Mozilla’s Developer Network website.

如果您想了解更多有關使用控制臺及其內置功能的信息，請查看Mozilla開發人員網絡網站上的Web控制臺頁面。

獲取更多工具 (Get More Tools)

The Get More Tools option takes you to the Web Developer’s Toolbox add-on collection on the Mozilla Add-Ons website. It contains some of the best add-ons for web developers, including Firebug and the Web Developer Toolbar.

“獲取更多工具”選項將帶您進入Mozilla附加組件網站上的Web開發人員工具箱附加組件集合。 它包含一些針對Web開發人員的最佳插件，包括Firebug和Web Developer工具欄。

---

---

If you’ve been using Firefox for a few years, you may remember the DOM Inspector. Firefox’s integrated developer tools have come a long way since then.

如果您已經使用Firefox幾年了，您可能還記得DOM Inspector。 從那時起，Firefox的集成開發人員工具已經走了很長一段路。

翻譯自: https://www.howtogeek.com/105320/how-to-use-firefoxs-web-developer-tools/

火狐web開發清楚緩存