6、RN·前端调试

至此，第二种调试方式完毕

双击进行安装，比如安装到了D盘

1、npm list ls -l

2、使用React Native Debugger调试（即时修改，而非直接动源码，可以用这种第三方工具调试）

下载地址：http://slproweb.com/products/Win32OpenSSL.html

第六步

第四步

地址：https://fbflipper.com/

往下翻，翻到这

第一步

第三步

2、添加内容如下

不更改源代码的情况下即时调整UI组件的属性和样式

3、使用FaceBook官方出品的Flipper（仅适用于RN v0.62及更高版本的RN架构）场景：微调界面，并且想要看到网络请求，调试网络问题的，使用这种

切换到facebook-flipper/desktop目录下

第七步

或者百度网盘地址：链接：https://pan.baidu.com/s/18A1xJwngtaUx4aaEPTsjfQ 提取码：kthy 

console调试

1、VSCode中使用 React-Native Tools进行调试（场景：调试代码逻辑，使用这一种）

OPENSSL_CONFD:\\Program Files\\OpenSSL-Win64\\bin\\openssl.cfg

如果在下载electron时卡住了，需要进行配置

不如直接下载我的百度网盘地址：链接：https://pan.baidu.com/s/1XUKKPdPHsaz1bt-glbpvlA 提取码：k5x8 

第二步

ELECTRON_MIRROR=\"https://npm.taobao.org/mirrors/electron/\"ELECTRON_CUSTOM_DIR=\"{{ version }}\"

调试，可分为四种方式1、使用VSCode自带的插件React Native Tools在项目中进行源码级别的断点调试2、使用谷歌浏览器来调试     2.1 使用谷歌浏览器即可     2.2 不能查看标签结构     2.3 不能查看网络请求3、使用rn推荐的第三方工具react-native-debugger来调试（推荐）     3.1 可以查看标签结构     3.2 可以即时修改元素的样式     3.3 不能查看网络请求4、使用fb官方推出的flipper工具，这个工具有桌面版，看起来很高大上     4.1 可以看布局、日志、看网络请求、看图片资源等     4.2 可以使用默认自带插件，也可以自行扩展添加自己的插件并集成到android项目中     4.3 太重，配置的东西太多额外补充（想要查看网络请求）：     1、找到项目的入口文件：index.js     2、加入以下代码即可     GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest

clone源码到本地，如下

第五步

稍等片刻后，flipper应用UI界面就会出来了

在模拟器或真机界面中按下快捷键：Ctrl+M

3、保存后，重新yarn一次即可

启动flipper·desktopyarn start

安装openssl（windows版）不安装这个，flipper无法与rn应用进行通信会导致，network插件失效也就是不可用

GitHub地址：https://github.com/facebook/flipperGitee地址：https://gitee.com/mirrors/facebook-flipper

electron：使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序官网地址：https://www.electronjs.org/

GitHub下载地址：https://github.com/jhen0409/react-native-debugger/releases百度网盘下载地址：链接：https://pan.baidu.com/s/1GUHbWs4pSsbQxw0ucrP3KA提取码：ocpy 

启动RN·Applicationyarn android，然后yarn start

添加环境变量

官网提供的桌面端下载地址不翻墙访问不了，所以最直接的方式就是clone源码进行编译运行

下载地址：https://facebook.github.io/watchman/docs/install

安装watchman工具（windows版）facebook出品，检测文件和记录的变动以触发一些操作，比如执行命令等