从一个令人疑惑的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
网友评论