Debugging JavaScript with Chrome Dev Tools

Objective

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!)

Your task

• 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

Helpful hints

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.

Further Resources

• 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).