自學筆記
首发于自學筆記

Visual Studio Code调试和查看Flutter Engine源代码

这两天一直在用visual studio code观看代码然后用lldb进行调试,但是始终还是不大习惯那种全命令行的方式,所以在visual studio code的market还真找到了lldb的插件,利用上一篇的lldb的方法,其实就可以做到C++部分代码都能在visual studio code中断点浏览还有查看。

首先要做的就是直接在Flutter工程直接用visual studio code直接打开然后在market里面下载CodeLLDB这个插件,开头看里面介绍好像只有调试Native的功能,后面到他的github的wiki说明项里面发现原来是支持remote-debug的那么就好说了,以下链接是他的说明vadimcn/vscode-lldb,其中有关于remote的说明。

首先还是按照上一篇的方法将lldb-server推送到手机端然后通过下列命令启动

adb shell /data/local/tmp/lldb-server platform --server --listen unix-abstract:///data/local/tmp/debug.sock


之后调用起visual studio code的debug一栏界面,如下图所示

选择Add Configureation然后添加下列配置

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
  {
    "type": "lldb",
    "request": "attach",
    "name": "android_attach",
    "pid": "22138", // use ${command:pickProcess} to pick other users' processes
    "initCommands": [
      "platform select remote-android",
      "platform connect unix-abstract-connect:///data/local/tmp/debug.sock"
    ],
    "postRunCommands": [
      "add-dsym /home/daniel/Workspace/flutter/engine/src/out/android_debug_unopt/libflutter.so",
      "settings set target.source-map /home/daniel/Workspace/flutter/engine/src/out/android_debug_unopt /home/daniel/Workspace/flutter/engine/src/"
    ],
  }
  ]
}

然后直接F5直接跑起来,这时候会有debug console出来,完成后直接就可以在页面下断点,配合搜索功能现在浏览代码和看堆栈就方便多了,pid最好挂起之前用adb shell ps看下要attach的进程

ps:

add-dsym /home/daniel/Workspace/flutter/engine/src/out/android_debug_unopt/libflutter.so

这个配置是添加符号的,如果比如要调试android system webview的话并且iscomponent_build=true的话,那么这里就把你要映射的符号都加上,因为如果不是组件化编译很可能由于包过大安装不上,组件化编译后符号比较多,所以映射写在这里就省的一个个命令行打了

整个人神清气爽,果然编辑器的颜值还是挺重要的,比在Terminal那种丑陋的效果好很多,特别是近视没有代码高亮会瞎的,继续看逻辑。不过要图从下visual studio code的搜索功能跟vschromium那个插件相比真的是弱爆了,每次查函数的时候经常搜索不到


PS: 这里的方法其实也可以用来调试chromium中的webview的逻辑

编辑于 2018-07-02

文章被以下专栏收录