Skip to main content

06 neovim调试Flutter项目

说明

neovim的调试方式有2种，分别是vimspector和dap,本次示例采用的是vimspector插件来实现，调试功能。 那么vimspector是如何实现调试功能的？vimspector本质是没有调试的，它是通过本地项目的根目录下的.vimspector.json和 .gadgets.json的来得知项目的调试器的启动器（launcher），从而调用相关的launcher来 实现项目的调试功能的。 换言之，本文主要就做3件事，

  • 1 安装vimspector插件
  • 2 装好调试的启动器
  • 3 最后在项目的根 目录下配置好vimspector调用的调试功能的启动配置文件。 做完这3件事后，就能实现在nvim上开发调试 fluuter.

1 准备工作​

1.1 python3环境和相关依赖​

$ brew install python3 #安装python3
$ pip3 install neovim # 安装python的neovim依赖

1.2 node和git依赖工具​

$ brew install node # node 环境
$ npm install -g pnpm
$ grew install git

1.3 flutter环境​

如果本地没有fluuter开发环境的话，请能官方进行下载对应的sdk,

  • 本文假设您把flutter SDK开发工具放在了/Users/wuchuheng/flutter/bin/flutter这个目录下
  • 并配置好了环境变量,如果没有，把这个export PATH=$PATH:/Users/wuchuheng/flutter/bin写到自己的shell配置文件中，如~/.zshrc或~/.bashrc或其它之类的

更多的安装说明，请参考官方文档说明

1.4 其它说明​

本文假设你是使用 packer 的插件管理工具在管理nvim的所有插件的前提下，进行的。

2 安装vimspector插件和配置​

2.1 安装vimspector​

plugins.lua
local packer = require('packer')
local api = vim.api

packer.startup({
    function(use)
        -- ... g
        use({
            'puremourning/vimspector',
            config = function()
            -- 当插件安装成功后就会加载 plugin-configs/dap/init.lua的配置文件
                require('plugin-configs.dap.init').loadConfig()
            end
        })
    end
})
-- ...

然后运行:PackerSyn

2.2 添加配置文件​

plugin-configs/dap/init.lua
local Module = {}
-- 加载keybindings.lua快捷键配置文件
local keybindings = require('keybindings')

function Module.loadConfig()
    keybindings.dap()
end

return Module
plugins.lua
local map = vim.api.nvim_set_keymap
local keybinding = {}
-- ...
-------------------------------------------------------------------------------
--                          Dap配置
-------------------------------------------------------------------------------
function keybinding.dap()
    -- 开始
    map("n", "<leader>dd", ":call vimspector#Launch()<CR>", opt)
    -- 结束
    map("n", "<Leader>de", ":call vimspector#Reset()<CR>", opt)
    -- 继续
    map("n", "<Leader>dc", ":call vimspector#Continue()<CR>", opt)
    -- 设置断点
    map("n", "<Leader>dt", ":call vimspector#ToggleBreakpoint()<CR>", opt)
    map("n", "<Leader>dT", ":call vimspector#ClearBreakpoints()<CR>", opt)
    --  stepOver, stepOut, stepInto
    map("n", "<leader>dj", "<Plug>VimspectorStepOver", opt)
    map("n", "<leader>dk", "<Plug>VimspectorStepOut", opt)
    map("n", "<leader>dl", "<Plug>VimspectorStepInto", opt)
end

return keybinding

2.3 修改过的文件​

├── init.lua                 # 入口文件
├── lua
│   ├── keybindings.lua      # 快捷键映射配置文件
│   ├── plugin-configs
│   │   ├── dap
│   │   │   └── init.lua     # vimspector 配置文件
│   ├── plugins.lua          # 插件配置文件

3 安装调试器​

Dart-code是vscode的一个插件，vimspector就是通过测试Dart-code的启动器来实现 对fluuter的调试功能的. 在本文中，把Dart-code安装于/Users/wuchuheng/Dart-Code

$ cd ~
$ git clone https://github.com/Dart-Code/Dart-Code
$ cd Dart-code 
$ pnpm install
$ pnpm build #

最后得到2个参数用于fluuter项目调试配置用：

  • /Users/wuchuheng/Dart-Code
  • /Users/wuchuheng/Dart-Code/out/dist/debug.js

4 调试fluter项目​

4.1 创建fluter项目​

$ flutter create flutterdemo # 创建项目
Signing iOS app for device deployment using developer identity: "Apple Development:
root@wuchuheng.com (93QUDJ9XV9)"
Creating project flutterdemo...
Running "flutter pub get" in flutterdemo...                         4.0s
Wrote 127 files.

All done!
In order to run your application, type:

  $ cd flutterdemo
  $ flutter run

Your application code is in flutterdemo/lib/main.dart.
$ cd flutterdemo # 进入到项目中

4.2 配置调试文件​

$ fluuter devices # 查看设备
Android SDK built for x86 (mobile) • emulator-5554 • android-x86    • Android 11 (API 30) (emulator)
macOS (desktop)                    • macos         • darwin-x64     • macOS 12.3 21E230 darwin-x64
Chrome (web)                       • chrome        • web-javascript • Google Chrome 103.0.5060.114

.vimspector.json
{
 "configurations": {
   "launch": {
     "adapter": "dart-code-flutter",
     "configuration": {
       "request": "launch",
       "type": "flutter",
       "args": ["-d", "emulator-5554"], // 选择设备
       "flutterSdkPath": "/Users/wuchuheng/flutter/", // 选择fluter SDK
       "dartSdkPath": "/Users/wuchuheng/flutter/bin/cache/dart-sdk/bin", // 启动目录
       "program":"./lib/main.dart",
       "cwd": "${workspaceRoot}"
     }
   }
 }
}

.gadgets.json
{
    "adapters": {
        "dart-code-flutter": {
            "command": [
                "node",
                "${root}/out/dist/debug.js", // 调试器的启动文件
                "flutter"
            ],
            "type": "flutter",
            "variables": {
                "root": "/Users/wuchuheng/Dart-Code" // Dart-code 目录
            }
        }
    }
}

4.3 开始调试项目​

打开nvim后，在lib/main.dart进行断点<leader>dt,并启动调试<leader>dd

5 小结​

到此,调试功能就算是实现了，但更多的功能还需要参考vimspector的文档,输入:vimspector查看 本地的文档。再根据自己的需求去定制。

参考资料​

How to debug a Dart or Flutter app with vim