Sources Theoretical 1

🔍 Sources Panel Overview

• 🧭 Navigator pane (where your code gets lost)
• 📝 Editor pane (where the magic happens... or bugs multiply)
• 🐛 Debugger pane (your best friend at 3 AM)

Icons in the Navigator Pane:

• 🪟 The window icon, with label top, is like the boss of all frames
• ☁️ The cloud icon represents an origin (where code dreams come from)
• 📁 The folder icon is just a folder (nothing fancy here folks)
• 📄 The page icon is where the fun stuff lives

🔍 Debugging JavaScript (AKA: Why Does Nothing Work?)

• 👂 Event listener breakpoints (catch those sneaky events)
• 🛑 Line-of-code breakpoint - scope, watch, console, debugger; qux what?
• 🤔 Conditional breakpoint (for when you're feeling fancy) Conditional Breakpoint

        // Right-click line number -> Add conditional breakpoint
        // Example condition: i === 5 && user.name === "Alice"
        for (let i = 0; i < 10; i++) {
          console.log('Loop iteration:', i); // Add conditional breakpoint here
          processData(i);
        }
        

• 💡 Expression breakpoint (use with conditional breakpoints)

        // Put this in a conditional breakpoint to update variables and fix bugs:
        // (add1=+add1,add2=+add2) && false
        // This converts strings to numbers and returns false so execution continues
        

• 🎯 DOM breakpoint (because who doesn't love DOM drama)
  Right click me in DevTools to set a DOM breakpoint! Modify DOM
• 🌐 XHR breakpoint click the + button Get Data (Maybe)
• 💥 Exception breakpoint Catch Me Can't Catch Me!
• 🎮 Function breakpoint - debug() (your last resort) Calculate Sum: 5 + 10

          function calculateSum(a, b) {
            console.log('Calculating sum...');
            console.log('a:', a);
            console.log('b:', b);
            console.log('Sum:', a + b);
            return a + b;
          }
  
          debug(calculateSum); // Set breakpoint on calculateSum function
          calculateSum(5, 10);
  
          monitor(calculateSum); // Monitor function calls
        

• 📝 Logpoints (for when console.log is too mainstream) Calculate Total: 5 x 6

        // Add a logpoint by right-clicking the line number and selecting 'Add logpoint'
        // Instead of using console.log, you can add a message like:
        // "'The price is', price, ' and the quantity is ', quantity"
        function calculateTotal(price, quantity) {
          let total = price * quantity;  // Add logpoint here
          return total;
        }
        

Now lets fix the calculator...

• Overrides
  • 🔄 In the Sources tab, select the JS file you want to override (right-click override content)
  • ✅ Allow DevTools to modify local files when prompted
  • 📁 Select the folder you want to work with in the Sources panel
  • ✏️ Make your changes in the editor pane
  • 💾 Save changes (Ctrl+S) - a purple dot will appear next to overridden files
  • 🔄 Reload the page - your changes will persist
  • 🔍 To see the changes, open the DevTools and check the "Overrides" section
  • 🎨 Try to update the css in the element styles tool, maybe the not so pretty button? (Because let's face it, that button looks like it was designed by a cat walking on a keyboard)
  • ⚠️ To remove override, right-click the file and select "Remove override"
• Workspace
  • ⬇️ Download all files and put them in a folder called "theoretical-1" ⬇️ Download Files
  • 📁 In Browser DevTools Sources panel, right click the left pane and select "Add folder to workspace"
  • 📎 Select the "theoretical-1" folder you created
  • ✅ Allow Browser to access the folder when prompted
  • 📂 Open the index.html file (file:///C:/theoretical-1/index.html) you can right-click on the file and copy the link address

🧩 BTW - Content scripts are for Browser extensions. They are injected into web pages and can interact with the page's DOM and JavaScript context. Background scripts are for the extension itself and run in a separate context.

💡 Pro Tip: View all your overrides and workspace changes in the Changes tool

🚶‍♂️ Step through code (One Painful Step at a Time)

• 🦘 Step over - F10 (skip the scary parts)
• 🕳️ Step into - F11 (down the rabbit hole we go)
• 🪜 Step out - Shift + F11 (escape while you can)
• ⏯️ Resume/Pause - F8 (pray it works)
• 🏃‍♂️ Continue to here (run away from bugs)
• 💪 Force script execution (show that code who's boss)
• 🙈 Ignore scripts (pretend the problem doesn't exist)
• 🔄 Step vs. Step into - (for async code) Demo Async Stepping

    // Step: Follows code chronologically (e.g., pauses at console.log('outside'))
    // Step into: Waits for async code (e.g., pauses inside setTimeout after 3s)