Vue Native -调试

Question

最近我从离子框架切换到了vue-native (围绕react-native的vue.js包装器)，一切看起来都很酷，开发起来又快又简单，但我在调试这些应用程序时遇到了一些真正的问题。使用Ionic Framework (Cordova)，我可以在web浏览器中打开一个应用程序，并且可以轻松地从Chrome控制台管理Vuex状态(例如)。在react原生世界中，这看起来并不那么容易和琐碎。在vue-native中有可能有类似的调试体验吗？当我的应用程序开始增长并变得复杂时，很难用其他方式来处理它。感谢您的帮助。

Answer 1

当我将我的应用程序移植到Expo (它允许JS远程调试)并抓取React Native Debugger - https://github.com/jhen0409/react-native-debugger时，基本上我所有的问题都消失了。

重要的部分是在开发人员的机器上安装模拟器(比如iphone模拟器)，因为调试器不能很好地处理真实的机器。

内部调试器点击cmd+t打开一个新窗口，并将端口设置为19001 (因为世博会使用此端口)。现在使用npm start命令启动expo，并在Expo面板中点击“在模拟器中运行”按钮。

在模拟器中进行摇动手势(ctrl+cmd+z)，并允许在开发人员菜单中进行远程调试。

好了。令人愉快的体验类似于科尔多瓦的已知体验。你有一个js控制台，你可以实时检查元素和改变样式。世博会提供实时重新加载，让事情变得更顺畅。

更多信息请点击此处：https://docs.expo.io/versions/latest/workflow/debugging/

Answer 2

不幸的是，您不能在Chrome Dev工具中调试VUE文件中的脚本部分(您可以放置断点，但它们不能很好地工作)，但是如果您将这些方法放到一个单独的JS文件中，它就像一个护身符。我知道，这是一种变通方法，但并不是很痛苦，而且工作得很好。

参见我的TODO应用程序示例：https://github.com/TheBojda/VueNativeTodo