easy-team/egg-vue-typescript-boilerplate

提供的debug模式不能用

funkyLover opened this issue · 11 comments

funkyLover commented

使用debug模式启动

npm run debug

结果访问对应的应用如下图所示

屏幕快照 2020-01-14 17 16 32

还有希望可以提供vscode debug的配置例子

hubcarl commented

devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9999/ws_proxy chrome 可以调试

hubcarl commented

按 F5 调试前确保项目中存在 .vscode/launch.json 文件

{
  "version": "1.0.0",
  "configurations": [
    {
      "name": "Launch Egg Vue",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "npm",
      "windows": { "runtimeExecutable": "npm.cmd" },
      "runtimeArgs": [ "run", "debug" ],
      "console": "integratedTerminal",
      "protocol": "auto",
      "restart": true,
      "port": 9229,
      "autoAttachChildProcesses": true
    }
  ]
}

调试时，请按F5 按钮，然后会出现如下效果，表示可调试

image

image

funkyLover commented

@hubcarl 太棒了有vscode的配置指引👍👍👍

但是前端页面卡住的问题还是存在，用debug模式运行时没办法打开前端页面

funkyLover commented

试了一下请求 http://127.0.0.1:7001 ，按照路由规则应该是会到 AdminController#home 中去才对，但 controller 里面的断点没有响应， 前端展示的依然是 webpack正在努力编译中

然后关掉 debug, 在重新启动之后，看 vscode 界面感觉所有的断点都失效了

屏幕快照 2020-01-16 10 52 58

funkyLover commented

目前定位到这里

https://github.com/easy-team/egg-webpack/blob/master/lib/mult-process-server.js#L33

这里是会计算编译数量？但是dev和debug模式运行最终的 compileDoneCount 数量不一致

这里只有state为ture时才会发送一个webpack构建状态更新的消息，而debug模式运行时这里的state为false

奇怪的是当我把这里改过来之后，还是返回的那个webpack正在努力构建中..的loading页面，不知道为啥

还烦请帮忙看下

hubcarl commented

@funkyLover 我这边没办法重现，你这边既然找到原因了，可以继续找出问题原因，然后可以提个 PR

funkyLover commented

目前定位到的只是构建结果的位置，离搞清楚整块逻辑还有很远的距离

居然不能重现吗，我这边是用mac机的，不确定是不是平台兼容？

下面是我的环境信息

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    Yarn: 1.7.0 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 79.0.3945.117
    Firefox: Not Found
    Safari: 13.0.2
  npmPackages:
    @vue/component-compiler-utils:  3.0.2 
    babel-helper-vue-jsx-merge-props:  2.0.3 
    easywebpack-vue: ^4.2.1 => 4.5.0 
    egg-view-vue-ssr: ^3.0.5 => 3.3.1 
    egg-webpack-vue: ^2.0.0 => 2.0.2 
    typescript: ^3.0.0 => 3.7.2 
    vue: ^2.5.0 => 2.6.10 
    vue-class-component:  6.3.2 
    vue-entry-loader:  1.1.3 
    vue-eslint-parser:  2.0.3 
    vue-hot-reload-api:  2.3.4 
    vue-html-loader:  1.2.4 
    vue-loader:  15.7.2 
    vue-property-decorator: ^7.2.0 => 7.3.0 
    vue-router: ^3.0.1 => 3.1.3 
    vue-server-renderer:  2.6.10 
    vue-style-loader:  4.1.2 
    vue-template-compiler:  2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.0.1 => 3.1.2 
    vuex-class: ^0.3.1 => 0.3.2 
    vuex-router-sync: ^5.0.0 => 5.0.0
hubcarl commented

@funkyLover 可以试试显示指定 webpack 配置方式，也就是不走 多进程编译模式 https://github.com/easy-team/egg-vue-typescript-boilerplate/blob/master/config/config.local.ts#L27