要使用本地浏览器调试远程服务器上的代码，可以通过以下几种方法实现：
方法1：使用 Chrome DevTools Remote Debugging
Chrome DevTools 提供了远程调试的功能，你可以用本地的 Chrome 浏览器连接到远程服务器上的代码进行调试。
1.在远程服务器上启动 Chrome Headless
首先，你需要在远程服务器上启动 Chrome 浏览器，并打开远程调试端口。例如，使用以下命令：
[Shell] 纯文本查看 复制代码 google-chrome --headless --remote-debugging-port=9222 --no-sandbox --disable-dev-shm-usage
这样，Chrome 就会在9222端口上监听调试请求。
2.在本地浏览器中访问调试端口
在本地浏览器中，访问 http://<remote-server-ip>:9222，你将看到一个页面列出所有可调试的标签页。点击相应的标签页链接，即可开始调试。
3.配置端口转发（如果需要）
如果远程服务器在防火墙后面或者安全原因无法直接访问，可以使用 SSH 隧道实现端口转发：
[Shell] 纯文本查看 复制代码 ssh -L 9222:localhost:9222 user@remote-server
然后在本地浏览器中访问 http://localhost:9222。
方法2：使用 Visual Studio Code 的远程开发扩展
Visual Studio Code 提供了一组强大的远程开发扩展，可以让你在本地使用 VS Code 调试远程服务器上的代码。
1.安装 Remote Development 扩展包
打开 VS Code，进入扩展管理器（Extensions），搜索并安装 Remote - SSH 扩展。
2.配置远程服务器
装好扩展后，按 F1 或 Ctrl+Shift+P 调出命令面板，输入 Remote-SSH: Connect to Host...，根据提示配置远程服务器信息，例如：
[Shell] 纯文本查看 复制代码 ssh user@remote-server
3.打开远程项目
连接成功后，VS Code 会在远程服务器上运行，并允许你打开远程目录。你可以直接在 VS Code 中编辑和调试远程服务器上的代码。
4.配置调试环境
在 VS Code 中创建或编辑 .vscode/launch.json 配置文件，根据你的项目需求配置调试环境。例如：
[Shell] 纯文本查看 复制代码 {
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}
确保 url 指向你在本地希望调试的远程服务器地址。
方法3：使用 SSHFS 或 SFTP 挂载远程文件系统
你也可以将远程服务器的文件系统挂载到本地。这样，你可以像操作本地文件一样操作远程文件，并使用本地浏览器调试。
使用 SSHFS
1.安装 SSHFS
在本地机器上安装 SSHFS。对于不同系统，有不同的安装方法：
macOS: 使用 Homebrew 安装 osxfuse 和 sshfs。
Linux: 使用包管理器安装 sshfs。
Windows: 使用 WinFsp 和 SSHFS-Win。
2.挂载远程文件系统
使用 SSHFS 挂载远程文件系统。例如：
[Shell] 纯文本查看 复制代码 mkdir ~/remote-project
sshfs user@remote-server:/path/to/project ~/remote-project
3.在本地编辑和调试
打开本地挂载的目录（例如 ~/remote-project），使用你的编辑器和本地浏览器进行调试。 | 
发表于 2024-6-11 12:05
|
发表于 2024-6-14 08:49
