React/ASP.NET项目中浏览器启动顺序引发Permissions.query非法调用错误

问题 #

在React/ASP.NET项目的launch.json中配置了Edge和Chrome两个启动项，配置如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "edge",
      "request": "launch",
      "name": "localhost (Edge)",
      "url": "https://localhost:16778",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "localhost (Chrome)",
      "url": "https://localhost:16778",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

编写了处理YouTube视频嵌入的函数：

const handleYoutubeSubmit = (e) => {
     e.preventDefault();
     try {
         const videoId = getYoutubeId(youtubeUrl);
         if (videoId) {
             
             const embedUrl = `https://www.youtube.com/embed/${videoId}?enablejsapi=0`;
             console.log("Generated YouTube Embed URL:", embedUrl);
             setVideoSource(embedUrl);
         } else {
             console.error("Invalid YouTube URL");
             alert("Invalid YouTube URL. Please check the link and try again.");
         }
     } catch (error) {
         console.error("YouTube URL processing error:", error);
         alert("Error processing YouTube URL");
     }
 };

 const getYoutubeId = (url) => {
     if (!url) return null;

     const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
     const match = url.match(regExp);

     return (match && match[2].length === 11) ? match[2] : null;
 };

视频渲染的JSX结构：

<div className="video-container">
     {videoSource.includes('youtube.com') ? (
         <iframe
             width="640"
             height="360"
             src={videoSource}
             frameBorder="0"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
             allowFullScreen
             title="YouTube Video Player"
         ></iframe>
     ) : (
         videoSource && (
             <video ref={videoRef} width="640" height="360" controls>
                 <source src={videoSource} type="video/mp4" />
                 Your browser does not support the video tag.
             </video>
         )
     )}
 </div>

测试时发现：launch.json中排在首位的浏览器启动项目时，会抛出错误TypeError: Failed to execute 'query' on 'Permissions': Illegal invocation，第二位的浏览器则完全正常；调换两个配置的顺序后，首个启动的浏览器仍会触发该错误。

原因分析与解决办法 #

核心原因 #

这是VS Code调试器的多配置并行启动冲突导致的：默认情况下，VS Code会尝试初始化所有配置的调试上下文，即使你只选择启动其中一个。首个启动的浏览器会抢占调试端口或权限上下文，导致Permissions API调用出现非法调用错误。

解决步骤 #

1. 添加compounds配置，明确启动规则
   修改launch.json，用compounds管理多浏览器启动，避免默认的并行上下文冲突：

   {
     "version": "0.2.0",
     "configurations": [
       {
         "type": "edge",
         "request": "launch",
         "name": "localhost (Edge)",
         "url": "https://localhost:16778",
         "webRoot": "${workspaceFolder}"
       },
       {
         "type": "chrome",
         "request": "launch",
         "name": "localhost (Chrome)",
         "url": "https://localhost:16778",
         "webRoot": "${workspaceFolder}"
       }
     ],
     "compounds": [
       {
         "name": "Both Browsers",
         "configurations": ["localhost (Edge)", "localhost (Chrome)"],
         "stopAll": true
       }
     ]
   }
   

   此后可以选择单独启动某个浏览器，或通过Both Browsers选项同时启动，上下文不会相互干扰。

2. 为每个浏览器配置指定独立调试端口
   在每个配置中添加port字段，指定不同的调试端口，避免端口抢占：

   {
     "type": "edge",
     "request": "launch",
     "name": "localhost (Edge)",
     "url": "https://localhost:16778",
     "webRoot": "${workspaceFolder}",
     "port": 9222
   },
   {
     "type": "chrome",
     "request": "launch",
     "name": "localhost (Chrome)",
     "url": "https://localhost:16778",
     "webRoot": "${workspaceFolder}",
     "port": 9223
   }
   

3. 更新浏览器调试扩展
   确保VS Code中的Debugger for Microsoft Edge和Debugger for Chrome扩展为最新版本，旧版本存在多浏览器启动的权限上下文兼容问题。

4. 临时方案：按需保留配置
   如果不需要同时调试两个浏览器，可临时删除当前不用的配置，避免启动时的上下文干扰。

内容的提问来源于stack exchange，提问作者Abbe Azale