initial commit

1 files changed, 63 insertions, 0 deletions

diff --git a/files/vi/tools/network_monitor/index.html b/files/vi/tools/network_monitor/index.html
new file mode 100644
index 0000000000..41c31b6461
--- /dev/null
+++ b/files/vi/tools/network_monitor/index.html
@@ -0,0 +1,63 @@
+---
+title: Network Monitor
+slug: Tools/Network_Monitor
+tags:
+  - Debugging
+  - Dev Tools
+  - Firefox
+  - Guide
+  - NeedsTranslation
+  - Networking
+  - Tools
+  - TopicStub
+  - 'l10n:priority'
+translation_of: Tools/Network_Monitor
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>The Network Monitor shows you all the network requests Firefox makes (for example, when it loads a page, or due to <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequests</a>), how long each request takes, and details of each request.</p>
+
+<h2 id="Opening_the_Network_Monitor">Opening the Network Monitor</h2>
+
+<p>There are a few different ways to open the Network Monitor:</p>
+
+<ul>
+ <li>Press  <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd> ( <kbd>Command</kbd> + <kbd>Option</kbd> + <kbd>E</kbd> on a Mac).</li>
+ <li>Select "Network" from the Web Developer menu, (which is a submenu of the Tools menu on OS X and Linux).</li>
+ <li>Click the wrench icon (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">), which is in the main toolbar or under the Hamburger menu (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">), then select "Network".</li>
+</ul>
+
+<p>The Network Monitor will appear at the bottom of the browser window. Reload the page to see the requests:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16245/network_monitor.png" style="border: 1px solid black; display: block; height: 541px; margin: 0px auto; width: 800px;" title=""></p>
+
+<p>The Network Monitor records network requests any time the Toolbox is open, even if the Network Monitor itself is not selected. This means you can start debugging a page in, for example, the Web Console, then switch to the Network Monitor to see network activity without having to reload the page.</p>
+
+<h2 id="UI_overview">UI overview</h2>
+
+<p>The UI is divided into four main pieces:</p>
+
+<ul>
+ <li>The main screen contains the <a href="/en-US/docs/Tools/Network_Monitor/Toolbar">toolbar</a>, the <a href="/en-US/docs/Tools/Network_Monitor/request_list">network request list</a>, and the <a href="/en-US/docs/Tools/Network_Monitor/request_details">network request details pane</a>:</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16246/Network_Monitor_Closeup.png" style="border: 1px solid black; display: block; height: 747px; margin: 0px auto; width: 800px;" title=""></p>
+
+<ul>
+ <li>The <a href="/en-US/docs/Tools/Network_Monitor/Performance_analysis">performance analysis</a> view is a separate screen:</li>
+</ul>
+
+<p><img alt="Performance analysis view" src="https://mdn.mozillademos.org/files/16276/network_performance.png" style="border: 1px solid black; display: block; height: 1176px; margin-left: auto; margin-right: auto; width: 1382px;" title=""></p>
+
+<h2 id="Working_with_the_network_monitor">Working with the network monitor</h2>
+
+<p>The following articles cover different aspects of using the network monitor:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Network_Monitor/Toolbar">Toolbar</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor/request_list">Network request list</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor/request_details">Network request details</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor/recording">Network traffic recording</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor/Performance_Analysis">Performance analysis</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor/Throttling">Throttling</a></li>
+</ul>