Ubuntu下如何用VSCode Live Server打开Chrome且不合并窗口分组

问题根源 #

Ubuntu GNOME任务栏通过窗口的WM_CLASS属性匹配对应的.desktop文件进行分组。Live Server默认调用Chrome时未正确传递该属性，导致系统误将新Chrome窗口识别为VSCode的子窗口，从而合并分组。

解决方案 #

1. 确认Chrome的WM_CLASS属性 #

• 打开终端，执行命令：

  xprop WM_CLASS
  

• 点击已打开的Chrome窗口，终端会输出类似内容：

  WM_CLASS(STRING) = "google-chrome", "Google-chrome"
  

• 记录第二个值（示例中为Google-chrome），后续步骤会用到。

2. 修改Live Server的自定义浏览器启动参数 #

• 在VSCode中按下Ctrl+,打开设置面板，搜索liveServer.settings.CustomBrowser。
• 点击Edit in settings.json，将原有配置替换为以下内容（替换Google-chrome为你第一步获取的实际值）：

  "liveServer.settings.CustomBrowser": "chrome --class=Google-chrome"
  

• 若上述配置无效，尝试使用Chrome的完整路径：

  "liveServer.settings.CustomBrowser": "/usr/bin/google-chrome-stable --class=Google-chrome"
  

• 另一种替代方案：通过gtk-launch调用Chrome的.desktop文件，确保系统正确识别分组：

  "liveServer.settings.CustomBrowser": "gtk-launch google-chrome.desktop"
  

3. 验证效果 #

保存settings.json后，重启VSCode，再次通过Live Server打开文档，新Chrome窗口应会归到任务栏已有的Chrome图标分组中。

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