As you know, this week's coursework has focused on re-creating existing sites. This is so we may solidify foundational CSS skills first, before later focusing on crafting our own designs and making our own aesthetic decisions that follow industry best-practices.

Continuing with this pattern we'll ask you to recreate several responsive sites in class tomorrow. In order to do this you'll need to determine what media queries those sites use. Thankfully, there's a handy tool in Chrome's developer tools that helps us do exactly that! This brief lesson will walk through how to use it.

This will help us both observe other sites' media queries, and also troubleshoot and debug media query issues we may experience while developing our own content next week.

Observing Media Queries in Chrome Developer Tools

1. Access Device Mode

Within the developer console you should see a symbol on the top panel that looks like a smartphone in front of a tablet:

Click this symbol to enter the "device toolbar" area. The website you're viewing will appear in an even smaller pane on the left side of your browser window, mimicking the smaller viewport of a smartphone or tablet device.

2. View Media Queries

In the top panel above the website there should be an options button (three vertical dots). Click this to view more device toolbar options. Select the option reading Show Media Queries:

We should see a series of blue, green, and orange bars appear above the website we're viewing, like this:

These represent different breakpoints and media queries, each color-coded depending on how they're targeting viewport sizes, as described in the Google documentation on DevTools:

Notice you can expand and contract the viewport the website appears in to see which media queries are activated. Or you can click the colored media query bars to activate each query and breakpoint, as seen in this brief video:

3. Access Media Query Source Code

We can right-click one of the media query bars and select a Reveal in Source Code option to see the corresponding source code for a media query:

4. Preview on Devices

We can also drop down the Responsive menu to preview a website on one of many common devices (iPhones, tablets, etc.):

This short video also demonstrates what this looks like in action:

Required Reading: Test Responsive and Device-Specific Viewports

Before moving on, check out the brief article of documentation from Google about the other rad features this area of Chrome's developer tools offers: Test Responsive and Device-Specific Viewports.