Hackday: NewRelic and Chrome Dev Tools

Recently, I was paired up with a co-worker and our task was to speed up a section of our site. We relied heavily on the Developer Mode of the NewRelic Ruby gem. This was the perfect tool for finding slow pages and then diving down into the queries that are probably causing that.

Here is a screenshot of it in action.

Screen Shot 2015-06-23 at 10.48.47 AM

We recently had a hackday and I wanted to create something that would bring this front and center for our dev team. The problem is, no one ever tells the new guys about the newRelic summary page, or it’s a hassle to have the data in another tab (that needs refreshing). What is something that is always in our face? The browsers dev tools. That’s the perfect place for it!

The dev tool extension will wait for a page to load, then, via XHR, grab that NewRelic page, parse the table, and then create a graph that shows you the data over time. Have a look:

Screen Shot 2015-06-23 at 10.46.55 AM

It’s great to see, over time, how your changes affect the performance of the app.