# Chrome DevTools

## Learning checklist

* Chrome Devtools Overview
  * viewing/using the console/inspector
  * editing HTML content
  * editing CSS
  * simulate mobile device\(s\)
* Use JavaScript Console
* Debug javascript with Chrome Devtools
  * how to use breakpoints in browser

## Chrome Devtools Overview

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you diagnose problems quickly, which ultimately helps you build better websites, faster.

## Resources

### Recommended reading

* [Get Started with Debugging JavaScript in Chrome DevTools\(8-min video\)](https://developers.google.com/web/tools/chrome-devtools/javascript/)
* [Chrome Devtools for Troubleshooting HTML and CSS](http://www.richfinelli.com/troubleshooting-html-and-css/)
* [10 Tips for JavaScript Debugging Like a PRO with Console](https://medium.com/appsflyer/10-tips-for-javascript-debugging-like-a-pro-with-console-7140027eb5f6)
* [Essential Chrome Developer Tools: Beginner to Master](https://apsdehal.in/blog/chrome-developer-tools-to-master)
* [Cool Chrome DevTools tips and tricks you wish you knew already](https://medium.freecodecamp.org/cool-chrome-devtools-tips-and-tricks-you-wish-you-knew-already-f54f65df88d2)

### References

* [Chrome Devtools Homepage](https://developers.google.com/web/tools/chrome-devtools/)
* [Chrome Devtools Cheatsheet](http://anti-code.com/devtools-cheatsheet/)

