Extends the Chrome Developer Tools, adding a new Network Panel in the Developer Tools window with better searching and response previews.
https://leviolson.com/posts/chrome-ext-better-network-panel
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
300 lines
16 KiB
300 lines
16 KiB
<html ng-app="BNPChrome" ng-csp="">
|
|
|
|
<head>
|
|
<link rel="stylesheet" type="text/css" href="vendor/assets/stylesheets/jquery.resizableColumns.css">
|
|
<link rel="stylesheet" type="text/css" href="vendor/assets/stylesheets/style.css">
|
|
|
|
<link rel="stylesheet" type="text/css" href="assets/stylesheets/panel.css">
|
|
|
|
<link href="vendor/assets/stylesheets/jsoneditor.css" rel="stylesheet" type="text/css">
|
|
|
|
<script src="vendor/assets/javascripts/jsoneditor.js"></script>
|
|
|
|
<script src="vendor/assets/javascripts/jquery-2.2.4.min.js"></script>
|
|
<script src="vendor/assets/javascripts/jquery-ui-1.10.3.custom.min.js"></script>
|
|
<script src="vendor/assets/javascripts/keymaster.min.js"></script>
|
|
<script src="vendor/assets/javascripts/angular.min.js"></script>
|
|
<script src="vendor/assets/javascripts/jquery.resizableColumns.min.js"></script>
|
|
<script src="vendor/assets/javascripts/prettydiff.min.js"></script>
|
|
<script src="vendor/assets/javascripts/rawinflate.js"></script>
|
|
|
|
<script src="vendor/assets/javascripts/FileSaver.min.js"></script>
|
|
</head>
|
|
|
|
<body ng-controller='PanelController' ng-init="init('chrome-extension')" ng-cloak>
|
|
|
|
<section class="wrapper">
|
|
<section class="request">
|
|
<div class="search">
|
|
<input ng-model="search" type="text" placeholder='Add search term then ENTER' title='prefix with "-" to remove from search results' on-search="customSearch()" />
|
|
<div class="filtering">
|
|
<span class="label">Filtering for:</span>
|
|
<span ng-repeat="term in searchTerms">
|
|
<span title="Click to remove"
|
|
class="searchterm"
|
|
ng-class="{ neg: term[0] == '-'}"
|
|
ng-click="removeSearchTerm($index)">{{term}}</span>
|
|
<span class="operator" ng-hide="$last" ng-click="toggleSearchType()">{{ andFilter && 'and' || 'or' }}</span>
|
|
</span>
|
|
</div>
|
|
<div class="recent-searches">
|
|
<span class="label">Recent searches:</span>
|
|
<span ng-repeat="term in oldSearchTerms"
|
|
title="Click to Search, right click to permanently remove from history"
|
|
class="recents"
|
|
ng-class="{ neg: term[0] == '-'}"
|
|
ng-click="addSearchTerm($index)"
|
|
ng-right-click="deleteSearchTerm($index)">{{term}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="requests">
|
|
<table class="header styled" id="requests-header" resizable-columns data-resizable-columns-sync="#requests">
|
|
<thead>
|
|
<tr>
|
|
<th class='request'>
|
|
Path
|
|
</th>
|
|
<th class='apextype'>
|
|
Apex Type
|
|
</th>
|
|
<th class='apexmethod'>
|
|
Apex Method
|
|
</th>
|
|
<th class='method'>
|
|
Method
|
|
</th>
|
|
<th class='status'>
|
|
Status
|
|
</th>
|
|
<th class='time'>
|
|
Time
|
|
</th>
|
|
<th class='datetime'>
|
|
Started
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
<div class="data-container">
|
|
<table id="requests" class="styled" resizable-columns data-resizable-columns-sync="#requests-header">
|
|
<tr class="sizing">
|
|
<td class='request'></td>
|
|
<td class='apextype'></td>
|
|
<td class='apexmethod'></td>
|
|
<td class='method'></td>
|
|
<td class='status'></td>
|
|
<td class='time'></td>
|
|
<td class='datetime'></td>
|
|
</tr>
|
|
<tr class="data clickable" ng-repeat="request in filteredRequests | orderBy:'id'" scroll-to-new
|
|
ng-click="!request.separator && setActive(request.id)" ng-class="getClass(request.id, request.separator)">
|
|
<!-- scroll-to-new -->
|
|
<td class='request' title="{{request.request_url || titleIfSeparator(request.separator) }}">{{request.request_url}}</td>
|
|
<td class='apextype' title="{{request.request_apex_type || titleIfSeparator(request.separator) }}">{{request.request_apex_type}}</td>
|
|
<td class='apexmethod' title="{{request.request_apex_method || titleIfSeparator(request.separator) }}">{{request.request_apex_method}}</td>
|
|
<td class='method' title="{{request.request_method || titleIfSeparator(request.separator) }}">{{request.request_method}}</td>
|
|
<td class='status' title="{{request.response_status || titleIfSeparator(request.separator) }}">{{request.response_status}}</td>
|
|
<td class='time' title="{{request.time || titleIfSeparator(request.separator) }}">{{ request.time / 1000 | number : 2 }} s</td>
|
|
<td class='datetime' title="{{request.startedDateTime || titleIfSeparator(request.separator) }}">{{ request.startedDateTime | date: "mediumTime" }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="response">
|
|
<div id="tabs" class="tabbed-pane">
|
|
<div class="tabbed-pane-header">
|
|
<div class="tabbed-pane-header-contents">
|
|
<ul class="tabbed-pane-header-tabs">
|
|
<li class="tabbed-pane-header-tab">
|
|
<a href="#tab-response" class="tabbed-pane-header-tab-title"
|
|
ng-click="selectDetailTab('tab-response')">
|
|
<span ng-show="showOriginal">Raw</span>
|
|
<span ng-hide="showOriginal">Formatted</span>
|
|
Response</a>
|
|
</li>
|
|
<li class="tabbed-pane-header-tab">
|
|
<a href="#tab-request" class="tabbed-pane-header-tab-title"
|
|
ng-click="selectDetailTab('tab-request')">
|
|
<span ng-show="showOriginal">Raw</span>
|
|
<span ng-hide="showOriginal">Formatted</span>
|
|
Request</a>
|
|
</li>
|
|
<li class="tabbed-pane-header-tab">
|
|
<a href="#tab-request-stats" class="tabbed-pane-header-tab-title"
|
|
ng-click="selectDetailTab('tab-request-stats')">Request</a>
|
|
</li>
|
|
<li class="tabbed-pane-header-tab">
|
|
<a href="#tab-response-stats" class="tabbed-pane-header-tab-title"
|
|
ng-click="selectDetailTab('tab-response-stats')">Response</a>
|
|
</li>
|
|
<li class="tabbed-pane-header-tab">
|
|
<a href="#tab-settings" class="tabbed-pane-header-tab-title"
|
|
ng-click="selectDetailTab('tab-settings')">Panel Settings</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="toolbar"></div>
|
|
|
|
</div>
|
|
|
|
<div class="tabbed-pane-content data-grid data-grid-details">
|
|
|
|
<div id="tab-request-stats">
|
|
<table id="postData" class="styled" ng-show="activePostData.length" title="Click to open Request preview tab">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="2">Request POST Data</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-repeat="param in activePostData" ng-click="selectDetailTab('tab-request', true)">
|
|
<td class="key">{{param.name}}</td>
|
|
<td>
|
|
<pretty-print data="param.value" />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table id="request-data" class="styled" ng-show="activeRequest.length">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="2">Request Data</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-repeat="param in activeRequest">
|
|
<td class="key">{{param.name}}</td>
|
|
<td class="value">
|
|
<pretty-print data="param.value" />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table id="headers" class="styled" ng-show="activeHeaders.length">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="2">Request Headers</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-repeat="param in activeHeaders">
|
|
<td class="key">{{param.name}}</td>
|
|
<td class="value">
|
|
<pretty-print data="param.value" />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table id="request-cookies" class="styled" ng-show="activeResponseCookies.length">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="2">Request Cookies</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-repeat="param in activeCookies">
|
|
<td class="key">{{param.name}}</td>
|
|
<td>
|
|
<pretty-print data="param.value" />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="tab-response-stats">
|
|
<table id="response-data" class="styled" ng-show="activeResponseData.length">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="2">Response Data</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-repeat="param in activeResponseData">
|
|
<td class="key">{{param.name}}</td>
|
|
<td class="value">
|
|
<pretty-print data="param.value" />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table id="response-headers" class="styled" ng-show="activeResponseHeaders.length">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="2">Response Headers</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-repeat="param in activeResponseHeaders">
|
|
<td class="key">{{param.name}}</td>
|
|
<td class="value">
|
|
<pretty-print data="param.value" />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<table id="response-cookies" class="styled" ng-show="activeResponseCookies.length">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="2">Response Cookies</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-repeat="param in activeResponseCookies">
|
|
<td class="key">{{param.name}}</td>
|
|
<td>
|
|
<pretty-print data="param.value" />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="tab-response">
|
|
<div id="response-jsoneditor"></div>
|
|
</div>
|
|
|
|
<div id="tab-request">
|
|
<div id="request-jsoneditor"></div>
|
|
</div>
|
|
|
|
<div id="tab-settings">
|
|
<h3>Settings</h3>
|
|
<div class="form-group">
|
|
<label for="scroll-to-new">Auto Scroll Network Log</label>
|
|
<input type="checkbox" name="scroll-to-new" id="scroll-to-new" ng-model="showIncomingRequests">
|
|
</div>
|
|
<h3>Coming Soon</h3>
|
|
<div class="form-group" title="Not implemented yet">
|
|
<label for="clear-on-refresh">Clear Network Log on Page Refresh</label>
|
|
<input disabled="disabled" type="checkbox" name="clear-on-refresh" id="clear-on-refresh" ng-model="clearOnRefresh">
|
|
</div>
|
|
<div class="form-group" title="Not implemented yet">
|
|
<label for="auto-json-parse-depth-response">Auto JSON Parse Depth (Response)</label>
|
|
<input disabled="disabled" type="number" name="auto-json-parse-depth-response" id="auto-json-parse-depth-response" ng-model="autoJSONParseDepthRes">
|
|
</div>
|
|
<div class="form-group" title="Not implemented yet">
|
|
<label for="auto-json-parse-depth-request">Auto JSON Parse Depth (Request)</label>
|
|
<input disabled="disabled" type="number" name="auto-json-parse-depth-request" id="auto-json-parse-depth-request" ng-model="autoJSONParseDepthReq">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script src="assets/javascripts/app.js"></script>
|
|
<script src="assets/javascripts/panel.js"></script>
|
|
<script src="assets/javascripts/toolbar.js"></script>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</body>
|
|
|
|
</html>
|