By the end of this assignment you will be able to:
- Open the Chrome Developer Tools
- Set a breakpoint in your JavaScript code
- Read and interpret errors in the Console
- Demonstrate how to inspect an HTML element and view its box model
- Show an emulation of how a webpage looks on a mobile browser
(Prepare to demo these skills in class!)
- Fork and clone this repository
- Type
npm install
to load up browsersync - use
npm start
to initiate browsersync - Read carefully through index.html for directions on how to complete your assignment
- Debug the debug.js file as instructed.
- Your console will be free of any JS errors at the end!
- After you've debugged the JS, push the changes to your forked repository
- From your GitHub repository, create a pull request against the original
If you get stuck...
- Check out this W3Schools article about common JavaScript mistakes
- Always feel free to work with a partner!
- Ask for help via our Slack channel
- Review past notes on the course website
- Go to the Google Developers Website for more in depth instructions of the things the debugger and dev tools can do.
- The Google Developers Youtube Channel has tons of resources about the Dev Tools (I like this video in particular as a guide to some dev tool shortcuts).