使用 indium 调试 vuejs 程序

有一段时间没折腾 Emacs 了哈哈, 近期写前端代码比较多,调试多是 console.log 可是看着别人在 ide 里面, F10,F10,几下就知道变量的值,总觉得自己有点愣。 在接触 emacs 的这段时间,印象中有一款插件 indium 可以调试 js, 今天就试了一试,踩了很多坑。

Sep-25-2020 23-31-29

在 vue 项目里面创建 .indium.conifg, 内容如下

{
  "configurations": [
    {
      "name": "Web project",
      "type": "chrome",
      "root": ".",
      "url": "http://127.0.0.1:8081/",
      "sourceMapPathOverrides":
      {
        "webpack:///src/": "${root}/src/",
        "webpack:///./~/": "${root}/node_modules/",
        "webpack:///./":   "${root}/",
        "webpack:///":     "/"
      }

    }
  ]
}

vue.config.js 里面配置

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

indium 安装

(use-package indium
  :hook ((js2-mode . indium-interaction-mode)
         (web-mode . indium-interaction-mode))
  :config
  (add-hook 'js2-mode-hook #'indium-interaction-mode)
  (add-hook 'web-mode-hook #'js2-minor-mode))
  • ~M-x~ indium-launch
4 个赞

沙发点赞,哈哈哈哈

板凳点赞。。。

有啥坑么?介绍下呗~

  1. 需要vue 生成器soucemap
  2. “webpack:///src/”: “${root}/src/”, 这个要放到soucemappathoverride 最上面
  3. webmode 要启用js2-minor-mode 否则不显示参数信息

请教一下,在Emacs里写vue用什么major mode?有什么好用的插件推荐吗?Google了几个,好像都不怎么维护了。在学习vue :pray:

我用的是 web-mode, 补全用 Lsp-mode

1 个赞

indium 看起来不错。和 dap-node 比较呢?有大侠看过没