每个 Bug 都值得认真对待:分享一个 debug 的案例,推荐给前端实习生参考

lxf2023-03-10 12:36:01

前言

最早听说 wangEditor 编辑器还是在 17 年,当时读王福朋大佬的 深入理解javascript原型和闭包 时提到的,作为国产开源项目,历经近十年依然在不断的技术迭代并使用 ts vdom 重构,真的很强。 近期有个文字编辑需求,用 textarea 效果总是不尽如人意,于是就上了富文本编辑器。

Bug 初现

首先安装下面两个包:

"@wangeditor/editor": "^5.1.0",
"@wangeditor/editor-for-vue": "^1.0.2",然后浅看下文档

这种项目一般是不依赖框架的,不过为了方便用户使用,官方还提供了 vue、react 组件,本着能不动手尽量 copy 的原则,我们用他的 vue 组件,然后意料之外的出现了警告:

vue.esm.js?4f66:5023 [Vue warn]: $attrs is readonly

vue.esm.js?4f66:5023 [Vue warn]: $listeners is readonly

每个 Bug 都值得认真对待:分享一个 debug 的案例,推荐给前端实习生参考

这个警告虽然目前看来并没有造成流程阻断,但确是个很大的隐患,一定要在上线前 debug 掉。

Debug & 修复

首先让我们熟练的打开 谷歌