nachtmaar/flutter-vimspector.md Secret

## flutter-vimspector.md

      
    Raw
  

              flutter-vimspector.md
            
          
    How to debug a Dart or Flutter app with vim

I just got the debug integration for Flutter in vim running using vimspector. In order to not forget the config, I decided to quickly compile this readme.
The following manual uses Neovim v0.4.4 and vim-plug plugin manager.
Install

Install vimspector vim plugin by putting it into your neovim config:
~/.config/nvim/init.vim:
Plug 'puremourning/vimspector'
Install it:
nvim +PlugInstall
Install Requirements

brew install node # for running Dart-Code
brew install python3
pip3 install neovim

Dart-Code

Download Dart-Code debug adapter (this brings the debugging capabilities for Dart & Flutter):
git clone https://github.com/Dart-Code/Dart-Code
cd Dart-Code
Now we will build the debug extension. The goal is that the following file out/dist/debug.js is available after the build.
npm run build
file out/dist/debug.js
Configure Dart-Code Debug Gadget

Place this file in your vimspector directory (path might be different for you):
cd ~/.vim/plugged/vimspector

NOTE:

I was not able to install the gadget using install_gadget.py, so I wrote the .gadgets.json file instead directly by following this ticket.
./gadgets/macos/.gadgets.json:
{
  "adapters": {
    "dart-code-flutter-test": {
      "command": [
        "node",
        "${root}/out/dist/debug.js", // check that this file exists, if not go back to Dart-Code section
        "flutter_test"
      ],
      "type": "flutter_test",
      "variables": {
        "root": "/Users/nachtmaar/dev/repos/installed/Dart-Code" // change this
      }
    },
    "dart-code-flutter": {
      "command": [
        "node",
        "${root}/out/dist/debug.js", // check that this file exists, if not go back to Dart-Code 
        "flutter"
      ],
      "type": "flutter",
      "variables": {
        "root": "/Users/nachtmaar/dev/repos/installed/Dart-Code" // change this
      }
    },
    "dart-code-dart": {
      "command": [
        "node",
        "${root}/out/dist/debug.js",  // check that this file exists, if not go back to Dart-Code 
        "dart"
      ],
      "type": "dart",
      "variables": {
        "root": "/Users/nachtmaar/dev/repos/installed/Dart-Code" // change this
      }
    },
    "multi-session": {
      "host": "${host}",
      "port": "${port}"
    }
  }
}
The file contains two adapters. flutter_test is for debugging a flutter test and flutter is for debugging the actual application. You can refer to this in your .vimspector.json.
Vimspector Config

Put this config in your flutter app directory.
Flutter App

For debugging a flutter app use this config:
.vimspector.json:
{
 "configurations": {
   "launch": {
     "adapter": "dart-code-flutter",
     "configuration": {
       "request": "launch",
       "type": "flutter",
       "flutterSdkPath": "/Users/nachtmaar/dev/ext/flutter",
       "dartSdkPath": "/Users/nachtmaar/dev/ext/flutter/bin/cache/dart-sdk/bin/",
       "program": "./lib/main.dart",
       "cwd": "${workspaceRoot}"
     }
   }
 }
}
Flutter Test

For debugging a flutter test use this config:
.vimspector.json:
{
 "configurations": {
   "launch": {
     "adapter": "dart-code-flutter-test",
     "configuration": {
       "request": "launch",
       "type": "flutter_test",
       "flutterSdkPath": "/Users/nachtmaar/dev/ext/flutter",
       "dartSdkPath": "/Users/nachtmaar/dev/ext/flutter/bin/cache/dart-sdk/bin/",
       "program": "test/unit/locale_test.dart",
       "cwd": "${workspaceRoot}"
     }
   }
 }
}
Dart App

For debugging a dart app use this config:
.vimspector.json:
{
 "configurations": {
   "launch": {
     "adapter": "dart-code-dart",
     "configuration": {
       "request": "launch",
       "type": "dart",
       "dartSdkPath": "/Users/nachtmaar/dev/ext/flutter/bin/cache/dart-sdk",
       "program": "./test.dart",
       "cwd": "${workspaceRoot}"
     }
   }
 }
}
Debug It

Now everything is in place. Open the main dart file and start debugging by pressing F5:
vim lib/main.dart
Troubleshooting

If you see this error Request for initialize aborted: Closing down in the debugger, you are proably using the wrong debug.js from Dart-Code. Try to execute the file. You should get an output like this:
$ node "/Users/nachtmaar/dev/repos/installed/Dart-Code/out/dist/debug.js" flutter
(node:58379) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
More tips:

Check vimspector log file: ~/.vimspector.log

See all debug subcommands for Dart-Code: $DART_CODE_REPO/out/src/shared/utils/debug.js
Links

All the links I followed while trying to get vimspector running:
Dart-Code
vim-plug
vimspector github
Neovim
Vimspector custom languages wiki
Vimspector Dart Language ticket