Learning Objectives
- Clients and Servers
- TCP/IP
- Routers and Switches
- Connecting to the Internet
- What is Debugging?
- Breaking on Events and Basic Stepping
- Basic and Conditional Line Breakpoints
- Debugging Functions
- Debugging Exception Errors
- Breaking on DOM Changes and Watch Expressions
Materials
If you are using Odin as your primary learning materials, please go to each link in this list and read through the content on that page. If there are links you are redirected to as you read/work through the content, follow those links as well and read the content there also.
If you are using Treehouse as your primary learning materials, please go through the following courses in treehouse:
- How the Internet Works (35 mins)
- Debugging JavaScript in the Browser (39 mins)
Assignments
Coding Assignment
This week you will be working in a new repository to practice Debugging JavaScript in the Browser. Do not clone this repository while you are in your intro-to-programming-dorado folder as this will create a submodule. Instead, create a new folder on you local machine to clone your forked repository to. The steps for this will be the same steps you did week 6 when you first forked and cloned the class repository. You can find all of the setup instructions and requirements for this assignment here:
Be sure to complete the lesson materials before getting started; those tutorials will help you understand how to use the browser to find and understand errors so you can troubleshoot the bugs that were “planted” in this assignment. When you do start the assignment, you’re encouraged to first look at the index.js file and think about what the lines of code are doing. Getting an understanding of what is currently there and how it’s supposed to work will help you find and fix the bugs in the code.
Mindset Assignment
This week we’re thinking about bugs. Not the creepy-crawly kind, but the ones that cause our code to break, behave differently than how we expect, or provide incorrect output. Having bugs in your code is inevitable. We are all human and thus prone to making mistakes like misspelling a variable or forgetting to convert a string back into a number before we use it to calculate something. Even the most experienced coders will have bugs in their code. The trick is to know an approach for debugging your code. The first step to that uses skills we’ve talked about previously: having a growth mindset, being ok with not knowing everything, being determined to solve the problem, and knowing when to ask for help. You will find a method of attacking those bugs that work best for you, but for now here are some great starting points…
The first two paragraphs of this gitconnected article are a great practice for every programmer. When you’re still a beginner, a lot of error messages will be overwhelming and won’t make any sense at first. A good practice is to search for the complete error (ex. you get “Uncaught ReferenceError: battlehsip is not defined at index.js:5:20” in your console, so search for “Uncaught ReferenceError” and make a note of the “index.js:5:20” as that tells you the file ‘index.js’, the line ‘5’ and the character on that line ’20’ where the error is occuring)
From there, use these suggested codeacademy techniques (like printing/console logging your variables right before where the error is, or commenting out your code and the add back in the code line by line until it breaks again) to track down the bug and fix it!
After reading the two articles linked above…
– Share a recent instance of your code not doing what you expected or wanted it to. How did you find out it wasn’t doing what you wanted it to? What did you do to find out why it wasn’t doing what you wanted it to?
– Once you found the bug, how did you approach fixing it?
– What did you learn from that debugging process that you will carry with you for the next time you’re hunting down a bug to fix?
When you’ve completed your Coding Assignment, and have read and thought about the mindset questions above, submit ALL of your assignments (link to your pull request on GitHub and mindset) using the Homework Assignment Submission Form.
