Vue Native - 调试

Posted 2023-02-22

【中文标题】Vue Native - 调试

【英文标题】：Vue Native - Debugging

【发布时间】：2019-05-07 16:47:25

【问题描述】：

最近我从 Ionic 框架切换到 vue-native（vue.js 围绕 react-native 包装），一切似乎都很酷，开发快速简单，但我在调试这些应用程序时遇到了一些实际问题。使用 Ionic Framework (Cordova)，我能够在 Web 浏览器中打开应用程序，并且可以从 Chrome 控制台轻松管理 Vuex 状态（例如）。在反应原生世界中似乎并不那么容易和微不足道。在vue-native中是否可以有类似的调试经验？当我的应用程序开始增长并变得复杂时，真的很难以其他方式处理它。任何帮助表示赞赏。

【问题讨论】：

调试问题有解决办法吗？任何解决方法，特别是 webstorm...

@AhuraMazda 请看答案

【参考方案1】：

当我将我的应用程序移植到 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 控制台，您可以实时检查元素并更改样式。 Expo 带有实时重新加载功能，让事情变得更顺畅。

更多信息在这里：https://docs.expo.io/versions/latest/workflow/debugging/

【参考方案2】：

不幸的是，您无法在 Chrome Dev Tools 中调试 VUE 文件中的脚本部分（您可以放置​​断点，但它们无法正常工作），但是如果您将方法放在单独的 JS 文件中，它就像一个魅力.我知道，这是一种解决方法，但不是很大的痛苦，而且效果很好。

查看我的 TODO 应用，例如：https://github.com/TheBojda/VueNativeTodo