JavaScript Developer Tools - Guided Notes

CSCI 3403 - Web Programming | Day 20

Name: _________________________________ Date: _____________

📚 Today's Goal: Master browser DevTools for efficient JavaScript debugging and development

📝 Homework Review: JavaScript Exercises

Exercise Setup

The javascript-exercises repository uses ________________ as its testing framework.

To run tests for a specific exercise, use the command: npm test ____________

Exercises Completed

Exercise Key Concept What I Learned
01_helloWorld Basic function & return _____________________________
02_addNumbers Parameters & math operations _____________________________
03_numberChecker Conditionals (if/else) _____________________________
04_mathEquations Complex calculations _____________________________
05_joinStrings String manipulation _____________________________

🚀 Opening Developer Tools

Three Ways to Open DevTools:

  1. Menu Method: Chrome Menu → ________________ → Developer Tools
  2. Right-Click Method: Right-click anywhere → Select "________________"
  3. Keyboard Shortcuts:
    • Windows/Linux: ________ or Ctrl + Shift + ___
    • Mac: Opt + _____ + C
💡 Pro Tip: Learn the keyboard shortcuts - they'll save you tons of time!

🎛️ DevTools Panels Overview

Essential Panels for JavaScript Development:

Panel Name Primary Use My Notes
Elements Inspect and edit ________ and CSS _____________________
Console JavaScript ________ and testing _____________________
Sources Set breakpoints and ________ code _____________________
Network Monitor HTTP ________ _____________________

🏗️ Elements Panel

DOM Manipulation Features:

☐ Inspect elements by hovering
☐ Edit HTML by ________________-clicking text
☐ Add/remove CSS classes
☐ Toggle CSS properties using checkboxes
☐ View the ________________ model
☐ Force element states (:hover, :active, :focus)

CSS Features:

To add a pseudo-state to an element, right-click and select: _____________________________

To view all CSS properties alphabetically, click: _____________________________

💻 Console Panel

Essential Console Methods:

console.________("General output"); console.________("Warning message"); console.________("Error message"); console.________(arrayOfObjects); // Display as table console.________(); // Clear the console

DOM Selection in Console:

// Select single element document.________________('selector'); // Select multiple elements document.________________('selector'); // Shortcut for last result ____

Live DOM Manipulation Practice:

Change an element's text: element.textContent = ________________

Change an element's style: element.style.________ = 'value'

Add a new element: document.________________('div')

🐛 JavaScript Debugging

Breakpoints

A breakpoint is: _________________________________________

Setting Breakpoints:

  1. Open the ________________ panel
  2. Find your JavaScript file in the file tree
  3. Click on ________________ to set a breakpoint
  4. Reload the page to trigger the breakpoint

Debug Controls:

Control Icon What It Does
Resume ▶️ _____________________________
Step Over ⤵️ _____________________________
Step Into ⬇️ _____________________________
Step Out ⬆️ _____________________________

Types of Breakpoints:

👁️ Scope & Watch Panel

Scope Panel Shows:

Watch Expressions:

Purpose: Monitor _____________________________ as you debug

How to add: Click the + button and enter any ________________ expression

📱 Device Mode

Responsive Testing Features:

Keyboard shortcut to toggle Device Mode: ________ + Shift + ___

Device Mode Capabilities:

☐ Simulate different devices (iPhone, iPad, Android)
☐ Custom viewport sizes
☐ Rotate orientation
☐ Throttle network speed
☐ Capture screenshots
☐ Touch event simulation

🔧 Common Debugging Scenarios

Fill in the solutions:

  1. "undefined is not a function"
    Common cause: _________________________________________
    How to debug: _________________________________________
  2. "Cannot read property of null"
    Common cause: _________________________________________
    How to debug: _________________________________________
  3. Event listeners not working
    Common cause: _________________________________________
    How to debug: _________________________________________
  4. Styles not applying
    Common cause: _________________________________________
    How to debug: _________________________________________

⚡ Performance Measurement

Timing Code Execution:

console.________('operationName'); // Your code here console.________('operationName'); // Output: operationName: XXXms

Quick Performance Checks:

💪 Practice Challenges

Complete these challenges during class:

Challenge 1: DOM Inspector

☐ Find and change a heading's text using Elements panel
☐ Add a CSS class to an element
☐ Change the background color of a div
☐ Force a hover state on a button

Challenge 2: Console Practice

☐ Select all buttons on the page
☐ Count the number of links
☐ Create and append a new paragraph element
☐ Change the page title using JavaScript

Challenge 3: Debugging

☐ Set a breakpoint in a JavaScript function
☐ Step through the function line by line
☐ Add a watch expression for a variable
☐ Use conditional breakpoint (breaks only when condition is true)

🎯 Key Takeaways

The most important things I learned today:

  1. _________________________________________
  2. _________________________________________
  3. _________________________________________
  4. _________________________________________
  5. _________________________________________

DevTools features I want to practice more:

📝 Additional Notes

Use this space for any additional notes, tips, or questions during the lecture:










❓ Questions for Review

  1. What are the three ways to open DevTools?
    _________________________________________
    _________________________________________
    _________________________________________
  2. What is the difference between Step Over and Step Into when debugging?
    _________________________________________
    _________________________________________
  3. How do you set a conditional breakpoint?
    _________________________________________
    _________________________________________
  4. What console method would you use to display data in a table format?
    _________________________________________
  5. How can you simulate a mobile device in Chrome DevTools?
    _________________________________________
    _________________________________________

🚀 Remember: DevTools mastery = Faster debugging = More time for building cool stuff!

Practice using DevTools on every website you visit!