在编辑器中debug ReactNative

在开发RN项目的时候，常规操作npm start

在模拟器或者真机上打开页面,页面内容如下

如果想debug怎么办呢？ 可以在真机上摇一摇或者 在模拟器 command + d 打开悬浮弹层

点击 Debug Js Remotely，会在浏览器打开一个debug的页面，F12打开控制台，找到自己的代码，在左侧行数处点击加上断点，command + R 刷新页面会进入断点。

但是这样太麻烦了，当项目足够大的时候，找代码就能够把眼睛找瞎,可以如下在代码里加debugger，相当于在控制台加了一个断点，运行代码时会停止在此处。

 然后这样要打开一个浏览器页面也很麻烦，如何在编辑器里直接调试呢？我用的是vscode，下载一个 React Native Tools的插件并安装好，在‘细节’tab查看使用说明，生成launch.json文件

点击添加配置按钮，生成RN的配置

 接下来点击 attatch tp package，就可以愉快的进行调试了

加个断点试试，鼠标放在变量上边，可以看到变量的具体值了～