One of my best friends: Chrome DevTools

Posted on by

A colleague recently shared in one of the channels at work that there’s this YouTube video covering Chrome DevTools for web testing. I pretty much use Chrome DevTools day in and day out so of course it piqued my interest. If you search “BFF” in my blog, the result that’ll turn up is a recent post where I said Chrome DevTools is a BFF.

Since way back when I started using it, I can’t recall taking an actual course to learn how to use it. I think you pretty much just dove into it and figured things out as you went along. When you get to collaborate with devs and see how they’re using it, you also get pointers on what you can use for your own testing.

So I checked the shared link and it turns out to be a video by Alan Richardson aka the Evil Tester. I’ve watched some of his videos/courses in the past and I’ve also bought one of his books in LeanPub. On an unrelated note, I love his accent. And going back to the video, I think it serves as a good introduction. No need to wait for a bug that you and your dev can troubleshoot together to expose yourself to the DevTools feature that they’re using. The video goes through the tool from left to right and shares how it’s been usually used for testing.

I wouldn’t even have much to supplement as he covers a lot of its usage already. Totally agree on having the Elements and Network tabs as the most used. I also often use the mobile view device toolbar for testing responsiveness across different resolutions. Let me just add a few more notes here.

  • Mobile view device toolbar – What I’ve done is added the usual resolutions I need to test against in the list of emulated devices. There are throttling options that can be set here if I need to simulate some network performance lag. Like for instance I had to test whether we’re preventing multiple calls of the API for when the user clicks a lot very fast. Simulating the lag helped me in testing that.
  • Elements selector + Elements tab – I often use this for inspecting the element to confirm the style. In list pages wherein I want to add more entries, my options include modifying the mock data, or I can also use a duplicate element feature in the Elements tab. He already mentioned you can manipulate stuff around here — so when I need a quick view of longer text or a change in a css property, I can do it here.
  • Console tab – Recently I use the verbose option, because the default level setting wasn’t exposing some violations that we were coming across with. I don’t really use it for JavaScript. I pretty much just use ‘innerWidth’ for when I come across a particular bug that gets triggered a a particular range of width.
  • Network tab – I use this a lot for checking the requests and their payload. And also for checking the API calls that are being made when I load a particular screen or call a particular function. In checking the response tab, it might be missed that there’s the pretty print icon at the bottom. It looks like the “{ }” is just some text rather than something clickable. Clicking it will make the json “prettier”. There is also a dropdown for throttling options. I haven’t looked up how that one differs from the mobile view device toolbar or if they’re just the same.
  • Application tab – Useful for testing where there’s an expectation that the data must be stored and retrieved from the local or session storage.
  • Lighthouse – I’m not sure if it shows up on your extension tab by default. It’s just been how it is with my Chrome browser setup. So with my setup, I can access it from the extension bar or from DevTools.
  • Kebab menu at the far right – It has the options of where you want to dock your the DevTools, or if you want it undocked. The More tools option can also be called from that kebab menu.
  • Sensors – This one I used when I was testing something time zone related and I had to simulate different locations. This is accessed from the kebab menu > More tools > Sensors.

I guess that’s it for what I can recall at the top of my head. And just sharing my keycaps for two of my favorite keys on the keyboard…

Astronaut helmet keycap = F12, for exploring with Chrome DevTools

Cheese keycap = PrintScreen for taking screenshots

Leave a comment