<h1id="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>
<h2id="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>
<h2id="thesolution">THE SOLUTION</h2>
<p>I present to you a "Better Network Panel". 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>
<h2id="opensourcebaby">Open source baby</h2>
<p>View it on <ahref="https://github.com/leothelocust/better-network-chrome-panel">GitHub</a></p>
<h2id="specialthanks">Special Thanks</h2>
<p>A huge thanks and recognition goes to <ahref="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>
<p><imgsrc="../public/images/BNPforChromeScreenshotOriginal.png"alt="BNP for Chrome"/></p>
<h1id="basichttproutingingolang">Basic HTTP Routing in Golang</h1>
<p>Golang is incredibly powerful. Its standard library has so much to offer, but I think other languages have encouraged the use of external libraries for even the most basic tasks. For example, with JavaScript, most inexperienced developers seem to use jQuery to do simple tasks like selecting an element and replacing its contents. When you and I both know jQuery is way overkill for such a task. <ahref="https://leviolson.com/posts/vanilla-js-basics">See my article on Vanilla JS basics</a>.</p>
<p>I believe that in order to be considered an expert in a language, you must at least be able to demonstrate using the core language to achieve your goal. In our current case, HTTP routing. Now to be clear, I don't think you need to write everything from scratch all the time, but you should have a firm grasp on what is available by the core language, and when you are better suited to use an external library. If you are looking for more advanced HTTP routing, then I would suggest using something like <ahref="https://github.com/gin-gonic/gin">gin</a>.</p>
<p>Enough ranting, let's get to it.</p>
<h2id="assumptions">Assumptions</h2>
<p>I assume you have basic knowledge of the Go language at this point, so if not, it might be worth searching for some entry
level basics first. See
<ahref="https://tour.golang.org">A Tour of Go</a>.</p>
<h2id="lets-begin">Let's begin</h2>
<p>The accompanying repo for the code produced in this article is located
<p>I assume you have basic knowledge of the Go language at this point, so if not, it might be worth searching for some entry level basics first. See <ahref="https://tour.golang.org">A Tour of Go</a>.</p>
<h2id="letsbegin">Let's begin</h2>
<p>The accompanying repo for the code produced in this article is located <ahref="https://github.com/leothelocust/basic-http-routing-in-golang">on github</a>.</p>
<h3id="step1">Step 1</h3>
<p>Here is our basic folder structure for this basic http routing example:</p>
<pre><code> basic-http-routing-in-golang/
main.go
</code></pre>
<p>As a starting point our
<code>main.go</code> file looks like this:</p>
<preclass="prettyprint"><codeclass="language-go"> package main
<p>As a starting point our <code>main.go</code> file looks like this:</p>
<preclass="prettyprint"><code> package main
import (
"fmt"
_ "net/http"
"fmt"
_ "net/http"
)
func main() {
fmt.Println("Hello HTTP")
fmt.Println("Hello HTTP")
}
</code></pre>
<h3id="step-2">Step 2</h3>
<p>Now starting at a very basic level, we can leverage the
<p>Now starting at a very basic level, we can leverage the <ahref="https://golang.org/pkg/net/http/#HandleFunc"><code>http.HandleFunc</code></a> method.</p>
<p>It is very simple to use and its signature is easy to understand.</p>
<code>http.HandleFunc("/url", routingFunction)</code> where
<code>routingFunction</code> looks like this:</p>
<p>Which basically means, <codeclass="prettyprint">http.HandleFunc("/url", routingFunction)</code> where <code>routingFunction</code> looks like this:</p>
<imgsrc="https://leviolson.com/images/step2-browser-output.png"alt="Browser Output for Step 2 - Hello HTTP">
</p>
<p>Here is what
<codeclass="prettyprint">main.go</code> looks like at this point:</p>
<p>With <code>fmt.Fprint()</code> we can pass an <code>http.ResponseWriter</code> and a message to display. Our browser will now look like this when we visit the <code>/url</code> endpoint.</p>
<p><imgsrc="https://leviolson.com/images/step2-browser-output.png"alt="Browser Output for Step 2 - Hello HTTP"/></p>
<p>Here is what <code>main.go</code> looks like at this point:</p>
<preclass="prettyprint"><codeclass="language-go"> package main
<p>Now we could stop there, as this is a "basic" http routing example, but I think it isn't quite useful as an example
yet, until we start to see something slightly more practical.</p>
<h3id="step-3">Step 3</h3>
<p>So let's add a
<code>NotFound</code> page when we don't match a pattern in
<code>HandleFunc</code>. It's as simple as:</p>
<p>Now we could stop there, as this is a "basic" http routing example, but I think it isn't quite useful as an example yet, until we start to see something slightly more practical.</p>
<h3id="step3">Step 3</h3>
<p>So let's add a <code>NotFound</code> page when we don't match a pattern in <code>HandleFunc</code>. It's as simple as:</p>
<code>HelloHTTP</code> method to print "Hello HTTP" to the browser. Any other URLs will get caught by the
<code>/</code> pattern and be given the
<code>http.NotFound</code> response to the browser.</p>
<p>This will match <code>/hello</code> and use the <code>HelloHTTP</code> method to print "Hello HTTP" to the browser. Any other URLs will get caught by the <code>/</code> pattern and be given the <code>http.NotFound</code> response to the browser.</p>
<p>So that works, but I think we can go further.</p>
<h3id="step-4">Step 4</h3>
<p>We need to give ourselves something more specific than the simple contrived
<code>/hello</code> endpoint above. So let's assume we are needing to get a user profile. We will use the url
<code>/user/:id</code> where
<code>:id</code> is an identifier used to get the user profile from our persistance layer (i.e. our database).</p>
<p>We'll start by creating a new method for this GET request called
<code>userProfile</code>:</p>
<h3id="step4">Step 4</h3>
<p>We need to give ourselves something more specific than the simple contrived <code>/hello</code> endpoint above. So let's assume we are needing to get a user profile. We will use the url <code>/user/:id</code> where <code>:id</code> is an identifier used to get the user profile from our persistance layer (i.e. our database).</p>
<p>We'll start by creating a new method for this GET request called <code>userProfile</code>:</p>
<code>req</code> variable and we treat the string returned from
<code>req.URL.Path</code> as a byte slice to get everything after the
<code>/user/</code> in the string.
<strong>Note: this isn't fool proof,
<code>/user/10ok</code> would get matched here, and we would be assigning
<code>userID</code> to
<code>"10ok"</code>.</strong>
</p>
<p>Let's add this new route in our
<code>main</code> function:</p>
<p>Notice that we get the URL from the <code>req</code> variable and we treat the string returned from <code>req.URL.Path</code> as a byte slice to get everything after the <code>/user/</code> in the string. <strong>Note: this isn't fool proof, <code>/user/10ok</code> would get matched here, and we would be assigning <code>userID</code> to <code>"10ok"</code>.</strong></p>
<p>Let's add this new route in our <code>main</code> function:</p>
<p>Ok, so we have introduced some pretty severe holes in the security of our new HTTP router. As mentioned in a note above,
treating the
<code>req.URL.Path</code> as a byte slice and just taking the last half is a terrible idea. So let's fix this:</p>
<preclass="prettyprint"><codeclass="language-go"> var validPath = regexp.MustCompile("^/(user)/([0-9]+)$")
<p><em>Note: that this pattern <code>/user/</code> matches the trailing <code>/</code> so that a call to <code>/user</code> in the browser would return a <code>404 Not Found</code>.</em></p>
<h3id="step5">Step 5</h3>
<p>Ok, so we have introduced some pretty severe holes in the security of our new HTTP router. As mentioned in a note above, treating the <code>req.URL.Path</code> as a byte slice and just taking the last half is a terrible idea. So let's fix this:</p>
<preclass="prettyprint"><codeclass="language-go"> var validPath = regexp.MustCompile("^/(user)/([0-9]+)$")
<p>For now, I'm calling this "Basic HTTP Routing in Golang" article finished. But I do plan to add more to it as time
allows. Additionally, I'd like to create a more advanced article that discusses the ability to respond to not only GET
requests, but also POST, PUT, and DELETE HTTP methods. Look for an "Advanced HTTP routing in Golang" article
in the future. Thanks for reading this far. I wish you well in your Go endeavors.</p>
<p>For now, I'm calling this "Basic HTTP Routing in Golang" article finished. But I do plan to add more to it as time allows. Additionally, I'd like to create a more advanced article that discusses the ability to respond to not only GET requests, but also POST, PUT, and DELETE HTTP methods. Look for an "Advanced HTTP routing in Golang" article in the future. Thanks for reading this far. I wish you well in your Go endeavors.</p>
With `fmt.Fprint()` we can pass an `http.ResponseWriter` and a message to display. Our browser will now look like this when we visit the `/url` endpoint.
@ -74,7 +74,7 @@ Here is what `main.go` looks like at this point:
Now we could stop there, as this is a "basic" http routing example, but I think it isn't quite useful as an example yet, until we start to see something slightly more practical.
@ -85,7 +85,7 @@ So let's add a `NotFound` page when we don't match a pattern in `HandleFunc`. I
This will match `/hello` and use the `HelloHTTP` method to print "Hello HTTP" to the browser. Any other URLs will get caught by the `/` pattern and be given the `http.NotFound` response to the browser.
@ -126,7 +126,7 @@ We'll start by creating a new method for this GET request called `userProfile`:
userID := req.URL.Path[len("/user/"):]
fmt.Fprintf(w, "User Profile: %q", userID)
}
</pre></code>
</code></pre>
Notice that we get the URL from the `req` variable and we treat the string returned from `req.URL.Path` as a byte slice to get everything after the `/user/` in the string. **Note: this isn't fool proof, `/user/10ok` would get matched here, and we would be assigning `userID` to `"10ok"`.**
@ -138,7 +138,7 @@ Let's add this new route in our `main` function:
http.HandleFunc("/", notFound)
log.Fatal(http.ListenAndServe(":8080", nil))
}
</pre></code>
</code></pre>
_Note: that this pattern `/user/` matches the trailing `/` so that a call to `/user` in the browser would return a `404 Not Found`._
@ -156,7 +156,7 @@ Ok, so we have introduced some pretty severe holes in the security of our new HT
}
return m[2], nil // The ID is the second subexpression.
}
</pre></code>
</code></pre>
Now we can use this method in our code:
@ -167,7 +167,7 @@ Now we can use this method in our code:
<h1id="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>
<h2id="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>
<h2id="thesolution">THE SOLUTION</h2>
<p><imgsrc="/images/bnpscreenshot.png"alt="BNP for Chrome"/></p>
<p>I present to you a "Better Network Panel". 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>
<h2id="opensourcebaby">Open source baby</h2>
<p>View it on <ahref="https://github.com/leothelocust/better-network-chrome-panel">GitHub</a></p>
<h2id="specialthanks">Special Thanks</h2>
<p>A huge thanks and recognition goes to <ahref="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>
> "As a Salesforce and Vlocity developer, I'm constantly looking for ways to improve my workflow, speed up my debugging, and find answers fast."
## THE PROBLEM
Over the last couple months, part of my debugging process has involved using the Chrome DevTools "Network" panel to find a specific `apexremote` call. The search to find one `apexremote` call out of dozens has been... annoying.
The page loads, several dozen `apexremote` calls flood the panel, and I start clicking each one, until the correct one (i.e. `Request-Body` contains "xyz") and I can proceed to look at the Preview.
The issue has only just begun, as I need to inspect the `Response`, perform some searches for `ID`s and the like, and although the `Response` 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.
And all of the above is done several times a day.
## THE SOLUTION
I present to you a "Better Network Panel". A Chrome extension that adds a new panel, and offers great features like:
* **Full Search** - Entire request is searchable (i.e. headers, postbody, etc...), not just URI
* **JSON Parsing** - Even nested members that contain stringified JSON are parsed
* **JSON Search** - Incremental searching is available directly in the Preview pane
* **Import HAR** - Import your own HAR file and use this tool for debugging
* **Download HAR** - Export a request as a HAR file and use an external tool for further debugging
* **Regex Search** - Powerfull regex searches can be performed on the Preview pane
* More to come
## Open source baby
View it on [GitHub](https://github.com/leothelocust/better-network-chrome-panel)
## Special Thanks
A huge thanks and recognition goes to [Milton Lai](https://github.com/milton-lai/saml-chrome-panel) 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.
The SAML Chrome Panel was a huge help and ispiration! Thank you Milton and contributors to the SAML Chrome Panel project!
