vs code debugger is not recognizing any breakpoints, nor is it logging any console.log messages

My vs code debugger is not recognizing any breakpoints, nor is it logging any console.log messages. The web inspector is working, but the vs code debugger is not.

I've tried editing launch.json and tasks.json. I am using the Office Add-ins Development Kit to create a simple add-in to get this setup. I have installed the Microsoft Edge Tools for VS Code as well.

this is my launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Excel Desktop (Edge Chromium)",
      "type": "msedge",
      "request": "attach",
      "port": 9222, // Default debugging port for Edge
      "timeout": 600000,
      "webRoot": "${workspaceFolder}",
      "preLaunchTask": "Debug: Excel Desktop",
      "postDebugTask": "Stop Debug",
      "sourceMaps": true,
      "trace": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceFolder}/*"
      }
    },
    {
      "name": "Excel Desktop (Edge Legacy)",
      "type": "chrome",
      "request": "attach",
      "url": "https://localhost:3000/taskpane.html?_host_Info=Excel$Mac$16.01$en-US$$$$0",
      "port": 9222, // Default debugging port for Chrome
      "timeout": 600000,
      "webRoot": "${workspaceFolder}",
      "preLaunchTask": "Debug: Excel Desktop",
      "postDebugTask": "Stop Debug",
      "sourceMaps": true,
      "trace": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceFolder}/*"
      }
    }
  ]
}

below is what I am trying to debug. It is from the example provided by Microsoft when learning office add-ins.

/*
 * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
 * See LICENSE in the project root for license information.
 */

/* global console, document, Excel, Office */

Office.onReady((info) => {
  if (info.host === Office.HostType.Excel) {
    document.getElementById("sideload-msg").style.display = "none";
    document.getElementById("app-body").style.display = "flex";
    document.getElementById("run").onclick = run;
  }
});

export async function run() {
  try {
    await Excel.run(async (context) => {
      /**
       * Insert your Excel code here
       */
      const range = context.workbook.getSelectedRange();

      // Read the range address
      range.load("address");

      // Update the fill color
      range.format.fill.color = "yellow";
      console.log("hi");

      await context.sync();
      console.log(`The range address was ${range.address}.`);
    });
  } catch (error) {
    console.error(error);
  }
}