Browser Preview for VS Code 技术文档

Browser Preview for VS Code 技术文档

vscode-browser-preview A real browser preview inside your editor that you can debug. 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-browser-preview

安装指南

1. 获取扩展

• 由于该项目已被弃用，建议使用Live Preview扩展。
• 如果你仍希望使用Browser Preview，可以从VS Code市场获取扩展。

2. 安装扩展

• 在VS Code中打开扩展视图（快捷键：Ctrl+Shift+X）。
• 搜索“Browser Preview”并点击“安装”按钮。

3. 确保Chrome已安装

• 确保你的计算机上已安装Google Chrome。

项目的使用说明

1. 启动浏览器预览

• 安装完成后，点击左侧边栏中的“Browser Preview”按钮或运行命令Browser View: Open Preview。
• 这将启动一个无头Chromium实例，并在VS Code中打开一个浏览器预览窗口。

2. 多预览窗口

• 你可以同时打开多个浏览器预览窗口。

3. 调试功能

• 安装Debugger for Chrome扩展。
• 配置VS Code的调试器以附加或启动到浏览器预览窗口。

项目API使用文档

1. 调试配置

• 在VS Code的launch.json文件中添加以下配置：

  {
    "version": "0.1.0",
    "configurations": [
      {
        "type": "browser-preview",
        "request": "attach",
        "name": "Browser Preview: Attach"
      },
      {
        "type": "browser-preview",
        "request": "launch",
        "name": "Browser Preview: Launch",
        "url": "http://localhost:3000"
      }
    ]
  }
  

2. 附加属性

• 支持的附加属性包括：webRoot、pathMapping、trace、sourceMapPathOverrides和urlFilter。

项目安装方式

1. 通过VS Code市场安装

• 打开VS Code，进入扩展视图。
• 搜索“Browser Preview”并点击“安装”。

2. 手动安装

• 从GitHub仓库下载源码。
• 解压后，将文件夹放入VS Code的扩展目录中。

通过以上步骤，你可以顺利安装并使用Browser Preview扩展，享受在VS Code中进行浏览器预览和调试的便利。

vscode-browser-preview A real browser preview inside your editor that you can debug. 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-browser-preview