Chrome DevTools

Chrome DevTools

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.

With DevTools you can view and change any page. Even the Google homepage, as the video demonstrates.

DevTools for Beginners

DevTools for Beginners teaches you the basics of developing websites and using DevTools.
Get Started with HTML and the DOM. In this first tutorial, you set up your code, add content to your page with HTML, and use DevTools to experiment with content changes as we have done during our web development Canada process.

Get started

If you're a more experienced web developer, here are the recommended starting points for learning how DevTools can improve your productivity:

  • View and Change a Page's Styles (CSS)
  • Debug JavaScript
  • View Messages and Run JavaScript in the Console
  • Optimize Website Speed

Discover DevTools

The DevTools UI can be a little overwhelming... there's 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.