Optimizing Chrome Dev Tools for RPC Requests

If you're building a browser-based application, you probably spend a lot of time in the Chrome Dev Tools. They are a permanent fixture on your screen and occasionally work their way into your dreams. You're fairly sure that the seventh layer of Hell is a place where you have to build an infinite scroll without access to the Elements inspector, while listening to Bjork's Greatest Hits (over and over again, forever). But I digress.

One of the places you probably frequent the most is the Network tab. After all, it's a vitally useful tool... if you can actually find the request that you're looking for.

At Versus, our client-side apps communicate with the server via RPC, meaning that all requests get filtered through a single endpoint. Rather than use different urls for each part of the application, we hit the same url every time and use a method field in the body of each post (and everything is a POST) to tell the application how to handle the request. For example, fetching a user by their email address might look like this:

  
    URL: /rpc
    METHOD: POST

    // body
    {
      "method": "users.fetch",
      "params": {
        "email": "tony@starkindustries.com"
      }
    }
  
The method method parameter takes the place of a specialized url like /users

As you might expect, debugging such requests with the standard Network tab is a clunky experience. Each one is displayed as a call to /rpc, so finding the one you want feels a little like a really lame version of Minesweeper – a lot of clicking around randomly hoping to get lucky. Not to mention that you then have to scroll to the bottom of the resulting Headers view to check the payload. Maybe not a huge inconvenience, but as with anything you do a LOT, minor time sinks can really add up.

Which RPC call would you like to inspect?

Luckily, the Chrome Dev Tools are easily extendable, and we've created a tool that adds an RPC tab to go along with the typical Network view. It tracks calls to the /rpc route, and displays the method rather than the url to differentiate between requests. Clicking on a particular call displays the RPC params and response.

It's already saved our developers a ton of time debugging and made feature development a lot quicker. Add it to Chrome if it seems useful to you, and feel free to submit a pull request if there is something you want to add!