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.

286 lines
14 KiB

4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
  1. <html ng-app="BNPChrome" ng-csp="">
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="vendor/assets/stylesheets/jquery.resizableColumns.css">
  4. <link rel="stylesheet" type="text/css" href="vendor/assets/stylesheets/style.css">
  5. <link rel="stylesheet" type="text/css" href="assets/stylesheets/panel.css">
  6. <link href="vendor/assets/stylesheets/jsoneditor.css" rel="stylesheet" type="text/css">
  7. <script src="vendor/assets/javascripts/jsoneditor.js"></script>
  8. <script src="vendor/assets/javascripts/jquery-2.2.4.min.js"></script>
  9. <script src="vendor/assets/javascripts/jquery-ui-1.10.3.custom.min.js"></script>
  10. <script src="vendor/assets/javascripts/keymaster.min.js"></script>
  11. <script src="vendor/assets/javascripts/angular.min.js"></script>
  12. <script src="vendor/assets/javascripts/jquery.resizableColumns.min.js"></script>
  13. <script src="vendor/assets/javascripts/prettydiff.min.js"></script>
  14. <script src="vendor/assets/javascripts/rawinflate.js"></script>
  15. <script src="vendor/assets/javascripts/FileSaver.min.js"></script>
  16. </head>
  17. <body ng-controller='PanelController' ng-init="init('chrome-extension')" ng-cloak>
  18. <div class="split-view">
  19. <div class="split-view-contents split-view-contents-requests top-border">
  20. <div class="wrap">
  21. <input ng-model="search" type="text" placeholder='Add search term then ENTER' title='prefix with "-" to remove from search results' on-search="customSearch()" />
  22. <span class="label">Filtering for:</span>
  23. <span ng-repeat="term in searchTerms">
  24. <span title="Click to remove"
  25. class="searchterm"
  26. ng-class="{ neg: term[0] == '-'}"
  27. ng-click="removeSearchTerm($index)">{{term}}</span>
  28. <span class="operator" ng-hide="$last" ng-click="toggleSearchType()">{{ andFilter && 'and' || 'or' }}</span>
  29. </span>
  30. <br class="mobile" />
  31. <div id="recent-searches">
  32. <span class="recent">Recent searches:</span>
  33. <span ng-repeat="term in oldSearchTerms"
  34. title="Click to Search, right click to permanently remove from history"
  35. class="recents"
  36. ng-class="{ neg: term[0] == '-'}"
  37. ng-click="addSearchTerm($index)"
  38. ng-right-click="deleteSearchTerm($index)">{{term}}</span>
  39. </div>
  40. </div>
  41. <div class="data-grid data-grid-requests">
  42. <table class="header styled" id="requests-header" resizable-columns data-resizable-columns-sync="#requests">
  43. <thead>
  44. <tr>
  45. <th class='request'>
  46. Path
  47. </th>
  48. <th class='apextype'>
  49. Apex Type
  50. </th>
  51. <th class='apexmethod'>
  52. Apex Method
  53. </th>
  54. <th class='method'>
  55. Method
  56. </th>
  57. <th class='status'>
  58. Status
  59. </th>
  60. <th class='time'>
  61. Time
  62. </th>
  63. <th class='datetime'>
  64. Started
  65. </th>
  66. </tr>
  67. </thead>
  68. </table>
  69. <div class="data-container">
  70. <table id="requests" class="styled" resizable-columns data-resizable-columns-sync="#requests-header">
  71. <tr class="sizing">
  72. <td class='request'></td>
  73. <td class='apextype'></td>
  74. <td class='apexmethod'></td>
  75. <td class='method'></td>
  76. <td class='status'></td>
  77. <td class='time'></td>
  78. <td class='datetime'></td>
  79. </tr>
  80. <tr class="data clickable" ng-repeat="request in filteredRequests | orderBy:'id'"
  81. ng-click="!request.separator && setActive(request.id)" ng-class="getClass(request.id, request.separator)">
  82. <!-- scroll-to-new -->
  83. <td class='request' title="{{request.request_url || titleIfSeparator(request.separator) }}">{{request.request_url}}</td>
  84. <td class='apextype' title="{{request.request_apex_type || titleIfSeparator(request.separator) }}">{{request.request_apex_type}}</td>
  85. <td class='apexmethod' title="{{request.request_apex_method || titleIfSeparator(request.separator) }}">{{request.request_apex_method}}</td>
  86. <td class='method' title="{{request.request_method || titleIfSeparator(request.separator) }}">{{request.request_method}}</td>
  87. <td class='status' title="{{request.response_status || titleIfSeparator(request.separator) }}">{{request.response_status}}</td>
  88. <td class='time' title="{{request.time || titleIfSeparator(request.separator) }}">{{ request.time / 1000 | number : 2 }} s</td>
  89. <td class='datetime' title="{{request.startedDateTime || titleIfSeparator(request.separator) }}">{{ request.startedDateTime | date: "mediumTime" }}</td>
  90. </tr>
  91. <tr class="filler">
  92. <td class='request'></td>
  93. <td class='apextype'></td>
  94. <td class='apexmethod'></td>
  95. <td class='method'></td>
  96. <td class='status'></td>
  97. <td class='time'></td>
  98. <td class='datetime'></td>
  99. </tr>
  100. </table>
  101. </div>
  102. </div>
  103. </div>
  104. <div class="split-view-contents split-view-contents-details top-border">
  105. <div id="tabs" class="tabbed-pane">
  106. <div class="tabbed-pane-header">
  107. <div class="tabbed-pane-header-contents">
  108. <ul class="tabbed-pane-header-tabs">
  109. <li class="tabbed-pane-header-tab">
  110. <a href="#tab-response" class="tabbed-pane-header-tab-title"
  111. ng-click="selectDetailTab('tab-response')">
  112. <span ng-show="showOriginal">Raw</span>
  113. <span ng-hide="showOriginal">Formatted</span>
  114. Response</a>
  115. </li>
  116. <li class="tabbed-pane-header-tab">
  117. <a href="#tab-request" class="tabbed-pane-header-tab-title"
  118. ng-click="selectDetailTab('tab-request')">
  119. <span ng-show="showOriginal">Raw</span>
  120. <span ng-hide="showOriginal">Formatted</span>
  121. Request</a>
  122. </li>
  123. <li class="tabbed-pane-header-tab">
  124. <a href="#tab-request-stats" class="tabbed-pane-header-tab-title"
  125. ng-click="selectDetailTab('tab-request-stats')">Request</a>
  126. </li>
  127. <li class="tabbed-pane-header-tab">
  128. <a href="#tab-response-stats" class="tabbed-pane-header-tab-title"
  129. ng-click="selectDetailTab('tab-response-stats')">Response</a>
  130. </li>
  131. </ul>
  132. </div>
  133. <div class="toolbar"></div>
  134. </div>
  135. <div class="tabbed-pane-content data-grid data-grid-details">
  136. <div id="tab-request-stats">
  137. <table id="postData" class="styled" ng-show="activePostData.length" title="Click to open Request preview tab">
  138. <thead>
  139. <tr>
  140. <th colspan="2">Request POST Data</th>
  141. </tr>
  142. </thead>
  143. <tbody>
  144. <tr ng-repeat="param in activePostData" ng-click="selectDetailTab('tab-request', true)">
  145. <td class="key">{{param.name}}</td>
  146. <td>
  147. <pretty-print data="param.value" />
  148. </td>
  149. </tr>
  150. </tbody>
  151. </table>
  152. <table id="request-data" class="styled" ng-show="activeRequest.length">
  153. <thead>
  154. <tr>
  155. <th colspan="2">Request Data</th>
  156. </tr>
  157. </thead>
  158. <tbody>
  159. <tr ng-repeat="param in activeRequest">
  160. <td class="key">{{param.name}}</td>
  161. <td class="value">
  162. <pretty-print data="param.value" />
  163. </td>
  164. </tr>
  165. </tbody>
  166. </table>
  167. <table id="headers" class="styled" ng-show="activeHeaders.length">
  168. <thead>
  169. <tr>
  170. <th colspan="2">Request Headers</th>
  171. </tr>
  172. </thead>
  173. <tbody>
  174. <tr ng-repeat="param in activeHeaders">
  175. <td class="key">{{param.name}}</td>
  176. <td class="value">
  177. <pretty-print data="param.value" />
  178. </td>
  179. </tr>
  180. </tbody>
  181. </table>
  182. <table id="request-cookies" class="styled" ng-show="activeResponseCookies.length">
  183. <thead>
  184. <tr>
  185. <th colspan="2">Request Cookies</th>
  186. </tr>
  187. </thead>
  188. <tbody>
  189. <tr ng-repeat="param in activeCookies">
  190. <td class="key">{{param.name}}</td>
  191. <td>
  192. <pretty-print data="param.value" />
  193. </td>
  194. </tr>
  195. </tbody>
  196. </table>
  197. </div>
  198. <div id="tab-response-stats">
  199. <table id="response-data" class="styled" ng-show="activeResponseData.length">
  200. <thead>
  201. <tr>
  202. <th colspan="2">Response Data</th>
  203. </tr>
  204. </thead>
  205. <tbody>
  206. <tr ng-repeat="param in activeResponseData">
  207. <td class="key">{{param.name}}</td>
  208. <td class="value">
  209. <pretty-print data="param.value" />
  210. </td>
  211. </tr>
  212. </tbody>
  213. </table>
  214. <table id="response-headers" class="styled" ng-show="activeResponseHeaders.length">
  215. <thead>
  216. <tr>
  217. <th colspan="2">Response Headers</th>
  218. </tr>
  219. </thead>
  220. <tbody>
  221. <tr ng-repeat="param in activeResponseHeaders">
  222. <td class="key">{{param.name}}</td>
  223. <td class="value">
  224. <pretty-print data="param.value" />
  225. </td>
  226. </tr>
  227. </tbody>
  228. </table>
  229. <table id="response-cookies" class="styled" ng-show="activeResponseCookies.length">
  230. <thead>
  231. <tr>
  232. <th colspan="2">Response Cookies</th>
  233. </tr>
  234. </thead>
  235. <tbody>
  236. <tr ng-repeat="param in activeResponseCookies">
  237. <td class="key">{{param.name}}</td>
  238. <td>
  239. <pretty-print data="param.value" />
  240. </td>
  241. </tr>
  242. </tbody>
  243. </table>
  244. </div>
  245. <div id="tab-response">
  246. <div id="response-jsoneditor"></div>
  247. <!-- <div id="tab-response-codemirror"></div> -->
  248. </div>
  249. <div id="tab-request">
  250. <div id="request-jsoneditor"></div>
  251. <!-- <div id="tab-request-codemirror"></div> -->
  252. </div>
  253. <script src="assets/javascripts/app.js"></script>
  254. <script src="assets/javascripts/panel.js"></script>
  255. <script src="assets/javascripts/toolbar.js"></script>
  256. </div>
  257. </div>
  258. </div>
  259. </div>
  260. </body>
  261. </html>