Opening DevTools
How to open Chrome DevTools, arrange it the way you want, and use the mobile device simulator.
Before you can debug anything, you need to open DevTools. There are three ways to do it, and you should know all three — different situations call for different approaches.
Why First: The Setup Problem
You have built a page that works perfectly on your laptop. You deploy it. Your client opens it on their phone and says everything looks broken — text is overflowing, buttons are overlapping, the layout is completely wrong.
Without the mobile device simulator in DevTools, you would have to physically test on a phone every time you make a change. That would take minutes per iteration. With the simulator, you can switch to "iPhone 14 view" in two seconds and instantly see exactly what your client sees — without leaving your computer.
This is one of the most practically useful things in DevTools and most beginners never discover it.
The Three Ways to Open DevTools
This is the fastest method. Learn it first, use it always.
| Platform | Shortcut |
|---|---|
| Windows / Linux | F12 or Ctrl + Shift + I |
| Mac | Cmd + Option + I |
F12 is the simplest. One key. Press it when you are on any web page and DevTools opens immediately.
Ctrl + Shift + I (Windows) or Cmd + Option + I (Mac) is useful when F12 is captured by another application.
Get this into muscle memory. The goal is to open DevTools in under two seconds without thinking about it. Practice opening and closing it (F12 again to close) ten times right now on any webpage.
Docking Options: Where DevTools Appears
When DevTools opens, it might appear docked to the bottom of the window, or to the right side, or it might open as a separate window. You can control this.
Look for the three-dot menu icon (⋮) inside the DevTools panel itself — usually in the top-right corner of the DevTools area. Click it and you will see docking options:
Dock to Bottom
DevTools occupies the lower portion of the browser window. Your page is above it. Good for wide monitors. This is the default for most people.
Dock to Right
DevTools occupies the right portion of the browser window. Your page is on the left. Useful when your page is very tall and you want to see more of it vertically.
Undock into Separate Window
DevTools becomes its own floating window. If you have two monitors, put DevTools on one monitor and your app on the other. This gives you the most space for both.
Dock to Left
DevTools on the left, page on the right. Less common but available.
Recommendation for training: Start with docked to the bottom. It is the default and easiest to understand spatially — your app is on top, the tools are below, like looking at something then reading the technical specs underneath.
If you have a second monitor: undock DevTools into a separate window and put it on your second screen. You will have full screen for both.
The Mobile Device Simulator
This is not optional. If you are building an app that anyone will use on a phone, you must test it in the mobile simulator regularly — not just before launch. Every CSS change you make might affect mobile layout.
Opening the Simulator
Keyboard shortcut: Ctrl + Shift + M (Windows/Linux) or Cmd + Shift + M (Mac) while DevTools is open.
Alternative: In the DevTools toolbar at the top, look for a small icon that looks like two rectangles (a phone in front of a tablet). Click it to toggle the device simulator on and off.
When the simulator is active, your page will render at a mobile screen size and you will see a toolbar above the page with device selection controls.
Choosing a Device
At the top of the simulator, there is a dropdown that says "Dimensions: Responsive" by default. Click it to see a list of devices you can simulate:
- iPhone SE, iPhone 14, iPhone 14 Pro Max
- Samsung Galaxy S8+, S20 Ultra
- iPad Air, iPad Mini
- Various older devices
Click any device name and the page instantly resizes to match that device's screen dimensions. The browser also sends a mobile User-Agent, so any JavaScript that detects mobile devices will trigger correctly.
Adding a Custom Device
Sometimes you need to test at a specific resolution that isn't in the default list.
Open the device dropdown (where it shows the device name or "Responsive")
Scroll to the bottom of the dropdown and click Edit (or "Add custom device")
Fill in: Device Name (anything descriptive), Width, Height, Pixel ratio (use 2 for standard retina, 3 for high-DPI phones), User Agent String (optional — leave blank for default)
Click Add. Your device now appears in the dropdown.
Common custom resolutions to test:
| Device | Width | Height |
|---|---|---|
| Short laptop (common for clients) | 1366 | 768 |
| Full HD laptop | 1920 | 1080 |
| Small Android phone | 360 | 640 |
| Large Android phone | 412 | 915 |
Rotating Between Portrait and Landscape
In the simulator toolbar, look for a rotation icon. Click it to switch between portrait (vertical) and landscape (horizontal) orientation. Always test both for mobile apps.
Throttling Network Speed
In the simulator toolbar, there is a dropdown that says "No throttling" by default. You can change this to:
- Fast 3G — simulates a decent mobile data connection
- Slow 3G — simulates a weak signal
- Offline — simulates no internet connection
Why test with throttling? On your laptop on WiFi, your app feels instant because data loads in milliseconds. Your client might be on a slow 3G connection. Throttling lets you experience exactly what they experience — skeleton loaders, loading states, and slow API responses — without leaving your desk.
The Tab Bar: What Each Tab Does
When DevTools is open, you will see a row of tabs across the top: Elements, Console, Sources, Network, Performance, Memory, Application, Security, and sometimes more.
Here is what the important ones do:
| Tab | What It Shows | When You Use It |
|---|---|---|
| Elements | Live HTML structure and CSS rules | Debugging layout, styling, finding why something looks wrong |
| Console | JavaScript errors, warnings, your console.log() output | Every time something isn't working as expected |
| Sources | Your actual JavaScript files, with a debugger | Advanced debugging — setting breakpoints in code |
| Network | Every HTTP request the page makes | When data isn't loading, when API calls fail |
| Performance | Flame chart of rendering and JavaScript execution | When your app is slow and you need to find why |
| Application | localStorage, cookies, cache, service workers | Checking stored auth tokens, clearing session data |
For this training, you will spend 90% of your DevTools time in Elements, Console, and Network.
Quick Reference Card
Tape this to your monitor until it becomes automatic:
| Action | Windows/Linux | Mac |
|---|---|---|
| Open/Close DevTools | F12 | F12 |
| Open DevTools (alternative) | Ctrl + Shift + I | Cmd + Option + I |
| Open Console specifically | Ctrl + Shift + J | Cmd + Option + J |
| Open mobile simulator | Ctrl + Shift + M | Cmd + Shift + M |
| Inspect an element | Right-click → Inspect | Right-click → Inspect |
| Clear the console | Ctrl + L | Cmd + K |
| Hard refresh (bypass cache) | Ctrl + Shift + R | Cmd + Shift + R |