Vue本机-调试

时间:2018-12-06 02:34:08

标签: react-native vue-native

最近我从Ionic框架切换到了vue-native(react-native周围的vue.js包装器),一切似乎都很酷,开发既快速又容易,但是调试这些应用程序时我遇到了一些实际问题。使用Ionic Framework(Cordova),我能够在网络浏览器中打开应用程序,并且可以轻松地从Chrome控制台管理Vuex状态(例如)。在响应本地环境时,似乎并不那么容易和琐碎。是否可以在vue-native中具有类似的调试经验?当我的应用开始增长并变得复杂时,很难以其他方式处理它。任何帮助表示赞赏。

2 个答案:

答案 0 :(得分:0)

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

重要的一点是,您的开发人员机器上已安装了模拟器(例如iphone模拟器),因为调试器不能在真实的机器上正常运行。

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

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

完成。令人愉快的经历类似于科尔多瓦的经历。您有一个js控制台,可以检查元素并实时更改样式。世博会带有实时重新加载功能,可以使工作更顺畅。

此处有更多信息:https://docs.expo.io/versions/latest/workflow/debugging/

答案 1 :(得分:0)

不幸的是,您无法在Chrome Dev Tools中调试VUE文件中的脚本部分(可以放置断点,但它们不能很好地工作),但是,如果将这些方法放到单独的JS文件中,它的工作原理就像一个魅力。我知道,这是一种解决方法,但不是很大的麻烦,而且运作良好。

例如,请参见我的TODO应用:https://github.com/TheBojda/VueNativeTodo