VSCode开发flutter调试

请教各位。使用vscode打开flutter的两个项目,一个有chorme调试设备的选项,另一个没有,为什么?,怎么搞出来呢?

img

img

应该是你另外一个项目没有启用web支持
flutter config --enable-web
到项目目录下运行这个命令支持web应该就可以了

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 建议你看下这篇博客👉 :vscode运行第一个Flutter项目的一些小结
  • 除此之外, 这篇博客: vscode中chorme调试中的 设置一个断点 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

    1.在src/views/user/index.vue  line181行打个断点,这里是成功回调函数返回结果

    2.在根目录打开你惯用的终端并使用 Vue CLI 开启这个应用:

    npm run serve

    3.来到 Debug 视图,选择 ‘vuejs: chrome/firefox’ 配置,然后按 F5 或点击那个绿色的 调试按钮。

    4.随着一个新的浏览器实例打开 http://localhost:9527,你的断点现在应该被命中了。出现如下界面就可以开始调试了。

  • 以下回答来自chatgpt:

    我可以为您解答这个问题。

    针对您的问题,您需要在.vscode文件夹中找到settings.json文件,添加如下配置:

    "dart.flutterSdkPaths": [
        "/path/to/flutter/bin"
    ],
    "launch": {
        "configurations": []
    },
    "flutter.createWebviewScaffold": true,
    "dart.sdkPath": "/path/to/dart-sdk",
    

    其中,"/path/to/flutter/bin"为flutter SDK的路径,"/path/to/dart-sdk"为Dart SDK的路径,可以根据自己的实际路径进行替换。

    此外,您还需要在插件Marketplace中搜索并安装"Flutter"插件,安装完成后,在Debug页面中可以看到"Add Configuration"选项,然后选择"Flutter"即可。

    注意:如果您在打开的flutter项目中已经安装了"Flutter"插件,但是调试设备选项没有出现,可以尝试在.vscode文件夹中找到settings.json文件,添加如下配置:

    "debug.openDevTools": "debugger",
    "debug.allowConditionals": true,
    "debug.allowCustomRunCommands": true,
    "debug.inlineMode": "hover",
    

    以上是我对您的问题的解答,希望能够帮助到您。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^