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.
248 lines
12 KiB
248 lines
12 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="vendor/assets/codemirror/lib/codemirror.css">
|
|
|
|
<link rel="stylesheet" type="text/css" href="vendor/assets/codemirror/theme/3024-day.css">
|
|
<link rel="stylesheet" type="text/css" href="vendor/assets/codemirror/theme/base16-light.css">
|
|
<link rel="stylesheet" type="text/css" href="vendor/assets/codemirror/theme/elegant.css">
|
|
<link rel="stylesheet" type="text/css" href="vendor/assets/codemirror/theme/neat.css">
|
|
<link rel="stylesheet" type="text/css" href="vendor/assets/codemirror/theme/material.css">
|
|
<link rel="stylesheet" type="text/css" href="vendor/assets/codemirror/theme/material-ocean.css">
|
|
|
|
<link rel="stylesheet" type="text/css" href="vendor/assets/codemirror/addon/dialog/dialog.css">
|
|
<link rel="stylesheet" type="text/css" href="vendor/assets/codemirror/addon/search/matchesonscrollbar.css">
|
|
<link rel="stylesheet" type="text/css" href="vendor/assets/codemirror/addon/fold/foldgutter.css">
|
|
|
|
<link rel="stylesheet" type="text/css" href="assets/stylesheets/panel.css">
|
|
<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/codemirror/lib/codemirror.js"></script>
|
|
|
|
<script src="vendor/assets/codemirror/mode/javascript/javascript.js"></script>
|
|
|
|
<script src="vendor/assets/codemirror/addon/dialog/dialog.js"></script>
|
|
|
|
<script src="vendor/assets/codemirror/addon/search/search.js"></script>
|
|
<script src="vendor/assets/codemirror/addon/search/jump-to-line.js"></script>
|
|
<script src="vendor/assets/codemirror/addon/search/searchcursor.js"></script>
|
|
<script src="vendor/assets/codemirror/addon/scroll/annotatescrollbar.js"></script>
|
|
<script src="vendor/assets/codemirror/addon/search/matchesonscrollbar.js"></script>
|
|
|
|
<script src="vendor/assets/codemirror/addon/fold/foldcode.js"></script>
|
|
<script src="vendor/assets/codemirror/addon/fold/foldgutter.js"></script>
|
|
<script src="vendor/assets/codemirror/addon/fold/brace-fold.js"></script>
|
|
<script src="vendor/assets/codemirror/addon/fold/indent-fold.js"></script>
|
|
|
|
<script src="vendor/assets/javascripts/FileSaver.min.js"></script>
|
|
<script src="assets/javascripts/app.js"></script>
|
|
<script src="assets/javascripts/panel.js"></script>
|
|
<script src="assets/javascripts/toolbar.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="split-view" ng-controller='PanelController' ng-init="init('chrome-extension')">
|
|
<div class="split-view-contents split-view-contents-requests">
|
|
<div class="data-grid data-grid-requests">
|
|
<table class="header" id="requests-header" resizable-columns data-resizable-columns-sync="#requests">
|
|
<thead>
|
|
<tr>
|
|
<th class='request'>
|
|
Path
|
|
<input class="request-filter" ng-model="filter" placeholder="Filter" ng-change="filterRequests()" />
|
|
<button ng-click="filter = 'apexremote'; filterRequests()">Apex</button>
|
|
<button ng-click="filter = 'carts'; filterRequests()">CartsAPI</button>
|
|
</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>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
<div class="data-container">
|
|
<table id="requests" 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>
|
|
</tr>
|
|
<tr class="data clickable" ng-repeat="request in filteredRequests | orderBy:'id'" ng-click="setActive(request.id)" ng-class="getClass(request.id)">
|
|
<!-- scroll-to-new -->
|
|
<td class='request {{getTrafficStyle(request)}}' title="{{request.request_url}}">{{request.request_url}}</td>
|
|
<td class='apextype' title="{{request.request_apex_type}}">{{request.request_apex_type}}</td>
|
|
<td class='apexmethod' title="{{request.request_apex_method}}">{{request.request_apex_method}}</td>
|
|
<td class='method' title="{{request.request_method}}">{{request.request_method}}</td>
|
|
<td class='status' title="{{request.response_status}}">{{request.response_status}}</td>
|
|
<td class='time' title="{{request.time}}">{{ request.time / 1000 | number : 2 }} s</td>
|
|
</tr>
|
|
<tr class="filler">
|
|
<td class='request'></td>
|
|
<td class='apextype'></td>
|
|
<td class='apexmethod'></td>
|
|
<td class='method'></td>
|
|
<td class='status'></td>
|
|
<td class='time'></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="split-view-contents split-view-contents-details">
|
|
<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-code" class="tabbed-pane-header-tab-title" ng-click="selectDetailTab('tab-code')">Preview</a>
|
|
</li>
|
|
<li class="tabbed-pane-header-tab">
|
|
<a href="#tab-request" class="tabbed-pane-header-tab-title" ng-click="selectDetailTab('tab-request')">Request</a>
|
|
</li>
|
|
<li class="tabbed-pane-header-tab">
|
|
<a href="#tab-response" class="tabbed-pane-header-tab-title" ng-click="selectDetailTab('tab-response')">Response</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="toolbar"></div>
|
|
|
|
</div>
|
|
|
|
<div class="tabbed-pane-content data-grid data-grid-details">
|
|
|
|
<div id="tab-request">
|
|
<table id="postData" ng-show="activePostData.length">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="2">Request POST Data</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-repeat="param in activePostData">
|
|
<td class="key">{{param.name}}</td>
|
|
<td><pretty-print data="param.value"/></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table id="request-data" 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" 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" 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">
|
|
<table id="response-data" 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" 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" 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-code">
|
|
<div id="tab-code-codemirror">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|