火狐web开发清楚缓存_如何使用Firefox的Web开发工具
火狐web開(kāi)發(fā)清楚緩存
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菜單包含用于檢查頁(yè)面，執(zhí)行任意JavaScript代碼以及查看HTTP請(qǐng)求和其他消息的工具。 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開(kāi)發(fā)人員功能，再加上Firebug和Web Developer Toolbar等出色的Web開(kāi)發(fā)人員附加組件，使Firefox成為Web開(kāi)發(fā)人員的理想瀏覽器。 在Firefox菜單中的Web Developer下可以使用所有工具。
頁(yè)面檢查器 (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.
通過(guò)右鍵單擊特定元素并選擇“檢查” (或按Q )來(lái)檢查該元素。 您也可以從Web Developer菜單啟動(dòng)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.
您將在屏幕底部看到一個(gè)工具欄，可用于控制檢查器。 您選擇的元素將突出顯示，頁(yè)面上的其他元素將變灰。
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.
如果要選擇新元素，請(qǐng)單擊工具欄上的“檢查”按鈕，將鼠標(biāo)懸停在頁(yè)面上，然后單擊您的元素。 Firefox突出顯示光標(biāo)下方的元素。
You can navigate between parent and child elements by clicking the breadcrumbs on the toolbar.
您可以通過(guò)單擊工具欄上的面包屑在父元素和子元素之間導(dǎo)航。
HTML檢查器 (HTML Inspector)
Click the HTML button to view the HTML code of the currently selected element.
單擊HTML按鈕以查看當(dāng)前所選元素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檢查器使您能夠展開(kāi)和折疊HTML標(biāo)簽，從而一目了然。 如果要在平面文件中查看頁(yè)面HTML，可以從Web Developer菜單中選擇View Page Source 。
CSS檢查器 (CSS Inspector)
Click the Style button to see the CSS rules applied to the selected element.
單擊樣式按鈕以查看應(yīng)用于所選元素CSS規(guī)則。
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.
還有一個(gè)CSS屬性面板-通過(guò)單擊“規(guī)則”和“屬性”按鈕在兩者之間切換。 為了幫助您找到特定的屬性，屬性面板包括一個(gè)搜索框。
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.
您可以從“規(guī)則”面板中即時(shí)編輯元素CSS。 取消選中任何復(fù)選框以停用規(guī)則，單擊文本以更改規(guī)則，或?qū)⒆约旱囊?guī)則添加到窗格頂部的元素。 在這里，我添加了font-weight：粗體； CSS規(guī)則，使元素的文本變?yōu)榇煮w。
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的更新，現(xiàn)在包含語(yǔ)法高亮顯示。 您可以鍵入JavaScript代碼以在當(dāng)前頁(yè)面上運(yùn)行。
Once you have, click the Execute menu and select Run. The code runs in the current tab.
完成后，單擊“執(zhí)行”菜單，然后選擇“運(yùn)行”。 該代碼在當(dāng)前選項(xiàng)卡中運(yùn)行。
網(wǎng)絡(luò)控制臺(tái) (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控制臺(tái)取代了舊的錯(cuò)誤控制臺(tái)，該控制臺(tái)已不建議使用，并將在以后的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.
控制臺(tái)顯示四種不同類(lèi)型的消息，您可以切換它們的可見(jiàn)性-網(wǎng)絡(luò)請(qǐng)求，CSS錯(cuò)誤消息，JavaScript錯(cuò)誤消息和Web開(kāi)發(fā)人員消息。
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開(kāi)發(fā)人員消息？ 這是一條打印到window.console對(duì)象的消息。 例如，我們可以運(yùn)行window.console.log(“ Hello World”); Scratchpad中JavaScript代碼可將開(kāi)發(fā)人員消息打印到控制臺(tái)。 Web開(kāi)發(fā)人員可以將這些消息集成到他們JavaScript代碼中，以幫助進(jìn)行調(diào)試。
Refresh the page and you’ll see the generated network requests and other messages.
刷新頁(yè)面，您將看到生成的網(wǎng)絡(luò)請(qǐng)求和其他消息。
Use the search box to filter the messages; click a request if you want to see more details.
使用搜索框過(guò)濾郵件； 如果您想查看更多詳細(xì)信息，請(qǐng)單擊一個(gè)請(qǐng)求。
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開(kāi)始，Web控制臺(tái)可以與Page Inspector協(xié)同工作。 $ 0變量表示檢查器中當(dāng)前選擇的對(duì)象。 因此，例如，如果要隱藏當(dāng)前選擇的對(duì)象，則可以在控制臺(tái)中運(yùn)行$ 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.
如果您想了解更多有關(guān)使用控制臺(tái)及其內(nèi)置功能的信息，請(qǐng)查看Mozilla開(kāi)發(fā)人員網(wǎng)絡(luò)網(wǎng)站上的Web控制臺(tái)頁(yè)面。
獲取更多工具 (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.
“獲取更多工具”選項(xiàng)將帶您進(jìn)入Mozilla附加組件網(wǎng)站上的Web開(kāi)發(fā)人員工具箱附加組件集合。 它包含一些針對(duì)Web開(kāi)發(fā)人員的最佳插件，包括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.
如果您已經(jīng)使用Firefox幾年了，您可能還記得DOM Inspector。 從那時(shí)起，Firefox的集成開(kāi)發(fā)人員工具已經(jīng)走了很長(zhǎng)一段路。
翻譯自: https://www.howtogeek.com/105320/how-to-use-firefoxs-web-developer-tools/
火狐web開(kāi)發(fā)清楚緩存
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的火狐web开发清楚缓存_如何使用Firefox的Web开发工具的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： ubuntu自定义菜单_如何自定义Ubu
- 下一篇： IT：如何使用Server 2008 R