如何使用WebStorm和Ngrok本地运行并调试Firebase Firestore云函数？

一、前置准备 #

• 安装Node.js（建议LTS版本，需符合Firebase CLI兼容要求）
• 全局安装Firebase CLI：npm install -g firebase-tools
• 确保WebStorm已配置好Node.js解释器
• 下载Ngrok并解压到本地可执行路径（或配置到系统环境变量）

二、启动本地Firebase函数模拟器 #

1. 用WebStorm打开你的Firebase云函数项目根目录
2. 打开终端，登录Firebase账号：firebase login
3. 若项目未初始化云函数，执行：firebase init functions，按提示选择目标项目、开发语言等配置
4. 启动带调试端口的函数模拟器：firebase emulators:start --inspect-functions
   • 启动后会输出本地函数访问地址（格式通常为http://localhost:5001/<项目ID>/<地区>/<函数名>），默认调试端口为9229

三、配置WebStorm调试会话 #

1. 点击WebStorm右上角的「Edit Configurations」
2. 点击「+」按钮，选择「Attach to Node.js/Chrome」类型
3. 填写配置参数：
   • Name：自定义名称（如Firebase Functions Debug）
   • Host：localhost
   • Port：9229（需与模拟器启动的调试端口一致）
   • 可选：勾选「Allow unsigned requests」避免调试时的证书校验问题
4. 保存配置后，点击「Debug」按钮启动调试会话

四、用Ngrok暴露本地端口 #

1. 打开新终端，运行Ngrok映射本地函数端口：ngrok http 5001
   • 若你的Firebase模拟器使用了非默认端口，替换为对应数值即可
2. 运行后Ngrok会生成一个公网HTTPS URL（如https://xxxx-xx-xx-xx-xx.ngrok.io）
3. 公网调用函数的格式为：https://xxxx-xx-xx-xx-xx.ngrok.io/<项目ID>/<地区>/<函数名>

五、调试与测试 #

1. 在WebStorm的云函数代码行号左侧点击，设置断点
2. 通过Ngrok公网URL触发函数，或配置Firestore触发器指向该URL（如文档增删改事件）
3. 函数触发后，WebStorm会自动暂停在断点处，此时可查看变量值、单步执行代码、检查调用栈
4. 调试完成后，关闭模拟器和Ngrok，修改代码后重复上述流程即可

内容的提问来源于stack exchange，提问作者luis miguel castro martinez