React Native Debugger无法连接运行中的Expo安卓应用求助

问题概述 #

基于Expo的React Native安卓应用，已启动React Native Debugger并监听19001端口，但摇晃设备开启JS调试后屏幕无变化，未自动建立连接。相关日志显示无法解析debugger-ui/debuggerWorker.aca173c4模块，同时提示远程调试标签在后台可能导致性能问题。

错误日志 #

Remote debugger is in a background tab which may cause apps to perform slowly. Fix this by foregrounding the tab (or opening it in a separate window).
at http://localhost:19000/debugger-ui/debuggerWorker.aca173c4.js:4:234 in <unknown>
at http://localhost:19000/debugger-ui/debuggerWorker.aca173c4.js:4:641 in <unknown> 

Error: Unable to resolve module ./debugger-ui/debuggerWorker.aca173c4 from /Users/davionwilliams/smart-user-shell/.: 

None of these files exist:
  * debugger-ui/debuggerWorker.aca173c4(.native|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.jsx|.jsx|.native.json|.json)
  * debugger-ui/debuggerWorker.aca173c4/index(.native|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.jsx|.jsx|.native.json|.json)
    at ModuleResolver.resolveDependency (/Users/davionwilliams/smart-user-shell/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:136:15)
    at DependencyGraph.resolveDependency (/Users/davionwilliams/smart-user-shell/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
    at /Users/davionwilliams/smart-user-shell/node_modules/metro/src/lib/transformHelpers.js:129:24
    at Server._resolveRelativePath (/Users/davionwilliams/smart-user-shell/node_modules/metro/src/Server.js:1137:12)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at Server._explodedSourceMapForURL (/Users/davionwilliams/smart-user-shell/node_modules/metro/src/Server.js:1088:35)
    at async Promise.all (index 0)
    at Server._symbolicate (/Users/davionwilliams/smart-user-shell/node_modules/metro/src/Server.js:1039:26)
    at Server._processRequest (/Users/davionwilliams/smart-user-shell/node_modules/metro/src/Server.js:443:7)
Android Running app on BE2028

解决步骤 #

• 清除Metro缓存：在项目根目录执行npx expo start --clear，彻底清除打包缓存后重启开发服务，这是解决模块解析错误最常见的方法。
• 确认调试端口匹配：打开React Native Debugger，检查右上角显示的端口是否为19001，确保没有其他程序占用该端口。若端口被占用，可在React Native Debugger的设置中修改监听端口，或关闭占用端口的程序。
• 手动指定调试地址：在安卓设备的Expo开发菜单中，选择"Debug Remote JS"后，若未自动连接，尝试手动输入调试地址。如果设备和电脑在同一局域网，使用电脑的局域网IP代替localhost（比如http://192.168.x.x:19000/debugger-ui），避免localhost解析问题。
• 切换调试器到前台：将React Native Debugger的浏览器标签切换到前台，或单独打开一个窗口，解决"远程调试在后台标签"的警告，避免性能问题干扰连接。
• 重新安装依赖：如果以上步骤无效，删除项目根目录的node_modules文件夹和package-lock.json（或yarn.lock）文件，执行npm install（或yarn install）重新安装所有依赖，再重启开发服务。

内容的提问来源于stack exchange，提问作者Davion Williams Jr.