V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
leegoo
V2EX  ›  问与答

老哥们,问个 WebStorm 调试 vue2 项目,无法调试.vue 文件问题

  •  
  •   leegoo · 60 天前 · 723 次点击
    这是一个创建于 60 天前的主题,其中的信息可能已经有所发展或是发生改变。

    下了一个 vue2 项目,想在.vue 文件里面打断点

    在 WebStorm 中,按照网上的教程 配置了 JavaScript Debug,如下图 image.png

    先用 npm run dev 启动,然后再启动 JavaScript Debug ,这样我发现只能在 js 上面打断点有用, .vue代码中打上断点 没有打勾的标记

    我观察了一下 package.json 文件,大致启动内容如下:

      "scripts": {
        "local": "vue-cli-service serve --mode local",
        "dev": "vue-cli-service serve --mode dev",
      },
    

    尝试 修改dev配置为 vue-cli-service serve --mode dev --debug ,还是没有用

    也查看了这个配置https://juejin.cn/post/7077813962993041421 调整 vue.config.js 文件中添加 devtool

    还是无效

    其他信息:

    OS:windows11
    
    
    WebStorm 2023.3.5
    
    
    vue: 2.7.14
    
    
    npm -v:5.6.0
    
    
    node -v:v9.11.2
    
    
    vue-cli-service:版本全局搜索没找到
    
    
    npm list vue:  [email protected] (只有这一个)
    

    webstorm debug 配置未调整

    image.png

    image.png

    0.0 我只想调试一下,咋这么难...

    java 党,用 IDEA 习惯了,所以玩下前端 自然就用的 webstorm

    4 条回复    2024-04-20 17:23:02 +08:00
    kylebing
        1
    kylebing  
       60 天前
    从没用过编辑器的调试,都是用浏览器的。
    Chrome 下载一个 vue.js devtools 插件,里面会显示实时的 vue 组件、VueX 、VueRouter 、Pinia

    leegoo
        2
    leegoo  
    OP
       60 天前
    @kylebing 这个组件我安装了,似乎没有断点的功能
    soya2
        3
    soya2  
       59 天前
    写 debugger 吧,在 ide 里调试这些 web 框架属实有点难搞
    leegoo
        4
    leegoo  
    OP
       59 天前
    @soya2 写个 debug 是可以断点,但是在.vue 文件里面,变量值都显示不出来(实际上有值的 在断点上 可能是 undefined 或者直接报错...)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3588 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 00:53 · PVG 08:53 · LAX 17:53 · JFK 20:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.