Web Dev

Inspector Gadgets

Magnifying glass inspecting gears
Photo by Shane Aldendorff

One of the most powerful tools at your disposal as you’re learning how to build websites is the Inspector, which Chrome calls DevTools.

Thankfully, Google has built out a fantastic set of resources for learning how to get started with the Inspector. Check out the following.

Chrome DevTools

This is the top-level page with links to all other readings on DevTools. Feel free to poke around a bit just to see all the things that DevTools has to offer. There’s a ton here, and we won’t get to most of it this semester, so just casually browse whatever interests you and ignore whatever doesn’t.

Get Started With Viewing And Changing CSS and CSS Reference

These readings cover the core functionality you’ll be using DevTools for in this class, so take your time here. Make sure that you’re using Chrome while exploring these resources.

Simulate Mobile Devices with Device Mode in Chrome DevTools

As we get further into the semester and begin learning responsive web design (with Bootstrap and beyond), explore these resources for testing your sites across a variety of device types.