Fundamentals (Paid)
  • 🚀Course Overview
  • Course Logistics
    • 🏫Course Methodology
      • 🧩Course Components
      • 💬Community Channels
      • 🎲Course Projects
    • 💻Required Hardware and Software
      • ☝️Required Software 1
      • ✌️Required Software 2
      • 👍Recommended Setup
    • 🗓️Schedule
    • 💡Tips and Tricks
      • 📒Coding Strategies
      • 🛠️Tooling Pro Tips
    • 🎓Post-Course
      • 🎓LinkedIn Certificates
      • 🚂Bootcamp Admission Criteria
  • 1: Introduction
    • 1.1: What is Coding?
    • 1.2: Web Browsers
    • 1.3: Command Line
    • Additional Resources 1
  • 2: Basic Data Manipulation
    • 2: Operators and Expressions
      • 2.1: Arithmetic Operators | Mathematical Expressions
      • 2.2: Assignment Operators | Variables
    • 2.3: Our First Program
    • Additional Resources 2
  • 3: Structuring and Debugging Code
    • 3.1: Functions
    • 3.2: Errors
    • Additional Resources 3
  • 4: Conditional Logic
    • 4.1: Intro to Logic
    • 4.2: Pseudo-Code, Boolean Or
    • 4.3: Boolean AND, NOT
    • 4.4: Input Validation
    • Additional Resources 4
  • 5: Managing State and Input Validation
    • 5.1: Program Lifecycle and State
    • 5.2: Program State for Game Modes
    • Additional Resources 5
  • 6: Arrays and Iteration
    • 6.1: Arrays
    • 6.2: Loops
    • 6.3: Loops with Arrays
    • Additional Resources 6
  • 7: Version Control
    • 7.1: Git
    • Additional Resources 7
  • 8: GitHub
    • 8.1: Intro to GitHub
    • 8.2: GitHub Fork and Clone
    • 8.3: GitHub Pull Request
    • 8.4: GitHub Repo Browsing
    • 8.5: Deployment
    • Additional Resources 8
  • 9: JavaScript Objects
    • 9.1: JavaScript Objects
    • 9.2: Card Deck Generation with Loops
  • 10: Advanced
    • 10.1 HTML
    • 10.2: CSS
    • 10.3: The Document Object Model
    • 10.4: DOM Manipulation
    • 10.5: Advanced Debugging with Sources Tab
  • 11: POST COURSE EXERCISES
    • DOM
    • Further Readings
  • In-Class Exercises
    • Day 2: Basic File and Data Manipulation
    • Day 3: Functions
    • Day 4: If Statements, Boolean Or, Boolean And
    • Day 5: Program State
    • Day 6: Scissors Paper Stone Redux
    • Day 7: Loops
    • Day 8: Arrays and Loops
    • Day 9: Beat That Redux
    • Day 10: Moar Cards / Chat Bot
    • Day 11: Blackjack Redux, DOM
  • Projects
    • Project 1: Scissors Paper Stone
      • Project 1: Scissors Paper Stone (Part 1)
      • Project 1: Scissors Paper Stone (Part 2)
    • Project 2: Beat That!
    • Project 3: Blackjack
  • Past Projects
    • Drawing With Emojis
    • Guess the Word
Powered by GitBook
On this page
  • Introduction
  • Sources Tab
  • Debugging Strategies
  • console.log
  • Debugger
  • Exercises
  • Drawing App Debugging
  1. 10: Advanced

10.5: Advanced Debugging with Sources Tab

Previous10.4: DOM ManipulationNextDOM

Last updated 2 years ago

Introduction

As your code becomes more complex console.logs may not be sufficient to understand what your code is doing or where your errors are coming from.

As always, one of the fundamental goals in the process of building a program is to be able understand all its states and values at each step. You had some intuition or intention about what those states and values were when you wrote the program, but either it's hard to know exactly what they are at each point, or they diverge from what you thought they were. console.log allows you to examine the forensics of what the values were when the program ran.

The next level of debugging techniques and tools is the ability to be able to look at the values in your code *as it is running*. To be able to press the pause button in the middle of the program and look around at everything and then click to play the program forward again.

Sources Tab

The sources tab is where the debugging tools live. This tab has many features to it but we will just be covering the bare minimum of it's functionality.

Setting a breakpoint

Open the script.js file by clicking in it in the file browser column. Set a breakpoint by clicking in the code file line number column. A blue arrow will appear. Note that you can't edit any code in this view.

Looking around with the console

Click the three dots in the upper right hand side to get the dropdown menu. Click on "Show console drawer".

The normal console will appear as a pane below the sources tab.

Pause on Debugger / Pressing Play

Run your code to get the debugger to pause. The play arrows that advance the debugger are above the screen and in the control pane of the sources tab.

Debugging Strategies

console.log

console.log should be the default way to try to understand your code. When it seems like you need more precision, or if a console won't be able to cover the breadth of data you need to look at, you can switch to debugger.

Debugger

Debugger allows you to see into the code exactly when and where you want to. It gives you a level of insight that you can't get only with console.log.

Exercises

Drawing App Debugging

Open your drawing game and set a breakpoint inside the loop. Open the console to inspect the values at that point. Advance the debugger to see the values as the loop continues.

You can refer to the official chrome dev tools guide here if you wish to dive further into the subject:

Use git clone to get a copy of Open it in the browser and set a breakpoint inside the inner loop. Open the console to inspect the values at that point. Advance the debugger to see the values as the loop continues.

https://developers.google.com/web/tools/chrome-devtools/javascript
Kai's reference solution for the drawing app.
debugging meme