I am building an extension using manifest v3 with the config below, I am unable to view/open my popup when dev tools is open

Question

{
  "manifest_version": 3,
  "name": "chrome-extension-svelte-typescript-boilerplate",
  "description": "Boilerplate for Chrome Extension Svelte Typescript project",
  "version": "1.0.0",
  "version_name": "1.0.0",
  "icons": {
    "16": "src/assets/icons/icon-16.png",
    "32": "src/assets/icons/icon-32.png",
    "48": "src/assets/icons/icon-48.png",
    "128": "src/assets/icons/icon-128.png"
  },
  "content_scripts": [
    {
      "js": [
        "assets/index.ts-loader-1e2bd80e.js"
      ],
      "matches": [
        "https://*/*"
      ]
    }
  ],
  "background": {
    "service_worker": "service-worker-loader.js",
    "type": "module"
  },
  "options_ui": {
    "page": "src/options/options.html",
    "open_in_tab": true
  },
  "side_panel": {
    "default_path": "src/sidepanel/sidepanel.html"
  },
  "action": {
    "default_popup": "src/popup/popup.html",
    "default_icon": {
      "16": "src/assets/icons/icon-16.png",
      "32": "src/assets/icons/icon-32.png",
      "48": "src/assets/icons/icon-48.png",
      "128": "src/assets/icons/icon-128.png"
    }
  },
  "permissions": [
    "storage",
    "sidePanel",
    "tabs",
    "activeTab",
    "webNavigation",
    "webRequest",
    "notifications"
  ],
  "web_accessible_resources": [
    {
      "matches": [
        "https://*/*"
      ],
      "resources": [
        "assets/api-c5a78f60.js",
        "assets/index.ts-d1f6ef4e.js"
      ],
      "use_dynamic_url": true
    }
  ]
}

Should anything modified in the config to make the popup visible even when devtools is open or is it something we need to handle in the extension scripts?

I tried to see if any additional configurations are present for popup in manifest v3 but couldn't find any