Use Google Chrome development tools

All web browsers have some kind of developer access and view, but which offers the most? Tuomo tells us which of the browsers is his favourite and why.

“I use pretty much all of the available browsers out there each day for various tasks. Each browser has something it does better than the others. But the one I use most, due to its great developer tools, is Google Chrome.

The DevTools in Chrome are in my opinion superior to the offerings of other browsers and allow me real insights and data as to what is happening on a page. They also allow me to perform some real detailed testing across numerous aspects of the page/site.

While viewing a page in Chrome you can press Crtl+Shift+I (or Cmd+Opt+I on a Mac) to open the DevTools pane. From here you have a number of options; Elements, Resources, Network, Sources, Timeline, Profiles, Audits, and Console.

The Network section allows me to view the network traffic on the page and see what’s happening, including tags that are firing, the names of specific events, the analytics tools/accounts they’re firing to, and what data is being sent – this is great for diagnosing analytics issues. I can also manipulate the network (from a page perspective) and throttle the bandwidth, which allows me to see how the page would perform and render on slower connections – this is great for testing purposes to ensure full responsiveness across different devices, connections etc.

Timeline allows me to see exactly what is loading on the page, how long each element is taking to load, as well as the resource it’s using to do so. This can help to spot elements that are using too much resources, or those that are taking too long to load. This can help identify issues with the element or on-page JavaScript, and ensure your visitors get an optimal experience when coming to your site.

There is plenty more that Chrome DevTools offers, but these are the key items for me that I use day-in, day-out. If you’re developing a website, give the DevTools a try and check which features are the most useful for you.”

[tips guest=”tuomo”]

Related Blog & News