美文网首页
[React Native]Visual Studio Code

[React Native]Visual Studio Code

作者: 猎手Andy | 来源:发表于2018-04-28 10:46 被阅读0次

1.配置Visual Studio Code为React-Native开发IDE

参考这篇文档
以及
知乎

2.添加配置

  1. Open launch.json

  2. Add Configuration

  3. 选择 React Native:Debug iOS 这个根据自己需要

image.png

添加后的配置如下:

{
            "name": "Debug iOS",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "launch",
            "platform": "ios",
            "sourceMaps": true,
            "trace": "verbose",
            "outDir": "${workspaceRoot}/.vscode/.react"
        },

3. Debug

image.png

4.启动Debug后将会打开一个Chrome Tab

如下图

- 打开开发者模式

-开启断点调试

-打开你的JS代码

-设置断点进行调试

image.png

5.重新加载你的React-Native APP

在iOS模拟器中Cmd+D调出Debug 菜单,选择Reload重新加载代码,程序将在断点处停下来。

以上就是在Chrome中断点调试React-Native代码的过程。
记得在Visual Studio Code中安装Debugger For Chrome。


image.png

接下来我们将在Visual Studio Code中断点调试iOS模拟器中的JS代码。
确保安装了 React Native Tools 插件。

运行后设置断点(测试下来第一次启动无法捕捉到断点)

image.png image.png

相关文章

网友评论

      本文标题:[React Native]Visual Studio Code

      本文链接:https://www.haomeiwen.com/subject/zeowlftx.html