DEV Community

Weather Clock Dash
Weather Clock Dash

Posted on

Firefox DevTools for Go Developers: API Debugging, pprof, WebSockets, and CORS

#go #webdev #firefox #debugging

Go developers building web applications and APIs spend time in the browser debugging their backends. Here's how Firefox DevTools specifically helps with Go web development — and some quirks to know.

Debugging Go HTTP Servers

Network Panel for API Debugging

When building APIs with net/http, Gin, Echo, Fiber, or any Go HTTP framework:

Firefox DevTools → Network panel → filter by "XHR" or "Fetch"

See every request your frontend sends to your Go server with:

  • Request method and URL
  • Request headers (including any Authorization headers)
  • Request body (for POST/PUT)
  • Response status and body
  • Timing breakdown (TTFB, DNS, connect)

For debugging JSON responses: click a request → Response tab → Firefox auto-formats JSON with collapsible tree.

Copying requests: Right-click a request → "Copy as cURL" generates a curl command with all headers. Run this to test your Go endpoint directly without the browser.

CORS with Go Servers

If you're building a Go API serving a separate frontend, CORS is often the first friction point.

CORS error in Firefox console:

Cross-Origin Request Blocked: CORS header 'Access-Control-Allow-Origin' missing
Enter fullscreen mode Exit fullscreen mode

In net/http:

func corsMiddleware(next http.Handler) http.Handler {
    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
        w.Header().Set("Access-Control-Allow-Origin", "http://localhost:3000")
        w.Header().Set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS")
        w.Header().Set("Access-Control-Allow-Headers", "Content-Type, Authorization")

        if r.Method == "OPTIONS" {
            w.WriteHeader(http.StatusNoContent)
            return
        }
        next.ServeHTTP(w, r)
    })
}
Enter fullscreen mode Exit fullscreen mode

Or use github.com/rs/cors package for more configurable CORS handling.

WebSocket Debugging (Go + gorilla/websocket)

Firefox's Network panel → filter by "WS" to see WebSocket connections.

For a gorilla/websocket server:

  1. Click the WS connection in Network panel
  2. "Messages" tab shows every frame sent and received
  3. Timestamps help identify out-of-order messages or unexpected delays

Useful for debugging real-time features where you need to verify message order and content.

pprof Endpoints in Firefox

Go's net/http/pprof package exposes profiling endpoints. Access them in Firefox:

import _ "net/http/pprof"

// After adding pprof import, your server exposes:
// /debug/pprof/ — index
// /debug/pprof/heap — heap profile
// /debug/pprof/goroutine — goroutine stack traces
// /debug/pprof/profile?seconds=30 — CPU profile
Enter fullscreen mode Exit fullscreen mode

In Firefox:

  • Navigate to http://localhost:8080/debug/pprof/ — see available profiles
  • Click "goroutine" to see all goroutine stacks (helps identify goroutine leaks)
  • Download the heap profile and analyze with go tool pprof

Firefox handles the plain-text pprof output well. The HTML index at /debug/pprof/ is readable without additional tools.

Flamegraph via pprof + Firefox

For CPU profiles, the go tool pprof -http=:8081 http://localhost:8080/debug/pprof/profile?seconds=10 command starts a local pprof HTTP server with an interactive flamegraph. Opens in Firefox as a full-featured profile viewer.

HTTP/2 and HTTP/3 with Go

Go's net/http supports HTTP/2 and HTTP/3 (via quic-go). Firefox DevTools shows protocol version in the Network panel.

Check which protocol is used:
Network panel → right-click column headers → add "Protocol" column → see h1.1, h2, h3 for each request.

For HTTP/2 with Go:

// HTTP/2 is automatic with TLS
http.ListenAndServeTLS(":8443", "cert.pem", "key.pem", nil)
Enter fullscreen mode Exit fullscreen mode

For development with self-signed certificates: Firefox may block requests. Go to about:config → temporarily add an exception for your dev cert, or use a local CA (like mkcert).

Firefox's Developer Edition for Go Development

Firefox Developer Edition (a separate Firefox build):

  • Includes all DevTools
  • Different default profile (won't mix with your daily Firefox)
  • Useful for development because changes to settings/extensions don't affect daily browsing

For Go developers: keep Firefox Developer Edition open for your web development work, with DevTools docked and the Network panel always visible.

Go Template Debugging in Firefox

If you're using html/template for server-side rendering:

Firefox's Inspector shows the rendered HTML. Check if template variables are correctly substituted by inspecting the DOM (not the source — Ctrl+U shows the raw HTML, but the Inspector shows the parsed DOM which reflects template output accurately).

For template debugging: add a ?debug=true query param handler that outputs template data as JSON — then use Firefox's Console to inspect the output.

Tab Management for Go Projects

When building a Go web service, you typically have multiple browser windows open:

  • The app frontend
  • API docs
  • pprof endpoints
  • Error monitoring

Tab Manager & Session Saver for Firefox lets you save these as "go-project-name" session. Restore the entire development context — all the tabs you need — with one click rather than manually re-opening each tool.

Particularly useful during long Go projects where you context-switch between services.

Top comments (0)