前端线上问题如何调试
记录Vue开发过程中遇到的问题,测试环境以及本地显示都没有问题,但是一上线就出现问题,于是对于这个问题进行排查,在此记录排查问题的步骤以及方法,希望对大家有帮助。
错误信息:Uncaught TypeError: Cannot read properties of undefined(reading ‘refs’)
更新:我觉得devlopment
环境下报警告而production
环境之间报错的处理不够友好
于是我给Vue
提了一个issue
,希望能做些优化,具体的问题读完全文后不懂的话可以去看这个issue
此项目是基于naive-ui+vite进行开发的
线上报错信息以及显示如下:
测试环境和本地显示如下:
如何查找问题?
先确定问题出在哪里,尽管这是线上环境,但是我们依旧可以从报错信息里找到对应的错误文件。
打开错误的更多信息进行文件查看,这里一看全是打包后的文件,根本不知道是哪个文件。
所以我们可以利用
sourcemap
来重新打包,附上vite
的配置
export default defineConfig({plugins: [vue(), vueJsx()],build: {// 开启sourcemapsourcemap: true,}, })
- 利用http-server进行本地打包,然后在浏览器上查看打包的问题,因为是线上问题,所以利用库打包并进行 debug。
这里我们看到了错误的相关文件,只需要顺着相关文件去查找问题就行。
先利用现有的信息去谷歌搜索,因为很多时候这样的问题已经有人遇到过了,所以检索获取结果是最快的问题解决方案
通过谷歌搜索我们可以看出有很多条问题,那些相关的问题都可以点击去看看,是否有符合你的解决方案。(比较好的答案有GitHub
的issue
和stackoverflow
以及掘金上的答案)
我直接点进去上图中框选的那条信息
根据问题结果去反查错误的相关文件,如果是相关问题就直接解决,推荐大家多用 vscode 的全局搜索比较方便
,文件内的话多用 ctrl+f
搜索
如果网上的答案都不能解决你的问题,那么就需要开始自己
debug
了首先我根据错误点进去查看,看看是什么引发的错误
发现是在
owner context
上取refs
时无法取到,也就是说owner
是undefined
了在往上看,发现这是个
production
上会报的错误,但是其实本地也会报,于是可以转为本地debug
了当然本地无法调试的情况,那么就根据文件报错的地方进行
debugger
,然后重新打包调试。
在本地服务上进行调试
可以看到确实有警告信息了,通过源码就知道了为啥只有production
上会有问题了,而其他环境则不会有问题。
当然这也侧面印证了我们在开发过程中也需要多多注意警告⚠️
发现在Test
文件,上面都是一些naive-ui
的组件,并且还是某一条row
造成的,于是去查看对应的row
的数据以及columns
数据的构造。
通过debugger
发现构造的cell
数据的ref
是false
继续往下进行 debugger
, 发现走入到setRef
里面了,并且把ref
为false
传入了。
到了这里就发现问题了,就是因为这个 cell
的 ref
被编译成了false
了。
发现问题后开始解决问题,如果有简单的编译原理知识是更好的,没有也不重要,只要顺着调试线继续走下去就能解开一团乱线。
从上面我门知道
patch
的是两个vnode
(类型也是很重要的,它让你不需要有那么多的背景知识可以快速解),那么我们就需要从vnode
下手。找到生成
vnode
的ref
的地方。// vnode.ts function createBaseVNode(type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,props: (Data & VNodeProps) | null = null,children: unknown = null,patchFlag = 0,dynamicProps: string[] | null = null,shapeFlag = type === Fragment ? 0 : ShapeFlags.ELEMENT,isBlockNode = false,needFullChildrenNormalization = false ) {const vnode = {__v_isVNode: true,__v_skip: true,type,props,key: props && normalizeKey(props),// ref为false是因为props传入了false。。。ref: props && normalizeRef(props),scopeId: currentScopeId,slotScopeIds: null,children,component: null,suspense: null,ssContent: null,ssFallback: null,dirs: null,transition: null,el: null,anchor: null,target: null,targetAnchor: null,staticCount: 0,shapeFlag,patchFlag,dynamicProps,dynamicChildren: null,appContext: null,ctx: currentRenderingInstance} as VNode// ...}
于是回到
Test
的代码里面检查const columns = [// ....{title: 'Address',key: 'address',width: 100,ellipsis: {tooltip: true}},{title: 'Another Address',key: 'anotherAddress',width: 100,render(row) {// 当age大于40是会传入false,于是就G了const ellipsisProps = row.age < 40 && { tooltip: true } // debugger;return h(NEllipsis, ellipsisProps, () => row.anotherAddress)}} ]
总结
通过这次debugger
,确实有一些问题值得总结
- 写代码还是要细心啊,如果可能多补补脑子,少犯一些低级错误。
- 调试真的不难,开启
sourcemap
打上debugger
,一步一步调试,总能找到解决的线头。
前端线上问题如何调试相关推荐
- Web前端线上系统课-01-HTML+CSS/06-CSS盒子模型-CSS设置背景
CSS盒子模型-CSS设置背景 盒模型 margin <!DOCTYPE html> <html lang="en"><head><met ...
- 前端线上图片怎么生成马赛克?
前言 说起图片的马赛克,可能一般都是由后端实现然后传递图片到前端,但是前端也是可以通过canvas来为图片加上马赛克的,下面就通过码上掘金来进行一个简单的实现. 实现 实现过程 <img src ...
- 前端线上图片生成马赛克
前言 说起图片的马赛克,可能一般都是由后端实现然后传递图片到前端,但是前端也是可以通过canvas来为图片加上马赛克的,下面就进行一个简单的实现. 思路 最开始需要实现马赛克功能是需要通过canvas ...
- Web前端线上系统课-01-HTML+CSS/08-结构伪类-图形-字体-字体图标-元素定位
结构伪类-图形-字体-字体图标-元素定位 结构性伪类选择器 nth-child 父元素中的第n个子元素 nth-child(n) <!DOCTYPE html> <html lang ...
- coderwhy - WEB前端线上系统课全程直播课
链接: https://pan.baidu.com/s/1d6YONkCi4u7T1ZBm1yZLYg 提取码: iamh 作者-\/ 307570512 前端性能优化建议 性能优化是把双刃剑,有好的 ...
- 一道百度前端线上笔试题
要求: 输入两个字符串 strA 长度 1-50 只能包含 0或者1 strB 长度 1-5 可以包含 0或1或? (? 代表 0 或者 1) 例如: strA = '10 ...
- 云贝同城配送跑腿平台 v1.1.8_前端线传
备注:需要重新上传小程序 [新增]骑手接单限制 [优化]布局界面 [修复]一些已知的小问题 云贝同城配送跑腿平台 v1.1.8_前端线传.rar - 朋碰速云
- brook客户端android,Android端线上NativeCrash收集的两种方法(一)
Android端crash可分为Java层crash和Native crash,我们通常说的crash一般指的是Java层crash,Native crash主要指C/C++代码(其在Android工 ...
- pycharm连接远程服务器并进行代码上传+远程调试
Pycharm连接远程服务器并进行代码上传+远程调试 </h1><div class="clear"></div><div class=& ...
最新文章
- docker 鱼龙混杂之基础操作篇
- 【以太坊】javascript控制台完整交易流程
- C++中有string类,string是一个类不是一种类型,c语言中没有
- java动物飞翔接力赛源程序_java-submityourcode
- 在 SAP BTP Kyma Runtime 上使用 Redis 读取和存储数据
- 地大武汉的计算机网络工程师,2021年中国地质大学(武汉)电子信息(085400)计算机网络与信息安全技术及应用_考研专业目录_考试科目_考试范围 - 学途吧...
- 项目中使用 java函数式编程_函数式编程在Java8中使用Lambda表达式进行开发
- 做一个vue的todolist列表
- java class isassignablefrom_Java之——Class的isAssignableFrom方法
- apache2.4.39 php,win7 配置AMP环境(apache2.4.39 + php7.1.28)
- (22)FPGA软核、固核、硬核介绍
- Mysql中Key与Index的区别
- git命令详解( 六 )
- 快捷键截屏_Windows10自带截屏快捷键使用方法大全
- Android 硬编码
- 单片机 数字电压表(ADC0809)
- 提问的力量(一):提问在学习中的价值
- Python导出exe文件
- 彩色二维码如何制作?
- (新型事件相机有关的论文解读)A Unifying Contrast Maximization Framework for Event Cameras