How to Open Developer Tools in Chrome, Safari and on Mobile Browsers

To open developer tools in any browser, press F12 on Windows or Linux, or Cmd + Option + I on macOS. In Chrome, you can also right-click any element on a page and choose Inspect. Safari requires you to enable the Develop menu first. These tools let you inspect HTML, debug JavaScript, monitor network requests, and test mobile layouts without installing anything extra.

• F12 opens DevTools instantly in Chrome, Edge, and Firefox on Windows and Linux.
• Cmd + Option + I is the universal macOS shortcut across Chrome and Safari.
• Safari hides its developer tools by default; you must enable them in Preferences before they appear.
• You can debug a real Android device from your desktop using chrome://inspect.
• The Elements, Console, and Network panels cover 90% of everyday debugging and QA work.

How to Open Developer Tools in Chrome (Windows, macOS, Linux)

Chrome DevTools is the most widely used browser debugging suite on the planet. According to the Stack Overflow Developer Survey 2023, Chrome is the primary browser for 65.3% of professional developers, which makes knowing its shortcuts genuinely non-negotiable if you’re learning web development or working in QA.

There are three ways to open it, and each one drops you into a slightly different starting panel depending on what you were doing.

Method 1: Keyboard Shortcut

This is the fastest route in every situation.

• Windows and Linux: Press F12, or use Ctrl + Shift + I.
• macOS: Press Cmd + Option + I.

The panel opens docked to the right or bottom of your browser window. You can change the docking position by clicking the three-dot menu inside DevTools and choosing a layout that suits your screen.

Method 2: Right-Click Inspect

Right-click any element on a webpage and select Inspect. Chrome opens DevTools with the Elements panel already highlighting that exact element in the DOM tree. This is the quickest way to examine a specific button, heading, or image without hunting through hundreds of lines of HTML manually.

Method 3: Chrome Menu

Click the three-dot menu in the top-right corner of Chrome, go to More Tools, then select Developer Tools. Slower, but useful if your keyboard shortcuts ever stop working after a system update.

What Each Panel Actually Does

Panel	Primary Use	Who Uses It Most
Elements	Inspect and live-edit HTML and CSS	Front-end developers, designers
Console	Run JavaScript, view errors and logs	Developers, QA engineers
Network	Monitor HTTP requests, load times, API calls	Developers, performance testers
Sources	Set breakpoints, debug JavaScript files	Developers
Lighthouse	Audit performance, accessibility, SEO	Developers, SEO specialists
Application	Inspect cookies, localStorage, service workers	Developers, security testers
Device Toolbar	Simulate mobile screen sizes	Front-end developers, QA

The Lighthouse panel deserves special mention. It runs an automated audit and scores your page on performance, accessibility, best practices, and SEO. A Google study published in 2022 found that pages loading in under 2.5 seconds see significantly better Core Web Vitals scores, and Lighthouse tells you exactly what’s dragging your score down.

Opening the Device Toolbar

Inside DevTools, click the Toggle Device Toolbar icon (it looks like a phone and tablet stacked together) or press Ctrl + Shift + M on Windows, or Cmd + Shift + M on macOS. This switches the browser viewport into a responsive simulation mode where you can pick device presets like “iPhone 14” or “Samsung Galaxy S21” and test how your layout behaves.

It’s not a perfect substitute for testing on a real device, but it catches the majority of obvious layout breaks before you push to production.

How to Open Developer Tools in Safari

Safari doesn’t show its developer tools by default. Apple keeps them hidden under a setting you have to enable manually, which catches a lot of beginners off guard. Once you turn it on, Safari’s Web Inspector is genuinely capable, especially for debugging on iOS devices.

Step 1: Enable the Develop Menu

Open Safari and go to Safari menu > Settings (or Preferences on older macOS versions). Click the Advanced tab. At the bottom, check the box that says “Show Develop menu in menu bar” (macOS Sonoma and later labels this “Show features for web developers”). Click the checkbox and the Develop menu appears instantly in your menu bar.

Step 2: Open Web Inspector

Now you have two options. Press Cmd + Option + I to open Web Inspector directly, or go to Develop > Show Web Inspector in the menu bar. You can also right-click any element and choose Inspect Element, exactly like Chrome.

Safari’s Web Inspector has an Elements tab, a Console, a Network timeline, and a Sources panel. The layout differs from Chrome DevTools, but the core concepts are identical. If you’re already comfortable in Chrome, you’ll orient yourself in Safari within a few minutes.

Safari Keyboard Shortcuts at a Glance

• Open Web Inspector: Cmd + Option + I
• Open Console: Cmd + Option + C
• Inspect Element: Right-click, then select Inspect Element
• Toggle responsive design mode: Cmd + Shift + R

According to StatCounter Global Stats (January 2024), Safari holds roughly 19% of global browser market share, driven largely by iPhone and Mac users. In India, where iPhone adoption has grown sharply since Apple started local manufacturing in 2023, testing in Safari is increasingly worth your time rather than an afterthought.

Developer Tools on Mobile: Android and iOS

Testing on a real mobile device reveals things no desktop simulation can catch, including touch event quirks, font rendering differences, and performance on lower-end hardware. Both major platforms give you a path to full DevTools access, though the setup steps differ.

Chrome DevTools on Android (Remote Debugging)

This is the proper way to use developer tools on Android. You get the full Chrome DevTools panel on your desktop, connected live to Chrome running on your physical phone.

1. On your Android phone, go to Settings > About Phone and tap Build Number seven times to unlock Developer Options.
2. Go to Settings > Developer Options and enable USB Debugging.
3. Connect your phone to your computer with a USB cable and tap Allow when the permission prompt appears.
4. On your desktop Chrome, open a new tab and go to chrome://inspect#devices.
5. Your device and any open Chrome tabs appear in the list. Click Inspect next to the tab you want to debug.

A full DevTools window opens on your desktop, mirroring exactly what’s happening in Chrome on your phone. You can use the Console, set breakpoints in Sources, and watch Network requests in real time. This is how professional front-end developers and QA engineers test mobile sites, and it’s free.

Safari Web Inspector on iPhone and iPad (iOS)

Apple’s approach requires a Mac. You can’t do this from a Windows machine without workarounds.

1. On your iPhone or iPad, go to Settings > Safari > Advanced and enable Web Inspector.
2. Connect your device to your Mac with a USB cable and trust the connection if prompted.
3. On your Mac, open Safari and make sure the Develop menu is enabled (see the Safari section above).
4. Open the Develop menu. Your connected device appears as a submenu. Click it to see open tabs.
5. Select a tab and Safari Web Inspector opens on your Mac, connected live to your iOS device.

This is the only officially supported way to debug Safari on iPhone. Third-party tools exist, but Apple’s own remote inspection is the most reliable option for anyone debugging web apps on iOS.

What About Chrome on iPhone?

Chrome on iOS is built on Apple’s WebKit engine, not Blink, because Apple requires all third-party browsers to use WebKit. This means you can’t use chrome://inspect to debug Chrome on iPhone. If you need to debug a site’s behaviour on iOS Safari, use the Safari Web Inspector method above. It covers the rendering engine that actually matters on that platform.

According to Statista (2023), mobile devices account for approximately 58% of global web traffic. If you’re building anything for users in India, where mobile browsing dominates desktop by a wide margin according to IAMAI’s India Internet Report 2023, skipping mobile debugging is a real mistake.

Learning to use these tools well is one of the fastest ways to close the gap between knowing HTML and CSS and actually being able to build and ship things. Whether you’re preparing for a role in web development, ethical hacking, or QA, DevTools fluency shows up in technical interviews and is expected from day one in most development jobs. If you want structured, hands-on training to build those skills faster, explore the online certification courses at 3.0 University, which cover practical skills across cybersecurity, ethical hacking, AI, and web development. You can also check the 3.0 University blog for more tutorials and career guidance.

Frequently Asked Questions

How do you open developer tools in Chrome?

Press F12 on Windows or Linux, or Cmd + Option + I on macOS. You can also right-click any element on the page and choose Inspect, or go to Chrome’s three-dot menu, select More Tools, then Developer Tools. All three methods open the same DevTools panel; the right-click method is the fastest when you want to inspect a specific element.

What is the shortcut for Chrome DevTools?

The primary Chrome developer tools shortcut is F12 on Windows and Linux. On macOS, use Cmd + Option + I. To open the Console panel directly, press Ctrl + Shift + J on Windows or Cmd + Option + J on macOS. To open the Elements panel directly, use Ctrl + Shift + C on Windows or Cmd + Shift + C on macOS.

How do you open developer tools in Safari?

First, enable the Develop menu: go to Safari > Settings > Advanced and check “Show features for web developers.” After that, press Cmd + Option + I to open Web Inspector, or go to Develop > Show Web Inspector in the menu bar. You can also right-click any element on the page and choose Inspect Element once the Develop menu is active.

Can you use developer tools on Android or iPhone?

Yes. On Android, enable USB Debugging in Developer Options, connect your phone to your computer, and open chrome://inspect in desktop Chrome to debug live. On iPhone, enable Web Inspector in Settings > Safari > Advanced, connect to a Mac, and use Safari’s Develop menu to inspect open tabs remotely. Both methods give you full DevTools access on real devices.

What are browser developer tools used for?

Browser developer tools let you inspect and edit HTML and CSS live, run JavaScript in the Console, monitor network requests and API responses, audit page performance with Lighthouse, simulate mobile devices, and debug JavaScript with breakpoints. Developers, QA engineers, ethical hackers, and SEO specialists all use them regularly. They’re built into every major browser and require no installation.

Last updated: August 2026. Reviewed by the 3University editorial team.