|
|
- <h1 id="betternetworkpanelachromeextension">Better Network Panel - a Chrome extension</h1>
- <blockquote>
- <p>"As a Salesforce and Vlocity developer, I'm constantly looking for ways to improve my workflow, speed up my debugging, and find answers fast."</p>
- </blockquote>
- <h2 id="theproblem">THE PROBLEM</h2>
- <p>Over the last couple months, part of my debugging process has involved using the Chrome DevTools "Network" panel to find a specific <code>apexremote</code> call. The search to find one <code>apexremote</code> call out of dozens has been… annoying. </p>
- <p>The page loads, several dozen <code>apexremote</code> calls flood the panel, and I start clicking each one, until the correct one (i.e. <code>Request-Body</code> contains "xyz") and I can proceed to look at the Preview.</p>
- <p>The issue has only just begun, as I need to inspect the <code>Response</code>, perform some searches for <code>ID</code>s and the like, and although the <code>Response</code> is JSON format, the node in the response I need to search is stringified in a child member. So I must copy the data, parse it somehow, either locally on my machine or on the web (jsoneditoronline.org has been great) and finally perform the searching I need.</p>
- <p>And all of the above is done several times a day.</p>
- <h2 id="thesolution">THE SOLUTION</h2>
- <p><a href="https://chrome.google.com/webstore/detail/better-network-panel/kknnkgpbclaljhfcknhbebhppmkmoaml"><img src="/images/bnpscreenshot.png" alt="BNP for Chrome" /></a></p>
- <p>I present to you a <a href="https://chrome.google.com/webstore/detail/better-network-panel/kknnkgpbclaljhfcknhbebhppmkmoaml">Better Network Panel</a>. A Chrome extension that adds a new panel, and offers great features like:</p>
- <ul>
- <li><strong>Full Search</strong> - Entire request is searchable (i.e. headers, postbody, etc…), not just URI</li>
- <li><strong>JSON Parsing</strong> - Even nested members that contain stringified JSON are parsed</li>
- <li><strong>JSON Search</strong> - Incremental searching is available directly in the Preview pane</li>
- <li><strong>Import HAR</strong> - Import your own HAR file and use this tool for debugging</li>
- <li><strong>Download HAR</strong> - Export a request as a HAR file and use an external tool for further debugging</li>
- <li><strong>Regex Search</strong> - Powerfull regex searches can be performed on the Preview pane</li>
- <li>More to come</li>
- </ul>
- <h2 id="opensourcebaby">Open source baby</h2>
- <p>View it on <a href="https://github.com/leothelocust/better-network-chrome-panel">GitHub</a></p>
- <h2 id="specialthanks">Special Thanks</h2>
- <p>A huge thanks and recognition goes to <a href="https://github.com/milton-lai/saml-chrome-panel">Milton Lai</a> and his project SAML Chrome Panel. I started from a fork of his project, but later started fresh as there was a lot of SAML specific code that this project doesn't use/need. The UI is nearly identical, but the code underneath has become fairly different at this point.</p>
- <p>The SAML Chrome Panel was a huge help and ispiration! Thank you Milton and contributors to the SAML Chrome Panel project!</p>
|
