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
Complete the following Treehouse lessons:
- How the Internet Works (35 min)
- Debugging JavaScript in the Browser (39 min)
Assignments
Coding Assignment
This week you will be working in a new repository to practice Debugging JavaScript in the Browser. You can find all of the setup instructions and requirements for this assignment here:
Follow the proper links for your class:
| Bestla: (May – Sept 2022) | Lesson 5.1 GitHub Link for Intro to Programming Bestla Class |
Be sure to complete the Treehouse videos before getting started; those tutorials will help you understand how to troubleshoot the bugs that were “planted” in this assignment.
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 (coding and mindset) using the Squibby 2.0 Assignment Submission Form
