<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="color-scheme" content="light dark">
<if expr="is_android">
<meta name="viewport" content="width=device-width">
</if>
<script type="module" src="net_export.js"></script>
<link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
<link rel="stylesheet" href="net_export.css">
<link rel="icon" id="fav-icon">
<title>Network Log Export</title>
</head>
<body>
<div id="main-container">
<!--
=========================================================================
View for "unitialized" state.
* Only visible briefly, if at all
=========================================================================
-->
<div id="state-uninitialized">
<h2>Network Log Export</h2>
Loading...
</div>
<!--
=========================================================================
View for "initial" state.
* Has controls to start logging.
=========================================================================
-->
<div id="state-initial" hidden>
<h2>Capture Network Log</h2>
<button id="start-logging">Start Logging to Disk</button>
<div class="section-container">
Click the button to start logging future network activity to a file on
disk.
<if expr="not(is_ios)">
The log includes details of network activity from all of Chrome,
including incognito and non-incognito tabs, visited URLs, and
information about the network configuration.
</if>
<if expr="is_ios">
The log includes details of network activity handled by Chrome's
internal network stack. Note, this does not include network requests
for ordinary web content, which are instead handled by WKWebView.
</if>
<a href="https://dev.chromium.org/for-testers/providing-network-details"
target="_blank">
See the Chromium website for more detailed instructions</a>.
</div>
<div class="outline-box">
<b>OPTIONS</b>:
<span class="warning">This section should normally be left alone.</span>
<div class="radio-button-div">
<label>
<input id="strip-private-data-button" type="radio"
name="log-mode" value="STRIP_PRIVATE_DATA" checked>
Strip private information
</label>
</div>
<div class="radio-button-div">
<label>
<input id="include-private-data-button" type="radio"
name="log-mode" value="NORMAL">
Include cookies and credentials
</label>
</div>
<div class="radio-button-div">
<label>
<input id="log-bytes-button" type="radio"
name="log-mode" value="LOG_BYTES">
Include raw bytes (will include cookies and credentials)
</label>
</div>
<div>
<label>
Maximum log size (megabytes):
<input id="log-max-filesize" type="number" min="0" step="5" />
(Blank means unlimited)
</label>
</div>
</div>
</div>
<!--
=========================================================================
View for "logging" state.
* Shows that logging is in progress
* Has controls to stop logging
=========================================================================
-->
<div id="state-logging" hidden>
<h2>Saving network events to disk...</h2>
<button id="stop-logging">Stop Logging</button>
<div class="section-container">
<p>Reproduce the network problem now using another tab. When you are
done, return to this page and click the Stop button.</p>
<p>All of your browser's networking activity will be written to the log
file until you either click the Stop button, or close this tab.</p>
</div>
<div class="outline-box">
<b>FILE:</b> <span id="file-path-logging"></span> <br/>
<b>OPTIONS:</b> <span id="capture-mode-logging"></span>
</div>
</div>
<!--
=========================================================================
View for "stopped" state.
* Shows where the log file was saved to
* Has controls to email the log (mobile)
=========================================================================
-->
<div id="state-stopped" hidden>
<h2>Log file written</h2>
<if expr="is_ios or is_android">
<button id="mobile-email">Email Log</button>
</if>
<if expr="not(is_ios or is_android)">
<button id="show-file">Show File</button>
</if>
<button id="startover">
Start Over
</button>
<div class="section-container">
<if expr="is_ios or is_android">
Share the log by emailing it, and you are done!
</if>
<if expr="not(is_ios or is_android)">
<p>Attach the log file to your bug report, and you are done!</p>
<p>
If the file is too big, it can be compressed or truncated.
<a href="#" id="toobig-read-more-link">Read more...</a>
</p>
<div id="toobig-read-more">
<ul>
<li>The maximum log size can be specified when starting
logging.</li>
<li>Compressing the log file before attaching is a good
idea.</li>
<li>Capture logs over a shorter period of time; stop
logging once the issue has reproduced.</li>
<li>Existing log files can be shrunk using
<a
href="https://chromium.googlesource.com/chromium/src/+/main/net/tools/truncate_net_log.py"
target="_blank">
net/tools/truncate_net_log.py</a>.</li>
</ul>
</div>
</if>
</div>
<!-- TODO(eroman): This is duplicated with the logging state -->
<div class="outline-box">
<b>FILE:</b> <span id="file-path-stopped"></span> <br/>
<b>OPTIONS:</b> <span id="capture-mode-stopped"></span>
</div>
<div class="section-container">
The log file can be loaded using the
<a href="https://netlog-viewer.appspot.com/"
target="_blank">netlog_viewer</a>.
</div>
<div class="section-container">
<b><span class="warning">PRIVACY</span></b>: Be aware when
sharing your network logs that they may contain private information. At
a minimum, they list the URLs and hostnames of sites visited while
logging was enabled.
<a href="#" id="privacy-read-more-link">Read more...</a>
<div id="privacy-read-more">
<ul>
<li>There may be some cached hostnames/URLs from sites visited prior
to enabling logging.</li>
<li>Logs may contain information about your networking environment,
such as the proxy configuration used.</li>
<li>The default logging options do a <i>best-effort</i> stripping of
any cookies/credentials in the logged requests.</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>