VSCode Debug RN项目

Visual Studio Code使用出了不少问题

VSCode Debug on iOS device

在安装了package React Native Tools后，尝试把RN项目debug到iOS真机，结果会失败 并且自动debug到模拟器。

后来查看React Native Tools文档的 iOS devices 部分，发现运行到iOS真机上，需要做如下处理

Debugging on an iOS device requires following manual steps:

1.     Install ios-deploy npm install -g ios-deploy.
2.     Install a valid iOS development certificate.
3.     In your project's launch.json file set target to device. If you need to specify the exact device to run, you can set target to device=<iOS_device_name>, or you can also use runArguments property to specify a particular device to run on in case multiple devices are connected (e.g. "runArguments": [ "--device", "My iPhone" ])
4.     Choose the Debug iOS option from the "Configuration" dropdown and press F5.
5.     Shake the device to open the development menu and select "Debug JS Remotely".

其中我只处理了

• 第1步，安装ios-deploy

• 第3步，在lauch.json配置文件中增加"runArguments": [ "--device", "My iPhone" ]

  {
          "name": "Debug iOS",
          "cwd": "${workspaceFolder}",
          "type": "reactnative",
          "request": "launch",
          "platform": "ios"
          "runArguments": [ "--device", "“xxx”的 iPhone" ]
      },
  

  查看文档的示例，正好给出了 获取device的命令

ios-deploy -c
[....] Waiting up to 5 seconds for iOS device to be connected
[....] Found 00008020-001014CA2251002E (N841AP, iPhone XR, iphoneos, arm64e) a.k.a. '“xxx”的 iPhone' connected through USB.

其中“xxx”的 iPhone就是设备名

注意：虽然iPhone连接着Mac，但如果没获取到，说明设备没允许Mac数据通信。可通过iTunes查看是否已连上iPhone，连上后就可以成功获取到连接的设备名称。

但是 按照第5步，选择Debug(没有Debug remotely)，无法 热重载调试了，即更改了App.js想刷新iOS真机上的页面 没反应(内容没变)。

真机上点击Debug后 界面的报错如下

Connection to http://localhost:8081/debugger-proxy?role=client timed out. Are you running node proxy? If you are running on the device, check if you have the right IP address in `RCTWebSocketExecutor.m

终于找到答案👉解决ReactNative在iPhone真机调试报错：Connection to http://...
然而，我只是打开了Xcode找到并打开了RCTWebSocketExecutor.mm文件，还没动手改，就试了试 VSC的Start Debugging按钮，居然运行后 尝试修改<Text>的文案，cmd+S时iPHone上app页面内容变了，惊呆了😮
热重载成功，体现在VSC上的差异，如下图

image.png

同时，记录下此时的 活跃端口信息：

$sudo lsof -i:8081

COMMAND     PID USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
node      24520   dl   24u  IPv6 0x6a20760fb6f5a3a9      0t0  TCP *:sunproxyadmin (LISTEN)
node      24520   dl   29u  IPv6 0x6a20760fb6f5af29      0t0  TCP localhost:sunproxyadmin->localhost:51024 (ESTABLISHED)
node      24520   dl   43u  IPv6 0x6a20760fcfbd03a9      0t0  TCP 172.16.1.72:sunproxyadmin->172.16.4.17:52393 (ESTABLISHED)
node      24520   dl   45u  IPv6 0x6a20760fb6f58129      0t0  TCP 172.16.1.72:sunproxyadmin->172.16.4.17:52389 (ESTABLISHED)
node      24520   dl   48u  IPv6 0x6a20760fb6f586e9      0t0  TCP 172.16.1.72:sunproxyadmin->172.16.4.17:52390 (ESTABLISHED)
Code\x20H 25251   dl   37u  IPv4 0x6a20760fb82b1971      0t0  TCP localhost:51024->localhost:sunproxyadmin (ESTABLISHED)

不行，我不放心，关掉VSC、Xcode，重启VSC再试试，担心这只是昙花一现。 我晕，居然又成功了。哎，多么期望是我做了点什么导致成功的。。。（努力回想做了什么）
呀！我记起来了，我按文章中做了这样一个操作 ⚠️把iPhone Wifi调成和Mac一致 ！！！ 后来验证确实如此。。。😌

Visual Studio Code Debug on Android

Command 'React Native: Run Android on Device' resulted in an error (执行命令 /Users/dl/Desktop/code_test/RN/AwesomeProject1/node_modules/.bin/react-native run-android --no-packager 时出错: 执行命令 /Users/dl/Desktop/code_test/RN/AwesomeProject1/node_modules/.bin/react-native run-android --no-packager 时出错 (error code 101))

此时在terminal却可以使用npx react-native run-android成功运行，但有时也不能成功 报错(这两处错误有必然的某种联系吧...)

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

那请 注意检查 jdk版本 ，因为我下了两个jdk版本，只在 ~/.bash_profile里设了jdk8为默认的
，没有在~/.zshrc设默认为jdk8。当打开terminal、vsc时，都默认用~/.zshrc的配置，会自动使用高版本jdk14。
这样会导致莫名其妙的现象

• terminal通过使用source ~/.bash_profile后，使用npx react-native run-android 是正常的
• vsc使用source ~/.bash_profile后，虽然jdk切到了jdk8，但Start Debugging仍然失败。

所以建议，~/.bash_profile和~/.zshrc 设为一致的，使用jdk8作为JAVA_HOME。
这样处理后， VSC每次启动后 可以正常通过Start Debugging 来 Debug Android了。

另外， 还要 ⚠️检查 Android 9 (Pie)... 这些安装了没 （安装多个也没事，要至少包括这个），参照 官方文档