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 browser-sync (This is a nice tool that is already included in this repository for you! It will reload changes automatically for you! You don't have to use it if you don't want to, but it is provided for your convenience!)
• use npm start to initiate browser-sync (This loads up your internet browser and serves up your page)
• 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).
• Curious about browsersync?