如何在 VSCode 中运行并模拟不同浏览器的 User-Agent

在实践中，很多人会遇到一个问题：如何在 VSCode 里模拟不同浏览器的 User-Agent？这个问题的答案其实比想象中要清晰一些——VSCode 本身不处理 User-Agent，关键取决于你用什么方式运行代码。

下面这张图展示了整个逻辑链条，可以先看一眼，后面会逐个拆解：

VSCode 本身不处理 User-Agent，真正起作用的是运行环境：Live Server 由浏览器决定 UA，Python/Node.js 需在代码中显式设置 headers，扩展仅提供快捷入口，UA 修改必须在浏览器 DevTools、启动参数或业务代码中完成。

VSCode 本身不处理 User-Agent，关键在运行环境选择

很多人会问：VSCode 能不能直接设置 UA？答案很简单——VSCode 是编辑器，不是浏览器，它不发送 HTTP 请求，自然也没有 UA 可设。真正决定 UA 的是你用什么方式“运行”代码：是直接用扩展打开 HTML 文件，还是用 Live Server 启动本地服务，又或是用 Python/Node.js 发请求？每种方式的控制点完全不同，不能混为一谈。

用 Live Server 扩展时，UA 由你实际访问的浏览器决定

举个例子：当你用 Live Server 时，它只负责提供一个本地 HTTP 服务（比如 http://127.0.0.1:5500），并不干预请求头。点击“Go Live”后，VSCode 会调用你的默认浏览器打开这个地址——此时的 User-Agent 完全取决于那个浏览器自身的设置，跟 VSCode 没关系。

那么具体怎么操作？

• 想模拟手机？需要在 Chrome/Firefox 里打开开发者工具 → Network conditions → 取消 Select automatically → 手动填入 iPhone 或 Android 的 UA 字符串
• 想固定用某 UA 测试？别依赖 Live Server，改用命令行启动浏览器并传参，比如：chrome.exe --user-agent="Mozilla/5.0 (Linux; Android 13) AppleWebKit/537.36"
• 要注意：Live Server 不支持在响应中注入或修改 UA，它只负责 serve 文件

用 Python/Node.js 发请求时，UA 必须在代码里显式设置

如果你在 VSCode 里写脚本调用 API 或爬取页面，那 UA 是在代码里构造请求头时决定的。VSCode 只是运行环境，不参与 HTTP 协议层。

• Python 的 requests：必须传 headers={'User-Agent': '...'}，否则用的是 requests 默认 UA（容易被封）
• Node.js 的 fetch 或 axios：同样需要手动加 headers: { 'User-Agent': '...' }
• 常见错误：复制了 UA 字符串但漏掉引号、拼错 key 名（写成 user-agent 小写）、或者把 UA 放在 body 里而不是 headers
• UA 字符串本身要合法：包含空格、括号、斜杠，必须用双引号包裹，且不能含不可见控制字符

VSCode 扩展无法全局篡改浏览器 UA，仅提供快捷入口

像 Open in Browser 或 Browser Preview 这类扩展，只是帮你一键调起外部浏览器，并不接管网络栈。它们不提供 UA 修改能力，也不会注入任何请求头。

• 如果某个扩展声称“可切换 UA”，它实际做的是：帮你打开浏览器的 Network conditions 面板，或生成带特定 UA 参数的启动命令
• 真正的 UA 设置，永远发生在浏览器进程内部（DevTools）、启动参数里（--user-agent=...），或你的业务代码中（headers）
• 不要试图在 VSCode 设置里搜 “user agent” 找全局开关——它根本不存在

最后提醒一点：本地 HTML 文件用 file:// 协议打开时，Chrome/Firefox 会禁用部分 DevTools 网络覆盖功能（比如 Network conditions 中的 UA 修改可能灰掉），必须通过 http://（如 Live Server）才能生效。这才是容易被忽略的关键所在。