Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster.
There are many ways to open DevTools, because different users want quick access to different parts of the DevTools UI.
When you want to work with the DOM or CSS, right-click an element on the page and select Inspect to jump into the Elements panel. Or press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS).
See Open Chrome DevTools for more details and workflows.
If you're a more experienced web developer, here are the recommended starting points for learning how DevTools can improve your productivity:
The DevTools UI can be a little overwhelming... there are so many tabs! But, if you take some time to get familiar with each tab to understand what's possible, you may discover that DevTools can seriously boost your productivity.
Simulate mobile devices.
View and change the DOM and CSS.
View and debug network activity.
Find ways to improve load and runtime performance.
Profile memory usage and track down leaks.
Inspect all resources that are loaded, including IndexedDB or Web SQL databases, local and session storage, cookies, Application Cache, images, fonts, and stylesheets.
Debug mixed content issues, certificate problems, and more.
The best place to file feature requests for Chrome DevTools is the mailing list. The team needs to understand use cases, gauge community interest, and discuss feasibility before implementing any new features.