diff options
Diffstat (limited to 'files/fa/tools')
| -rw-r--r-- | files/fa/tools/debugger/how_to/index.html | 11 | ||||
| -rw-r--r-- | files/fa/tools/debugger/index.html | 59 | ||||
| -rw-r--r-- | files/fa/tools/index.html | 218 | ||||
| -rw-r--r-- | files/fa/tools/network_monitor/index.html | 571 | ||||
| -rw-r--r-- | files/fa/tools/web_console/index.html | 37 |
5 files changed, 0 insertions, 896 deletions
diff --git a/files/fa/tools/debugger/how_to/index.html b/files/fa/tools/debugger/how_to/index.html deleted file mode 100644 index 084f1717e5..0000000000 --- a/files/fa/tools/debugger/how_to/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: How to -slug: Tools/Debugger/How_to -tags: - - NeedsTranslation - - TopicStub -translation_of: Tools/Debugger/How_to ---- -<div>{{ToolsSidebar}}</div><p><span class="seoSummary">These articles describe how to use the debugger.</span></p> - -<p>{{ ListSubpages () }}</p> diff --git a/files/fa/tools/debugger/index.html b/files/fa/tools/debugger/index.html deleted file mode 100644 index c384131b2e..0000000000 --- a/files/fa/tools/debugger/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: The Firefox JavaScript Debugger -slug: Tools/Debugger -tags: - - Debugger - - Debugging - - Dev Tools - - JavaScript - - NeedsTranslation - - Tools - - TopicStub - - 'l10n:priority' -translation_of: Tools/Debugger ---- -<div>{{ToolsSidebar}}</div> - -<p>The JavaScript Debugger enables you to step through JavaScript code and examine or modify its state to help track down bugs.</p> - -<p>{{EmbedYouTube("QK4hKWmJVLo")}}</p> - -<p>You can use it to debug code running locally in Firefox or running remotely, for example on an Android device running Firefox for Android. See <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>to learn how to connect the debugger to a remote target.</p> - -<p>To find your way around the debugger, here's a <a href="/en-US/docs/Tools/Debugger/UI_Tour">quick tour of the UI</a>.</p> - -<h2 id="How_to">How to</h2> - -<p>To find out what you can do with the debugger, see the following how-to guides:</p> - -<div class="twocolumns"> -<ul> - <li><a href="/en-US/docs/Tools/Debugger/How_to/Open_the_debugger">Open the debugger</a></li> - <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint">Set a breakpoint</a></li> - <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">Set a conditional breakpoint</a></li> - <li><a href="/en-US/docs/Tools/Debugger/Set_an_XHR_breakpoint">Set an XHR breakpoint</a></li> - <li><a href="/en-US/docs/Tools/Debugger/Set_a_logpoint">Set a logpoint</a></li> - <li><a href="/en-US/docs/Tools/Debugger/Set_event_listener_breakpoints">Set event listener breakpoints</a></li> - <li><a href="/en-US/docs/Tools/Debugger/How_to/Disable_breakpoints">Disable breakpoints</a></li> - <li><a href="/en-US/docs/Tools/Debugger/How_to/Step_through_code">Step through code</a></li> - <li><a href="/en-US/docs/Tools/Debugger/How_to/Breaking_on_exceptions">Break on exceptions</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Set_Watch_Expressions">Set watch expressions</a></li> - <li><a href="/en-US/docs/Tools/Debugger/Debug_worker_threads">Debug worker threads</a></li> - <li><a href="/en-US/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">Pretty-print a minified file</a></li> - <li><a href="/en-US/docs/Tools/Debugger/How_to/Search">Search</a></li> - <li><a href="/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources">Debug eval sources</a></li> - <li><a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">Use a source map</a></li> - <li><a href="/en-US/docs/Tools/Debugger/How_to/Use_watchpoints">Use watchpoints</a></li> - <li><a href="/en-US/docs/Tools/Debugger/Break_on_DOM_mutation">Break on DOM Mutation</a></li> -</ul> -</div> - -<hr> -<h2 id="Reference">Reference</h2> - -<div class="twocolumns"> -<ul> - <li><a href="/en-US/docs/Tools/Debugger/Keyboard_shortcuts">Keyboard shortcuts</a></li> - <li><a href="/en-US/docs/Tools/Debugger/Source_map_errors">Source map errors</a></li> -</ul> -</div> diff --git a/files/fa/tools/index.html b/files/fa/tools/index.html deleted file mode 100644 index 72f8581e5b..0000000000 --- a/files/fa/tools/index.html +++ /dev/null @@ -1,218 +0,0 @@ ---- -title: ابزارهای توسعه فایرفاکس -slug: Tools -tags: - - Developing Mozilla - - Guide - - NeedsTranslation - - Tools - - TopicStub - - Web Development - - 'Web Development:Tools' - - 'l10n:priority' -translation_of: Tools ---- -<div>{{ToolsSidebar}}</div> - -<p class="summary">Examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile.</p> - -<p>If you are looking for information on using the web developer tools available in Firefox, you've come to the right place — this page provides links to detailed information on all of the core tools and additional tools, and further information such as how to connect to and debug Firefox for Android, how to extend the devtools, and how to debug the browser as a whole.</p> - -<p>Please explore the links found in the sidebar, and further down the page. If you have any feedback or questions about the devtools, send us messages on our mailing list or IRC channel (see the <a href="/en-US/docs/Tools#Join_the_Developer_tools_community">community links near the bottom of the page</a>). If you have any feedback or questions specifically about the documentation, the <a href="https://discourse.mozilla.org/c/mdn">MDN discourse</a> is a good place to post.</p> - -<div class="note"> -<p><strong>Note</strong>: If you are just getting started with web development and using developer tools, our <a href="/en-US/docs/Learn">learning web development</a> docs will help you — see <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a> and <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a> for good starting points.</p> -</div> - -<h2 id="The_Core_Tools">The Core Tools</h2> - -<p>You can open the Firefox Developer Tools from the menu by selecting <em>Tools</em> > <em>Web Developer</em> > <em>Toggle Tools</em> or use the keyboard shortcut <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd> on Windows and Linux, or <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> on macOS.</p> - -<p>The ellipsis menu on the right-hand side of Developer Tools, contains several commands that let you perform actions or change tool settings.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16087/DevTools_LayoutMenu.png" style="display: block; height: 290px; margin: 0 auto; width: 225px;"></p> - -<table class="standard-table" style="height: 178px; width: 840px;"> - <tbody> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/16092/iframe_button.png" style="height: 69px; width: 69px;"></td> - <td>This button only appears when there are multiple iframes on a page. Click it to display a list of the iframes on the current page and select the one with which you want to work.</td> - </tr> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="height: 69px; width: 69px;"></td> - <td>Click this button to take a screenshot of the current page. (<strong>Note:</strong> This feature is not turned on by default and must be enabled in settings before the icon will appear.)</td> - </tr> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="height: 69px; width: 69px;"></td> - <td>Toggles Responsive Design Mode.</td> - </tr> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="height: 69px; width: 69px;"></td> - <td>Opens the menu that includes docking options, the ability to show or hide the split console, and Developer Tools settings. The menu also includes links to the documentation for Firefox Web Tools and the Mozilla Community.</td> - </tr> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="height: 69px; width: 69px;"></td> - <td>Closes the Developer Tools</td> - </tr> - </tbody> -</table> - -<div class="column-container"> -<div class="column-half"> -<h3 id="Page_Inspector">Page Inspector</h3> - -<p><a href="/en-US/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/16371/landingPage_PageInspector.png" style="border: 1px solid black; display: block; height: 171px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> - -<p>View and edit page content and layout. Visualise many aspects of the page including the box model, animations, and grid layouts.</p> -</div> - -<div class="column-half"> -<h3 id="Web_Console">Web Console</h3> - -<p><a href="/en-US/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/16368/landingPage_Console.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> - -<p>See messages logged by a web page and interact with the page using JavaScript.</p> -</div> -</div> - -<div class="column-container"> -<div class="column-half"> -<h3 id="JavaScript_Debugger">JavaScript Debugger</h3> - -<p><a href="/en-US/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/16369/landingPage_Debugger.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> - -<p>Stop, step through, examine, and modify the JavaScript running in a page.</p> -</div> - -<div class="column-half"> -<h3 id="Network_Monitor">Network Monitor</h3> - -<p><a href="/en-US/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16370/landingPage_Network.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> - -<p>See the network requests made when a page is loaded.</p> -</div> -</div> - -<div class="column-container"> -<div class="column-half"> -<h3 id="Performance_Tools">Performance Tools</h3> - -<p><a href="/en-US/docs/Tools/Performance"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16372/landingPage_Performance.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> - -<p>Analyze your site's general responsiveness, JavaScript, and layout performance.</p> -</div> - -<div class="column-half"> -<h3 id="Responsive_Design_Mode">Responsive Design Mode</h3> - -<p><a href="/en-US/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/16373/landingPage_ResponsiveDesign.png" style="border-style: solid; border-width: 1px; display: block; height: 865px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> - -<p>See how your website or app will look and behave on different devices and network types.</p> -</div> -</div> - -<div class="column-container"> -<div class="column-half"> -<h3 id="Accessibility_inspector">Accessibility inspector</h3> - -<p><a href="/en-US/docs/Tools/Accessibility_inspector"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16367/landingPage_Accessibility.png" style="border-style: solid; border-width: 1px; border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> - -<p>Provides a means to access the page's accessibility tree, allowing you to check what's missing or otherwise needs attention.</p> -</div> - -<div class="column-half"></div> -</div> - -<div class="note"> -<p><strong>Note</strong>: The collective term for the UI inside which the DevTools all live is the <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a>.</p> -</div> - -<h2 id="More_Tools">More Tools</h2> - -<p>These developer tools are also built into Firefox. Unlike the "Core Tools" above, you might not use them every day.</p> - -<div class="twocolumns"> -<dl> - <dt><a href="/en-US/docs/Tools/Memory">Memory</a></dt> - <dd>Figure out which objects are keeping memory in use.</dd> - <dt><a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a></dt> - <dd>Inspect cookies, local storage, indexedDB, and session storage present in a page.</dd> - <dt><a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></dt> - <dd>Inspect the page's DOM properties, functions, etc.</dd> - <dt><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt> - <dd>Select a color from the page.</dd> - <dt><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></dt> - <dd>A text editor built into Firefox that lets you write and execute JavaScript.</dd> - <dt><a href="/en-US/docs/Tools/Style_Editor">Style Editor</a></dt> - <dd>View and edit CSS styles for the current page.</dd> - <dt><a href="/en-US/docs/Tools/Screenshot_tool">Taking screenshots</a></dt> - <dd>Take a screenshot of the entire page or of a single element.</dd> - <dt><a href="/en-US/docs/Tools/Measure_a_portion_of_the_page">Measure a portion of the page</a></dt> - <dd>Measure a specific area of a web page.</dd> - <dt><a href="/en-US/docs/Tools/Rulers">Rulers</a></dt> - <dd>Overlay horizontal and vertical rulers on a web page</dd> -</dl> -</div> - -<div class="column-container"> -<div class="column-third"> -<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p> - -<p style="text-align: center;">For the latest developer tools and features, try Firefox Developer Edition.</p> - -<p><a href="https://www.mozilla.org/en-US/firefox/developer/" style="width: 300px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Download Firefox Developer Edition</a></p> -</div> - -<div class="column-third"></div> -</div> - -<h2 id="Connecting_the_Developer_Tools">Connecting the Developer Tools</h2> - -<p>If you open the developer tools using <a href="/en-US/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">keyboard shortcuts</a> or the equivalent menu items, they'll target the document hosted by the currently active tab. But you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different devices.</p> - -<div class="twocolumns"> -<dl> - <dt><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></dt> - <dd>Debug add-ons, content tabs, and workers running in the browser.</dd> - <dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Connecting to Firefox for Android</a></dt> - <dd>Connect the developer tools to an instance of Firefox running on an Android device.</dd> - <dt><a href="/en-US/docs/Tools/Working_with_iframes">Connecting to iframes</a></dt> - <dd>Connect the developer tools to a specific iframe in the current page.</dd> - <dt><a href="/en-US/docs/Tools/Valence">Connecting to other browsers</a></dt> - <dd>Connect the developer tools to Chrome on Android and Safari on iOS.</dd> -</dl> -</div> - -<h2 id="Debugging_the_browser">Debugging the browser</h2> - -<p>By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.</p> - -<div class="twocolumns"> -<dl> - <dt><a href="/en-US/docs/Tools/Browser_Console">Browser Console</a></dt> - <dd>See messages logged by the browser itself and by add-ons, and run JavaScript code in the browser's scope.</dd> - <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt> - <dd>Attach the Developer Tools to the browser itself.</dd> -</dl> -</div> - -<h2 id="Extending_the_devtools">Extending the devtools</h2> - -<p>For information on extending the Firefox DevTools, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a> over in the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">Browser Extensions</a> section of MDN.</p> - -<h2 id="Migrating_from_Firebug">Migrating from Firebug</h2> - -<p>Firebug has come to the end of its lifespan (see <a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug lives on in Firefox DevTools</a> for details of why), and we appreciate that some people will find migrating to another less familiar set of DevTools to be challenging. To ease a transition from Firebug to the Firefox developer tools, we have written a handy guide — <a href="/en-US/docs/Tools/Migrating_from_Firebug">Migrating from Firebug</a>.</p> - -<h2 id="Contribute">Contribute</h2> - -<p>If you want to help improve the developer tools, these resources will get you started.</p> - -<div class="twocolumns"> -<dl> - <dt><a href="https://docs.firefox-dev.tools/">Get Involved</a></dt> - <dd>Our developer documentation explains how to get involved.</dd> - <dt><a href="http://bugs.firefox-dev.tools/">bugs.firefox-dev.tools</a></dt> - <dd>A tool helping to find bugs to work on.</dd> -</dl> -</div> diff --git a/files/fa/tools/network_monitor/index.html b/files/fa/tools/network_monitor/index.html deleted file mode 100644 index 8ab3d7c569..0000000000 --- a/files/fa/tools/network_monitor/index.html +++ /dev/null @@ -1,571 +0,0 @@ ---- -title: Network Monitor -slug: Tools/Network_Monitor -translation_of: Tools/Network_Monitor ---- -<p>مانیتور شبکه همه درخواست های شبکه فایرفاکس را نشان می دهد (به عنوان مثال، هنگامی که یک صفحه را بارگذاری می کند یا به دلیل XMLHttpRequests)، چه مدت هر درخواست طول می کشد و جزئیات هر درخواست.</p> - -<h2 id="باز_کردن_مانیتور_شبکه">باز کردن مانیتور شبکه</h2> - -<p>چند راه مختلف برای باز کردن مانیتور شبکه وجود دارد:</p> - -<div class="geckoVersionNote"> -<p>میانبر صفحه کلید در فایرفاکس 55 تغییر کرده است</p> -</div> - -<ul> - <li>فشاردهید <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd> ( <kbd>Command</kbd> + <kbd>Option</kbd> + <kbd>E</kbd> در سیستم عامل مک).</li> - <li>"شبکه" را از منوی Web Developer انتخاب کنید (که منوی زیر در منوی Tools در OS X و لینوکس است).</li> - <li>روی نماد آچار کلیک کنید (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">), که در نوار ابزار اصلی یا زیرمنو روبرواست (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">),سپس انتخاب "شبکه".</li> -</ul> - -<p>مانیتور شبکه در پایین پنجره مرورگر ظاهر می شود. برای دیدن درخواست ها، صفحه را بارگیری کنید:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13535/1-new-overview-small.png" style="display: block; height: 831px; margin: 0px auto; width: 1100px;"></p> - -<p>مانیتور شبکه هر زمان که جعبه ابزار باز است، حتی اگر شبکه مانیتور خود انتخاب نشده باشد، درخواست های شبکه را ثبت می کند. این بدان معنی است که شما می توانید یک صفحه را در اشکال زدایی، به عنوان مثال، کنسول وب، شروع کنید، سپس به Network Monitor بروید تا فعالیت شبکه را بدون نیاز به بارگذاری مجدد صفحه ببینید.</p> - -<h2 id="نمای_کلی_UI">نمای کلی UI</h2> - -<p>UI به چهار قسمت اصلی تقسیم می شود:</p> - -<ul> - <li>صفحه اصلی حاوی نوار ابزار، لیست درخواست شبکه و پنجره جزئیات اطلاعات درخواست شبکه است:</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13266/nm-pieces.png" style="display: block; height: 850px; margin-left: auto; margin-right: auto; width: 962px;"></p> - -<ul> - <li>نمایش تجزیه و تحلیل عملکرد یک صفحه جداگانه است:</li> -</ul> - -<p><img alt="Performance analysis view" src="https://mdn.mozillademos.org/files/14673/Performance%20analysis.png" style="display: block; height: 541px; margin-left: auto; margin-right: auto; width: 665px;"></p> - -<h2 id="نوار_ابزار">نوار ابزار</h2> - -<p>از فایرفاکس 47 به بعد، نوار ابزار در بالای پنجره اصلی قرار دارد. در نسخه های قبلی فایرفاکس، در پایین آن است.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13138/nm-toolbar.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 1910px;">It provides:</p> - -<ul> - <li>an icon to clear the <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Network_request_list">network request list</a></li> - <li>an array of icons to filter the network request list by type: - <ul> - <li>by the content type of the response</li> - <li>XHR requests</li> - <li>(new in Firefox 48) WebSocket upgrades (labeled WS)</li> - </ul> - </li> - <li>an icon to launch <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Performance_analysis">performance analysis</a></li> - <li>a summary of this page, including the number of requests, total size, and total time</li> - <li>a box enabling you to <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Filtering_by_URL">filter requests by URL</a> and <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Filtering_by_properties">by properties</a></li> - <li>an icon to show/hide the <a href="/en-US/docs/Tools/Network_Monitor#Network_request_details">network request details pane</a>.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: From Firefox 58 onwards, the "Flash" filter button is no longer available, and Flash requests are included in the "Others" filter ({{bug(1413540)}}).</p> -</div> - -<h2 id="Network_request_list">Network request list</h2> - -<p>By default, the Network Monitor shows a list of all the network requests made in the course of loading the page. Each request is displayed in its own row:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13537/5-new-request-list-new.png" style="display: block; height: 257px; margin: 0px auto; width: 900px;">By default, the Network Monitor is cleared each time you navigate to a new page or reload the current page. You can override this behavior by checking "Enable persistent logs" in the <a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Common_preferences">Settings</a>.</p> - -<h3 id="Network_request_columns">Network request columns</h3> - -<p>From Firefox 55 onwards, you can toggle different columns by right-clicking on the table header and choosing the specific column from the context menu. A "Reset Columns" option is also available to reset the columns to their initial configuration. Here is a list of all available columns:</p> - -<ul> - <li><strong>Status</strong>: The HTTP status code returned. This is displayed as a color-coded icon: - - <ul> - <li><img alt="" src="https://mdn.mozillademos.org/files/13136/1x.png" style="height: 17px; width: 17px;">blue circle for informational (1XX codes). Notably, this includes 101 (switching protocols) for <a href="/en-US/docs/Web/API/WebSocket">WebSocket</a> upgrades.</li> - <li><img alt="" src="https://mdn.mozillademos.org/files/10941/200.png" style="height: 17px; width: 17px;"> green circle for success (2XX codes)</li> - <li><img alt="" src="https://mdn.mozillademos.org/files/10945/300.png" style="height: 17px; width: 17px;"> orange triangle for redirection (3XX)</li> - <li><img alt="" src="https://mdn.mozillademos.org/files/10943/4-500.png" style="height: 17px; width: 17px;"> red square for errors (4XX and 5XX)</li> - <li><img alt="" src="https://mdn.mozillademos.org/files/10947/cached.png" style="height: 17px; width: 17px;"> hollow grey circle for responses that were fetched from the browser cache.</li> - </ul> - The exact code is displayed immediately after the icon.</li> - <li><strong>Method</strong>: the HTTP request method used.</li> - <li><strong>File</strong>: basename of the file requested.</li> - <li><strong>Protocol:</strong> The network protocol used to transfer the data. This column is hidden by default. This is new in Firefox 55.</li> - <li><strong>Scheme:</strong> The scheme (https/http/ftp/...) of the path requested. This column is hidden by default. This is new in Firefox 55.</li> - <li><strong>Domain</strong>: domain of the path requested. - <ul> - <li>If the request used SSL/TLS and the connection had security weaknesses such as weak ciphers, you'll see a warning triangle next to the domain. You will be able to see more details about the problem in the <a href="/en-US/docs/Tools/Network_Monitor#Security">Security tab</a>.</li> - <li>Hover over the domain to see the IP address.</li> - <li>There's an icon next to the domain that gives you extra information about the security status of that request. See <a href="/en-US/docs/Tools/Network_Monitor#Security_icons">Security icons</a>.</li> - </ul> - </li> - <li><strong>Remote IP</strong>: The IP address of the server answering the request. This column is hidden by default. This is new in Firefox 55.</li> - <li><strong>Cause</strong>: The reason that the network request occurred, for example XHR request, {{htmlelement("img")}}, script, script requesting an image, etc. This is new in Firefox 49.</li> - <li><strong>Type</strong>: <code>Content-type</code> of the response.</li> - <li><strong>Cookies:</strong> The number of request cookies associated to the request. This column is hidden by default. This is new in Firefox 55.</li> - <li><strong>Set-Cookies:</strong> The number of response cookies associated to the request. This column is hidden by default. This is new in Firefox 55.</li> - <li><strong>Transferred</strong>: the number of bytes that were actually transferred to load the resource. This will be less than <strong>Size</strong> if the resource was compressed. From Firefox 47, if the resource was fetched from a <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a> cache, then this cell displays "service worker".</li> - <li><strong>Size</strong>: the size of the transferred resource.</li> -</ul> - -<p>The toolbar at the top labels these columns, and clicking the label sorts all the requests by that column.</p> - -<h4 id="Image_thumbnails">Image thumbnails</h4> - -<p>If the file is an image, the row includes a thumbnail of the image, and hovering over the filename shows a preview in a tooltip:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13539/6-new-thumb-small.png" style="display: block; height: 241px; margin: 0px auto; width: 900px;"></p> - -<h4 id="Security_icons">Security icons</h4> - -<p>The Network Monitor displays an icon in the Domain column:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13541/7-new-security-icons-new.png" style="display: block; height: 217px; margin: 0px auto; width: 900px;"></p> - -<p>This gives you extra information about the security status of the request:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Icon</th> - <th scope="col">Meaning</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/11655/https.svg" style="height: 16px; width: 16px;"></td> - <td>HTTPS</td> - </tr> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/11653/https-weak.svg" style="height: 16px; width: 16px;"></td> - <td>Weak HTTPS (for example, a weak cipher was used)</td> - </tr> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/11649/https-failed.svg" style="height: 16px; width: 16px;"></td> - <td>Failed HTTPS (for example, a certificate was invalid)</td> - </tr> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/11651/http.svg" style="height: 16px; width: 16px;"></td> - <td>HTTP</td> - </tr> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/11657/localhost.svg" style="height: 16px; width: 16px;"></td> - <td>Localhost</td> - </tr> - </tbody> -</table> - -<p>For weak and failed HTTPS requests, you'll see more details of the problem in the <a href="/en-US/docs/Tools/Network_Monitor#Security">Security tab</a>.</p> - -<h4 id="Cause_column">Cause column</h4> - -<p>The Cause column indicates what the cause of the request was. This is usually fairly obvious, and you can generally see the correlation between this and the Type column entry. The most common values are:</p> - -<ul> - <li>document: The source HTML document.</li> - <li>img: {{htmlelement("img")}} element.</li> - <li>imageset: {{htmlelement("img")}} element.</li> - <li>script: A JavaScript file.</li> - <li>stylesheet: A CSS file.</li> -</ul> - -<div> -<p>When a request was triggered by JavaScript, a small JS icon is shown to the left of the entry in the Cause column. Hovering over this displays a popup containing the stack trace for the request, to provide more clues as to why a request happened.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13575/stack-trace-new-small.png" style="display: block; margin: 0 auto;"></p> - -<p>You can then click on any of the entries in the popup to open up the relevant script in the <a href="/en-US/docs/Tools/Debugger">Debugger</a> pane.</p> -</div> - -<h3 id="Timeline">Timeline</h3> - -<p>The request list also displays a timeline for the different parts of each request.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13543/8-new-timeline-small.png" style="display: block; height: 239px; margin: 0px auto; width: 900px;"></p> - -<p>Each timeline is given a horizontal position in its row relative to the other network requests, so you can see the total time taken to load the page. For more details on the color-coding used here, see the section on the <a href="/en-US/docs/Tools/Network_Monitor#Timings">Timings</a> page.</p> - -<p>Starting in Firefox 45, the timeline also contains two vertical lines:</p> - -<ul> - <li>the <span style="color: blue;">blue</span> line marks the point at which the page's <code><a href="/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></code> event is triggered</li> - <li>the <span style="color: red;">red</span> line marks the point at which the page's <code><a href="/en-US/docs/Web/Events/load">load</a></code> event is triggered</li> -</ul> - -<h3 id="Filtering_requests">Filtering requests</h3> - -<p>You can filter requests by content type, by whether they are XMLHttpRequests or WebSocket requests, by URL, or by request properties.</p> - -<h4 id="Filtering_by_content_type">Filtering by content type</h4> - -<p>To filter by content type, use the buttons in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>.</p> - -<h4 id="Filtering_XHR">Filtering XHR</h4> - -<p>To see only {{Glossary("XHR (XMLHttpRequest)", "XHR")}} requests, use the "XHR" button in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>.</p> - -<h4 id="Filtering_WebSockets">Filtering WebSockets</h4> - -<div class="geckoVersionNote"> -<p>New in Firefox 48</p> -</div> - -<p>To see only WebSocket connections, use the "WS" button in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>.</p> - -<p>To monitor the data exchanged in WebSocket connections, try the <a href="https://addons.mozilla.org/en-US/firefox/addon/websocket-monitor/">WebSocket Monitor add-on</a>.</p> - -<h4 id="Filtering_by_URL">Filtering by URL</h4> - -<p>To filter by URL, use the search box in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>. Click in the search box, or press <kbd>Ctrl</kbd> + <kbd>F</kbd> (or <kbd>Cmd</kbd> + <kbd>F</kbd> on a Mac), and start typing. The list of network requests will be filtered to include only requests that contain your filter string, in either the Domain or the File portions.</p> - -<p>From Firefox 45, you can filter requests that <em>don't</em> contain your filter string by prefixing your query with the "-" operator. For example, the query "-google.com" will show all requests that don't have "google.com" in their URL.</p> - -<h4 id="Filtering_by_properties">Filtering by properties</h4> - -<div class="geckoVersionNote"> -<p>New in Firefox 55</p> -</div> - -<p>To filter by specific request properties, use the search box in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>. The search box recognizes specific keywords, which can be used to filter the requests by specific request properties. Those keywords are followed by a colon and a related filter value. The filter values are matched case insensitive. Prepending a minus (<code>-</code>) negates the filter. You can combine different filters together by seperating them with a space.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Keyword</th> - <th scope="col">Meaning</th> - <th scope="col">Examples</th> - </tr> - <tr> - <td><code>status-code</code></td> - <td>Shows resources that have the specific HTTP status code.</td> - <td><code>status-code:304</code></td> - </tr> - <tr> - <td><code>method</code></td> - <td>Shows resources that have were requested via the specific HTTP request method.</td> - <td><code>method:post</code></td> - </tr> - <tr> - <td><code>domain</code></td> - <td>Shows resources coming from a specifc domain.</td> - <td><code>domain:mozilla.org</code></td> - </tr> - <tr> - <td><code>remote-ip</code></td> - <td>Shows resources coming from a server with the specified IP.</td> - <td><code>remote-ip:63.245.215.53</code><br> - <code>remote-ip:[2400:cb00:2048:1::6810:2802]</code></td> - </tr> - <tr> - <td><code>cause</code></td> - <td>Shows resources matching a specific cause type. The types can be found in the description of the <a href="#Cause_column">cause column</a>.</td> - <td><code>cause:js</code><br> - <code>cause:stylesheet<br> - cause:img</code></td> - </tr> - <tr> - <td><code>transferred</code></td> - <td>Shows resources having a specific transferred size or a transferred size close to the one specified. <code>k</code> can be used as suffix for kilobytes and <code>m</code> for megabytes, e.g. the value <code>1k</code> is equivalent to <code>1024</code>.</td> - <td><code>transferred:1k</code></td> - </tr> - <tr> - <td><code>size</code></td> - <td>Shows resources having a specific size (after decompression) or a size close to the one specified. <code>k</code> can be used as suffix for kilobytes and <code>m</code> for megabytes, e.g. the value <code>1k</code> is equivalent to <code>1024</code>.</td> - <td><code>size:2m</code></td> - </tr> - <tr> - <td><code>larger-than</code></td> - <td>Shows resources that are larger than the specified size in bytes. <code>k</code> can be used as suffix for kilobytes and <code>m</code> for megabytes, e.g. the value <code>1k</code> is equivalent to <code>1024</code>.</td> - <td><code>larger-than:2000</code><br> - <code>-larger-than:4k</code></td> - </tr> - <tr> - <td><code>mime-type</code></td> - <td>Shows resources that match the specified MIME type.</td> - <td><code>mime-type:text/html</code><br> - <code>mime-type:image/png</code><br> - <code>mime-type:application/javascript</code></td> - </tr> - <tr> - <td><code>is</code></td> - <td><code>is:cached</code> and <code>is:from-cache</code> shows only resources coming from cache.<br> - <code>is:running</code> shows only resources, which are currently being transferred.</td> - <td><code>is:cached</code><br> - <code>-is:running</code></td> - </tr> - <tr> - <td><code>scheme</code></td> - <td>Shows resources transferred via the given scheme.</td> - <td><code>scheme:http</code></td> - </tr> - <tr> - <td><code>has-response-header</code></td> - <td>Shows resources that contain the specified HTTP response header.</td> - <td><code>has-response-header:cache-control</code><br> - <code>has-response-header:X-Firefox-Spdy</code></td> - </tr> - <tr> - <td><code>set-cookie-domain</code></td> - <td>Show the resources that have a <code>Set-Cookie</code> header with a <code>Domain</code> attribute that matches the specified value.</td> - <td><code>set-cookie-domain:.mozilla.org</code></td> - </tr> - <tr> - <td><code>set-cookie-name</code></td> - <td>Show the resources that have a <code>Set-Cookie</code> header with a name that matches the specified value.</td> - <td><code>set-cookie-name:_ga</code></td> - </tr> - <tr> - <td><code>set-cookie-value</code></td> - <td>Show the resources that have a <code>Set-Cookie</code> header with a value that matches the specified value.</td> - <td><code>set-cookie-value:true</code></td> - </tr> - <tr> - <td><code>regexp</code></td> - <td>Show the resources having a URL that matches the given {{Glossary("regular expression")}}.</td> - <td><code>regexp:\d{5}<br> - regexp:mdn|mozilla</code></td> - </tr> - </thead> -</table> - -<h3 id="Context_menu">Context menu</h3> - -<p>Context-clicking on a row in the list displays a context menu with the following options:</p> - -<ul> - <li>Copy URL</li> - <li>Copy URL Parameters (new in Firefox 40)</li> - <li>Copy POST Data (new in Firefox 40, only for POST requests)</li> - <li>Copy as cURL</li> - <li>Copy Request Headers (new in Firefox 40)</li> - <li>Copy Response Headers (new in Firefox 40)</li> - <li>Copy Response (new in Firefox 40)</li> - <li>Copy Image as Data URI (only for images)</li> - <li>Copy All As HAR (new in Firefox 41)</li> - <li>Save All As HAR (new in Firefox 41)</li> - <li>Save Image As (new in Firefox 55, only for images)</li> - <li>Edit and Resend</li> - <li>Open in New Tab</li> - <li>Start <a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Performance Analysis</a> for the page</li> -</ul> - -<h4 id="Edit_and_Resend">Edit and Resend</h4> - -<p>This option opens an editor enabling you to edit the request's method, URL, parameters, and headers, and resend the request.</p> - -<h4 id="Copy_as_cURL">Copy as cURL</h4> - -<p>This option copies the network request to the clipboard as a <a href="http://curl.haxx.se/">cURL</a> command, so you can execute it from a command line. The command may include the following options:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td><code>-X [METHOD]</code></td> - <td>If the method is not GET or POST</td> - </tr> - <tr> - <td><code>--data</code></td> - <td>For URL encoded request parameters</td> - </tr> - <tr> - <td><code>--data-binary</code></td> - <td>For multipart request parameters</td> - </tr> - <tr> - <td><code>--http/VERSION</code></td> - <td>If the HTTP version is not 1.1</td> - </tr> - <tr> - <td><code>-I</code></td> - <td>If the method is HEAD</td> - </tr> - <tr> - <td><code>-H</code></td> - <td> - <p>One for each request header.</p> - - <p>From Firefox 34, if the "Accept-Encoding" header is present, the cURL command will include <code>--compressed</code> instead of <code>-H "Accept-Encoding: gzip, deflate"</code>. This means that the response will be automatically decompressed.</p> - </td> - </tr> - </tbody> -</table> - -<h4 id="CopySave_All_As_HAR">Copy/Save All As HAR</h4> - -<div class="geckoVersionNote"> -<p>New in Firefox 41.</p> -</div> - -<p>These options create an <a href="https://w3c.github.io/web-performance/specs/HAR/Overview.html">HTTP Archive</a> (HAR) for all requests listed. The HAR format enables you to export detailed information about network requests. 'Copy All As HAR' copies the data to the clipboard, 'Save All As HAR' opens a dialog allowing you to save the archive to disk.</p> - -<h2 id="Network_request_details">Network request details</h2> - -<p>Clicking on a row displays a new pane in the right-hand side of the network monitor, which provides more detailed information about the request.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13274/nm-headers-annotated.png" style="display: block; height: 436px; margin-left: auto; margin-right: auto; width: 935px;"></p> - -<p>The tabs at the top of this pane enable you to switch between the following pages:</p> - -<ul> - <li><strong>Headers</strong></li> - <li><strong>Cookies</strong></li> - <li><strong>Params</strong></li> - <li><strong>Response</strong></li> - <li><strong>Timings</strong></li> - <li><strong>Security </strong>(only for secure pages)</li> - <li><strong>Preview</strong> (only if the content type is HTML) (Removed in Firefox 55)</li> -</ul> - -<p>Clicking the icon at the right-hand end of the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a> closes the details pane and returns you to the list view.</p> - -<h3 id="Headers">Headers</h3> - -<p>This tab lists basic information about the request:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/15013/headers-updated-2.png" style="display: block; height: 439px; margin-left: auto; margin-right: auto; width: 894px;"></p> - -<p>This includes:</p> - -<ul> - <li>request URL</li> - <li>request method</li> - <li>remote IP address and port <em>(new in Firefox 39)</em></li> - <li>status code with link to MDN doc (if available)</li> - <li>the HTTP request and response headers that were sent</li> - <li>a button to <a href="/en-US/docs/Tools/Network_Monitor#Edit_and_Resend">edit and resend</a> the request</li> -</ul> - -<p>You can filter the headers that are displayed:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13244/nm-headers-filtered.png" style="display: block; height: 516px; margin-left: auto; margin-right: auto; width: 894px;"></p> - -<div class="geckoVersionNote"> -<p>New in Firefox 54</p> -</div> - -<p>Besides each header is a <em>[Learn More]</em> link referring to the <a href="/en-US/docs/Web/HTTP/Headers">documentation of the HTTP headers</a>.</p> - -<h3 id="Cookies">Cookies</h3> - -<p>This tab lists full details of any cookies sent with the request or response:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13240/nm-cookies.png" style="display: block; height: 464px; margin-left: auto; margin-right: auto; width: 894px;"></p> - -<p>As with headers, you can filter the list of cookies displayed.</p> - -<h3 id="Params">Params</h3> - -<p>This tab displays the GET parameters and POST data of a request:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13254/nm-params.png" style="display: block; height: 462px; margin-left: auto; margin-right: auto; width: 894px;"></p> - -<h3 id="Response">Response</h3> - -<p>The complete content of the response. If the response is HTML, JS, or CSS, it will be shown as text:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13258/nm-response.png" style="display: block; height: 462px; margin-left: auto; margin-right: auto; width: 894px;"></p> - -<p>If the response is JSON, it will be shown as an inspectable object.</p> - -<p>If the response is an image, the tab displays a preview:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13260/nm-response-image.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 894px;"></p> - -<h3 id="Timings">Timings</h3> - -<p>The Timings tab breaks a network request down into the following subset of the stages defined in the <a href="https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/HAR/Overview.html">HTTP Archive</a> specification:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>Blocked</td> - <td> - <p>Time spent in a queue waiting for a network connection.</p> - - <p>The browser imposes a limit on the number of simultaneous connections that can be made to a single server. In Firefox this defaults to 6, but can be changed using the <code><a href="http://kb.mozillazine.org/Network.http.max-persistent-connections-per-server">network.http.max-persistent-connections-per-server</a></code> preference. If all connections are in use, the browser can't download more resources until a connection is released.</p> - </td> - </tr> - <tr> - <td>DNS resolution</td> - <td>Time taken to resolve a host name.</td> - </tr> - <tr> - <td>Connecting</td> - <td>Time taken to create a TCP connection.</td> - </tr> - <tr> - <td>Sending</td> - <td>Time taken to send the HTTP request to the server.</td> - </tr> - <tr> - <td>Waiting</td> - <td>Waiting for a response from the server.</td> - </tr> - <tr> - <td>Receiving</td> - <td>Time taken to read the entire response from the server (or cache).</td> - </tr> - </tbody> -</table> - -<p>It presents a more detailed, annotated, view of the timeline bar for that request showing how the total wait time is split into the various stages:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13264/nm-timings.png" style="display: block; height: 466px; margin-left: auto; margin-right: auto; width: 894px;"></p> - -<h3 id="Security">Security</h3> - -<p>If the site is being served over HTTPS, you get an extra tab labeled "Security". This contains details about the secure connection used including the protocol, the cipher suite, and certificate details:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13262/nm-security.png" style="display: block; height: 231px; margin-left: auto; margin-right: auto; width: 894px;"></p> - -<p>The Security tab shows a warning for security weaknesses. Currently it warns you about two weaknesses:</p> - -<ol> - <li>Using SSLv3 instead of TLS</li> - <li>Using the RC4 cipher</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/10165/security-warning.png" style="display: block; height: 93px; margin-left: auto; margin-right: auto; width: 591px;"></p> - -<h3 id="Preview">Preview</h3> - -<p>Removed in Firefox 55.</p> - -<p>If the file type is HTML another tab appears labeled "Preview". This renders just that HTML:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13256/nm-preview.png" style="display: block; height: 474px; margin-left: auto; margin-right: auto; width: 894px;"></p> - -<h2 id="Pausing_and_resume_network_traffic_recording">Pausing and resume network traffic recording</h2> - -<p>In Firefox 58+, the Network Monitor has a button that pauses and resumes recording of the current page's network traffic. This is useful in situations where, for example, you are trying to get a stable view of a page for debugging purposes, but under normal circumstances the view keeps evolving due to persistent network requests. The pause button allows you to look at a certain snapshot.</p> - -<p>The button can be found at the far left of the main Network Monitor toolbar, and looks like a typical pause button — <img alt="" src="https://mdn.mozillademos.org/files/15625/pause-icon.png" style="height: 23px; width: 34px;">.</p> - -<p>you can see it here in context:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/15624/play-pause-network-traffic.png" style="border-style: solid; border-width: 1px; display: block; height: 305px; margin: 0px auto; width: 930px;"></p> - -<p>Once pressed, the button changes to a play icon, and you can toggle network traffic recording back on by pressing it again.</p> - -<h2 id="Performance_analysis">Performance analysis</h2> - -<p>The Network Monitor includes a performance analysis tool, to help show you how long the browser takes to download the different parts of your site.<br> - <br> - To run the performance analysis tool click the stopwatch icon in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>.</p> - -<p>(Alternatively, if you have only just opened the Network Monitor, so it's not yet populated with the list of requests, you'll get a stopwatch icon in the main window.)</p> - -<p>The Network Monitor then loads the site twice: once with an empty browser cache, and once with a primed browser cache. This simulates the first time a user visits your site, and subsequent visits. It displays the results for each run side by side, or vertically if the browser window is narrow:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/12864/nm-performance.png" style="display: block; height: 1028px; margin-left: auto; margin-right: auto; width: 691px;"></p> - -<p>The results for each run are summarised in a table and a pie chart. The tables group resources by type, and show the total size of each resource and the total time it took to load them. The accompanying pie chart shows the relative size of each resource type.</p> - -<p>To get back to the Network Monitor's list of network requests click the "Back" button on the left.</p> - -<p>Clicking on a slice of the pie takes you to the Network Monitor for that run, with a filter automatically applied to see <a href="/en-US/docs/Tools/Network_Monitor#Filtering_by_content_type">only that resource type</a>.</p> diff --git a/files/fa/tools/web_console/index.html b/files/fa/tools/web_console/index.html deleted file mode 100644 index 481b81950d..0000000000 --- a/files/fa/tools/web_console/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: کنسول وب -slug: Tools/Web_Console -translation_of: Tools/Web_Console ---- -<p dir="rtl">کنسول وب:</p> - -<ol dir="rtl"> - <li>گزارش های مرتبط با یک صفحه وب: درخواست های شبکه، جاوا اسکریپت، CSS، اخطار و خطاهای امنیتی، اخطار ها و پیام های صریح کد جاوا اسکریپت درون صفحه</li> - <li>شما را قادر می کند به تعامل با یک صفحه وب، با اجرای عبارات جاوا اسکریپت در محتوای صفحه</li> -</ol> - -<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p> - -<div class="column-container"> -<div class="column-half"> -<dl> - <dt><a href="/en-US/docs/Tools/Web_Console/Opening_the_Web_Console">باز کردن کنسول وب</a></dt> - <dd>چگونگی شروع استفاده از کنسول وب.</dd> - <dt><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">مترجم خط فرمان</a></dt> - <dd>چگونگی تعامل با یک سند بوسیله کنسول.</dd> - <dt><a href="/en-US/docs/Tools/Web_Console/Split_console">انشعاب کنسول</a></dt> - <dd>استفاده از کنسول در کنار ابزار دیگر.</dd> -</dl> -</div> - -<div class="column-half"> -<dl> - <dt><a href="/en-US/docs/Tools/Web_Console/Console_messages">پیام های کسنول</a></dt> - <dd>جزئیات پیام های کنسول وب.</dd> - <dt><a href="/en-US/docs/Tools/Web_Console/Rich_output">خروجی توانمند</a></dt> - <dd><span class="short_text" id="result_box" lang="fa"><span>مشاهده</span> <span>و تعامل با اشیاء</span> <span>وارد شده توسط</span> <span>کنسول.</span></span></dd> - <dt><a href="/en-US/docs/Tools/Web_Console/Keyboard_shortcuts">میانبر های صفحه کلید</a></dt> - <dd>مرجع میانبر..</dd> -</dl> -</div> -</div> |