Open Chrome DevTools  |  Chrome for Developers
Skip to main content
Docs
Build with Chrome
Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.
Web Platform
Capabilities
ChromeDriver
Extensions
Chrome Web Store
Chromium
Web on Android
Origin trials
Release notes
Productivity
Create the best experience for your users with the web's best tools.
DevTools
Lighthouse
Chrome UX Report
Accessibility
Modern Web Guidance
Get things done quicker and neater, with our ready-made libraries.
Workbox
Puppeteer
Experience
Design a beautiful and performant web with Chrome.
AI
Performance
CSS and UI
Identity
Payments
Privacy and security
Resources
More from Chrome and Google.
All documentation
Baseline
web.dev
PageSpeed Insights audit
Isolated Web Apps (IWA)
Case studies
Blog
New in Chrome
/
English
Deutsch
Español – América Latina
Français
Indonesia
Italiano
Nederlands
Polski
Português – Brasil
Tiếng Việt
Türkçe
Русский
עברית
العربيّة
فارسی
हिंदी
বাংলা
ภาษาไทย
中文 – 简体
中文 – 繁體
日本語
한국어
Sign in
Docs
Chrome DevTools
DevTools
Get started
AI assistance
Overview
Get started
Chat with AI assistance
Generate code in Console and Sources
Data usage
Panels
Popular
Elements
Console
Lighthouse
Memory
Network
Performance
Recorder
Rendering
Security
Sources
All
Autofill
Animations
Application
Changes
Coverage
CSS overview
Developer resources
Issues
Layers
Lighthouse
Media
Memory Inspector
Network conditions
Request conditions
Performance monitor
Protocol monitor
Quick source
Sensors
WebAudio
WebAuthn
What's new
Settings
Accessibility
For agents
Docs
More
DevTools
Get started
AI assistance
More
Panels
More
Settings
Accessibility
For agents
Case studies
Blog
New in Chrome
Get started
Overview
Open Chrome DevTools
What's new in DevTools
Customize DevTools
DevTools Tips
Commands and shortcuts
Run commands in the Command Menu
Disable JavaScript
Keyboard shortcuts
Simulate mobile devices with Device Mode
Find text across all loaded resources with Search
Remote debugging
Remote debug Android devices
Access local servers and Chrome instances with port forwarding
Remote debugging WebViews
Resources
Engineering blog
Build with Chrome
Web Platform
Capabilities
ChromeDriver
Extensions
Chrome Web Store
Chromium
Web on Android
Origin trials
Release notes
Productivity
DevTools
Lighthouse
Chrome UX Report
Accessibility
Modern Web Guidance
Workbox
Puppeteer
Experience
AI
Performance
CSS and UI
Identity
Payments
Privacy and security
Resources
All documentation
Baseline
web.dev
PageSpeed Insights audit
Isolated Web Apps (IWA)
Overview
Get started
Chat with AI assistance
Generate code in Console and Sources
Data usage
Popular
Elements
Console
Lighthouse
Memory
Network
Performance
Recorder
Rendering
Security
Sources
All
Autofill
Animations
Application
Changes
Coverage
CSS overview
Developer resources
Issues
Layers
Lighthouse
Media
Memory Inspector
Network conditions
Request conditions
Performance monitor
Protocol monitor
Quick source
Sensors
WebAudio
WebAuthn
What's new
Home
Docs
Chrome DevTools
Get started
Open Chrome DevTools
Stay organized with collections
Save and categorize content based on your preferences.
Kayce Basques
X
GitHub
Jecelyn Yeen
X
GitHub
Bluesky
Homepage
Sofia Emelianova
GitHub
There are many ways to open Chrome DevTools. Choose your favorite way from this comprehensive reference.
You can access DevTools using Chrome UI or keyboard:
From drop-down menus in Chrome.
With dedicated shortcuts that open Elements, Console, or the last panel you used.
Additionally, learn how to auto-open DevTools for every new tab.
Open DevTools from Chrome menus
If you prefer UI, you can access DevTools from drop-down menus in Chrome.
Open the Elements panel to inspect the DOM or CSS
To inspect, right-click an element on a page and select Inspect.
DevTools opens the Elements panel and selects the element in the DOM tree. In the Styles tab, you can see CSS rules applied to the selected element.
Open the last panel you used from Chrome's main menu
To open the last DevTools panel, click the more_vert button to the right of the address bar and select More Tools > Developer Tools.
Alternatively, you can open the last panel with a shortcut. See the next section to learn more.
Open panels with shortcuts: Elements, Console, or your last panel
If you prefer keyboard, press a shortcut in Chrome depending on your operating system:
OS
Elements
Console
Your last panel
Windows or Linux
Ctrl + Shift + C
Ctrl + Shift + J
F12Ctrl + Shift + I
Mac
Cmd + Option + C
Cmd + Option + J
Fn + F12Cmd + Option + I
Here's an easy way to memorize the shortcuts:
C stands for CSS.
J for JavaScript.
I designates your choice.
The C shortcut opens the Elements panel in ink_selection inspector mode. This mode shows you helpful tooltips when you hover over elements on a page. You can also click any element to view its CSS in the Elements > Styles tab.
For the full list of DevTools shortcuts, see Keyboard shortcuts.
With DevTools open, reload the page with or without cache
With DevTools open, you can reload your page in three ways. In the main action bar of the Chrome window, long-press the refresh Reload button and choose one of the options:
Normal Reload. Uses cache to speed up reload time.
Shortcut: Cmd+R (macOS) or Ctrl+R (Windows/Linux).
Note: check_box Disable cache in the Network panel forces all normal reloads not to use cache.
Hard Reload. Bypasses cache but doesn't empty it.
Shortcut: Cmd+Shift+R (macOS) or Ctrl+Shift+R (Windows/Linux).
Empty cache and hard reload. Empties cache for all sites before reloading.
Auto-open DevTools on every new tab
Run Chrome from the command line and pass the --auto-open-devtools-for-tabs flag:
Quit any running Chrome instance.
Key point: This flag works only for the first Chrome instance you open. If it doesn't work for you, for example, on Windows, make sure to end any residing Chrome processes from the Task Manager.
Run your favorite terminal or command line application.
Depending on your operating system, run the following command:
macOS:
open -a "Google Chrome" --args --auto-open-devtools-for-tabs
Windows:
start chrome --auto-open-devtools-for-tabs
Linux:
google-chrome --auto-open-devtools-for-tabs
DevTools will automatically open for every new tab until you close Chrome.
What's next?
Success: Congratulations! You've successfully unlocked the power of Chrome DevTools.
Next, watch the following video to learn some useful shortcuts and settings for quicker DevTools navigation.
For a more hands-on learning experience, see how to customize DevTools.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2018-12-14 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2018-12-14 UTC."],[],[]]
Contribute
File a bug
See open issues
Related content
Chromium updates
Case studies
Archive
Podcasts & shows
Follow
@ChromiumDev on X
YouTube
Chrome for Developers on LinkedIn
RSS
Terms
Privacy
Manage cookies
English
Deutsch
Español – América Latina
Français
Indonesia
Italiano
Nederlands
Polski
Português – Brasil
Tiếng Việt
Türkçe
Русский
עברית
العربيّة
فارسی
हिंदी
বাংলা
ภาษาไทย
中文 – 简体
中文 – 繁體
日本語
한국어