美文网首页
vscode node_modules调试方法

vscode node_modules调试方法

作者: 一只重拾梦想的小水 | 来源:发表于2020-01-09 17:21 被阅读0次

    从一个令人疑惑的bug出发,debug更香哦

    一、bug介绍

    问题截图: image.png

    问题描述:看不出任何出错提示;第一次login跳转 /merchant/management会出错;刷新后正常;推断是management页面ssr有问题

    出错行:vue-server-renderer


    image.png

    二、经过一番缠斗,总结的node_modules调试方法:

    tips:
    只用vscode run;停掉其他(iterm等) // vscode的debug就相当于其他终端的npm run start
    设置正确的.vscode/launch.json: 除了环境变量其他一般是自动生成的 env=dev..
    npm run build:env=dev..

    截图示例:


    config
    breakpoint
    start
    debug

    三、Debug过程

    根据调用链推测出错的代码
    由于是children是array类型,推测是list页面。排除法确定出错位置在:
    return h('span', [undefined]) // Table组件的columns
    [undefined] 作为span的children 来render,导致出错
    所以client渲染(即刷新后)不会出错,server会出错。

    结论:Table组件和SSR有一方或两方不够完善

    // fix: 改自己的代码 T ^ T // 给vue提了一个PR,反正也不会被看到

    refer: https://code.visualstudio.com/docs/nodejs/nodejs-debugging
    // 没用到的refer: https://medium.com/nodesimplified/node-js-set-breakpoints-and-debug-node-application-with-chrome-devtools-14ad021deccc

    相关文章

      网友评论

          本文标题:vscode node_modules调试方法

          本文链接:https://www.haomeiwen.com/subject/hzzyactx.html