++As a Salesforce and Vlocity developer, I'm constantly looking for ways to improve my workflow, speed up my debugging, and find answers fast.
+
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 IDs 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.
+I present to you a "Better Network Panel". A Chrome extension that adds a new panel, and offers great features like:
+View it on GitHub
+A huge thanks and recognition goes to Milton Lai 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!
+
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. - See my article on Vanilla JS basics.
-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 - gin.
+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. See my article on Vanilla JS basics.
+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 gin.
Enough ranting, let's get to it.
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 - A Tour of Go.
-The accompanying repo for the code produced in this article is located - on github.
-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 A Tour of Go.
+The accompanying repo for the code produced in this article is located on github.
+Here is our basic folder structure for this basic http routing example:
basic-http-routing-in-golang/
main.go
As a starting point our
- main.go file looks like this:
package main
+As a starting point our main.go file looks like this:
+ package main
import (
- "fmt"
- _ "net/http"
+ "fmt"
+ _ "net/http"
)
func main() {
- fmt.Println("Hello HTTP")
+ fmt.Println("Hello HTTP")
}
-Step 2
-Now starting at a very basic level, we can leverage the
-
- http.HandleFunc
- method.
+Step 2
+Now starting at a very basic level, we can leverage the http.HandleFunc method.
It is very simple to use and its signature is easy to understand.
func HandleFunc(pattern string, handler func(ResponseWriter, *Request))
-Which basically means,
- http.HandleFunc("/url", routingFunction) where
- routingFunction looks like this:
+Which basically means, http.HandleFunc("/url", routingFunction) where routingFunction looks like this:
func routingFunction(w http.ResponseWriter, req *http.Request) {
- fmt.Fprint(w, "Hello HTTP")
+ fmt.Fprint(w, "Hello HTTP")
}
-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.
-
- 
-
-Here is what
- main.go looks like at this point:
+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.
+
+Here is what main.go looks like at this point:
package main
import (
- "fmt"
- "log"
- "net/http"
+ "fmt"
+ "log"
+ "net/http"
)
func main() {
- http.HandleFunc("/hello", helloHTTP)
- log.Fatal(http.ListenAndServe(":8080", nil))
+ http.HandleFunc("/hello", helloHTTP)
+ log.Fatal(http.ListenAndServe(":8080", nil))
}
func helloHTTP(w http.ResponseWriter, req *http.Request) {
- fmt.Fprint(w, "Hello HTTP")
+ fmt.Fprint(w, "Hello HTTP")
}
-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.
-Step 3
-So let's add a
- NotFound page when we don't match a pattern in
- HandleFunc. It's as simple as:
+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.
+Step 3
+So let's add a NotFound page when we don't match a pattern in HandleFunc. It's as simple as:
func notFound(w http.ResponseWriter, req *http.Request) {
http.NotFound(w, req)
}
-Here is what
- main.go looks like after that:
+Here is what main.go looks like after that:
package main
import (
- "fmt"
- "log"
- "net/http"
+ "fmt"
+ "log"
+ "net/http"
)
func main() {
- http.HandleFunc("/hello", helloHTTP)
- http.HandleFunc("/", notFound)
- log.Fatal(http.ListenAndServe(":8080", nil))
+ http.HandleFunc("/hello", helloHTTP)
+ http.HandleFunc("/", notFound)
+ log.Fatal(http.ListenAndServe(":8080", nil))
}
func helloHTTP(w http.ResponseWriter, req *http.Request) {
- fmt.Fprint(w, "Hello HTTP")
+ fmt.Fprint(w, "Hello HTTP")
}
func notFound(w http.ResponseWriter, req *http.Request) {
http.NotFound(w, req)
}
-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.
+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.
So that works, but I think we can go further.
-Step 4
-We need to give ourselves something more specific than the simple contrived
- /hello endpoint above. So let's assume we are needing to get a user profile. We will use the url
- /user/:id where
- :id is an identifier used to get the user profile from our persistance layer (i.e. our database).
-We'll start by creating a new method for this GET request called
- userProfile:
+Step 4
+We need to give ourselves something more specific than the simple contrived /hello endpoint above. So let's assume we are needing to get a user profile. We will use the url /user/:id where :id is an identifier used to get the user profile from our persistance layer (i.e. our database).
+We'll start by creating a new method for this GET request called userProfile:
func userProfile(w http.ResponseWriter, req *http.Request) {
- userID := req.URL.Path[len("/user/"):]
- fmt.Fprintf(w, "User Profile: %q", userID)
+ userID := req.URL.Path[len("/user/"):]
+ fmt.Fprintf(w, "User Profile: %q", userID)
}
-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".
-
-Let's add this new route in our
- main function:
+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".
+Let's add this new route in our main function:
func main() {
- http.HandleFunc("/hello", helloHTTP)
- http.HandleFunc("/user/", userProfile)
- http.HandleFunc("/", notFound)
- log.Fatal(http.ListenAndServe(":8080", nil))
+ http.HandleFunc("/hello", helloHTTP)
+ http.HandleFunc("/user/", userProfile)
+ http.HandleFunc("/", notFound)
+ log.Fatal(http.ListenAndServe(":8080", nil))
}
-
- Note: that this pattern
- /user/ matches the trailing
- / so that a call to
- /user in the browser would return a
- 404 Not Found.
-
-Step 5
-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
- req.URL.Path as a byte slice and just taking the last half is a terrible idea. So let's fix this:
- var validPath = regexp.MustCompile("^/(user)/([0-9]+)$")
+Note: that this pattern /user/ matches the trailing / so that a call to /user in the browser would return a 404 Not Found.
+Step 5
+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 req.URL.Path as a byte slice and just taking the last half is a terrible idea. So let's fix this:
+ var validPath = regexp.MustCompile("^/(user)/([0-9]+)$")
func getID(w http.ResponseWriter, req *http.Request) (string, error) {
m := validPath.FindStringSubmatch(req.URL.Path)
if m == nil {
http.NotFound(w, req)
- return "", errors.New("Invalid ID")
+ return "", errors.New("Invalid ID")
}
return m[2], nil // The ID is the second subexpression.
}
@@ -175,11 +122,8 @@
if err != nil {
return
}
- fmt.Fprintf(w, "User Profile: %q", userID)
+ fmt.Fprintf(w, "User Profile: %q", userID)
}
Conclusion
-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.
+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.
\ No newline at end of file
diff --git a/posts/basic-http-routing-in-golang.md b/posts/basic-http-routing-in-golang.md
index 3ef25c3..0135eb2 100644
--- a/posts/basic-http-routing-in-golang.md
+++ b/posts/basic-http-routing-in-golang.md
@@ -18,13 +18,13 @@ The accompanying repo for the code produced in this article is located [on githu
Here is our basic folder structure for this basic http routing example:
- basic-http-routing-in-golang/
+ basic-http-routing-in-golang/
main.go
-
+
As a starting point our `main.go` file looks like this:
- package main
+ package main
import (
"fmt"
@@ -34,7 +34,7 @@ As a starting point our `main.go` file looks like this:
func main() {
fmt.Println("Hello HTTP")
}
-
+
func HandleFunc(pattern string, handler func(ResponseWriter, *Request))
-http.HandleFunc("/url", routingFunction) where `routingFunction` looks like this:
func routingFunction(w http.ResponseWriter, req *http.Request) {
fmt.Fprint(w, "Hello HTTP")
}
- func notFound(w http.ResponseWriter, req *http.Request) {
http.NotFound(w, req)
}
-++"As a Salesforce and Vlocity developer, I'm constantly looking for ways to improve my workflow, speed up my debugging, and find answers fast."
+
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 IDs 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.
+
I present to you a "Better Network Panel". A Chrome extension that adds a new panel, and offers great features like:
+View it on GitHub
+A huge thanks and recognition goes to Milton Lai 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!
\ No newline at end of file diff --git a/posts/chrome-ext-better-network-panel.json b/posts/chrome-ext-better-network-panel.json new file mode 100644 index 0000000..b178eba --- /dev/null +++ b/posts/chrome-ext-better-network-panel.json @@ -0,0 +1,9 @@ +{ + "title": "Better Network Panel - a Chrome Extension - Levi Olson", + "permalink": "/posts/chrome-ext-better-network-panel", + "created_at": "2020-10-04T17:55:13-33:00", + "created_at_short": "2020-10-04", + "post_title": "better network panel - a chrome extension", + "active": "posts", + "content_file": "chrome-ext-better-network-panel.html" +} \ No newline at end of file diff --git a/posts/chrome-ext-better-network-panel.md b/posts/chrome-ext-better-network-panel.md new file mode 100644 index 0000000..f3f8494 --- /dev/null +++ b/posts/chrome-ext-better-network-panel.md @@ -0,0 +1,38 @@ +# Better Network Panel - a Chrome extension # + +> "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! diff --git a/public/images/BNPforChromeScreenshot.png b/public/images/BNPforChromeScreenshot.png new file mode 100644 index 0000000..5aefdec Binary files /dev/null and b/public/images/BNPforChromeScreenshot.png differ diff --git a/public/images/BNPforChromeScreenshotOriginal.png b/public/images/BNPforChromeScreenshotOriginal.png new file mode 100644 index 0000000..5aefdec Binary files /dev/null and b/public/images/BNPforChromeScreenshotOriginal.png differ diff --git a/public/images/bnpscreenshot.png b/public/images/bnpscreenshot.png new file mode 100644 index 0000000..4706573 Binary files /dev/null and b/public/images/bnpscreenshot.png differ diff --git a/views/pages/about.html b/views/pages/about.html index d3f99bc..e029114 100644 --- a/views/pages/about.html +++ b/views/pages/about.html @@ -8,8 +8,8 @@