求求了，不要还看不懂错误信息了~

作为一名开发者，如果你连基本的错误都还看不懂，不知道怎么去排查。那我只能说：你是来拉 shi 的吧~

概览

通过本文我相信你将彻底知晓如何去排查处理开发过程中遇到的一些常见错误。

对于 undefined、null、is not function等 这类基本错误，你可以100%确定问题所在。并能快速去处理这类问题。

对于排查过程中，也可习得如何借助浏览器的开发者工具定位、调试等等。

前言

对于现代开发而言，无论是开发时编辑器、还是运行的环境时，易或是语言所提供的错误信息，已经相对来说很详细了，所以~ 千万千万不要因为看到它报错、它是英文、它是红色的而退缩。

首先呢，这个是我在 【万字长文】 中已经讲述过的啦， 可能文章太长，很多小伙伴没有耐心读完吧😓

1 如何定位问题

我可以很确信的说，大家遇到最多的问题，可能就是null、undefined、NullPointerException这类空指针问题了吧。 这类大概都是因为对象不存在/已销毁/已设置为Null等等情况导致的。

举个例子🌰(Vue项目，JavaScript语言)，如下图：

很明显的第一行

// 错误原因
TypeError: Cannot read properties of null (reading 'editingPanel')
// 翻译一下：
1. TypeError：类型错误
2. Cannot read properties of null：无法读取空的属性
3. reading 'editingPanel'：括号内是提示，读取 'editingPanel'

// 解释一下：
1. 类型错误：大说就是说这个错误的是哪一类
2. 无法读取空的属性： 这一类错误的原因， 说无法读取（空 null）的属性
相当于什么呢，在 js 中我们读取对象属性是 这样的： 
let a = {name:"属性内容"}；
// 读取 name :
a.name; // 得到 “属性内容”
3. 提示 读取的是 ‘editingPanel’， 
也就是说执行的代码是这样的：
null.editingPanel; 
// 相信看到这里，你恍然大悟了。

事实证明，英语还是需要补一补的，至少一些关键词你知道大概是什么意思吧。

继续分析看看具体报错代码，一定一定一定不要排斥，也不能排斥它。这是必经之路，不要看着就头大。且看下图👇

如图所示，有很多vue.runtime.esm.js?字样，翻译一下，大概是 Vue、运行时、esm、js；也就是说这是vue框架运行时需要的js文件；其中esm是(ECMAScript Modules)简写，又需要你自己去科普一下了。那么很明显，目前我们不用考虑点它看详情（排除法）；

进入正题，如我标注的①②③点，③：VueComponent.handleClick、②：VueComponent.preView以及①：VueComponent.show。可以看出，分别是，组件点击事件，组件preView，组件show。

我们先点击这个①，会跳转到对应代码位置：如下图

很明显这里的hiprintTemplate是null的，而这个hiprintTemplate是show方法传过来的。由此可知，我们应该点击去看看② VueComponent.preView， 如下图：

结合你自己写的代码，定位到在这里传的hiprintTemplate，我们就应该在这个文件里面去排查，是什么原因导致了 hiprintTemplate 变成了 null (这里是我故意设置的null)。 毕竟代码逻辑需要你自己捋清楚的。

至于第③：VueComponent.handleClick，如图：

其实就是一个Button组件，把 click 事件 emit 出来了而已。

通过这个例子，代码执行的顺序，分析的还算是很清晰的。 一步一步的分析，排查问题，排除问题。

没有读不懂的代码，只是你没深入去探索而已

2 官方文档 “很重要”

如果什么都百度去搜索，那你会发现，很多问题很吃力，总是搜不到自己想要的答案。

如果“官方”是负责，那么肯定会有其他人寻求过类似的问题帮助，人多了 “官方” 还是会出个 “常见问题” 说明吧。

就比如说我😄，之前vue-plugin-hiprint打印插件写了三篇常见问题文章。奈何很多人就是不去看🤷🏻‍♀️。

举个例子：浏览器开发者工具的使用；

我想试问，有多少人去看过官网文档？

看过的麻烦评论区留下你的脚印~

如下两张图:

如果你点开过设置，你会发现，这个开发工具是个庞然大物。 所涉及的东西、功能之多。

我们可以很清晰的看到，edge有图标可点击去查看官网文档。下图chrome也能找到前往官网文档的入口。

两者官方文档都相对清晰，各个面板(元素、网络、控制等等)都有对应教程。

一起来看个官方文档(edge为例)：

文档太长，仅截取了部分。

通过这个例子，希望大家能够认真的看看官方文档。

无论接下来你使用 xxx 框架、 xxx 工具 或是 xxx 语言。 相信你也能快速知晓如何上手新鲜事物。

当然也不是所有官方文档都比较详细~ 所以，先看，再去找资源咯。 路不是只有一条，但是官方文档还是很有必要去看看的。

3 学会调整 “思路/关键字”

有时候报错的内容比较多，无法一眼看出实际问题出在哪里，这个时候，只有根据自身经验去需求答案/帮助了。比如刚刚的问题，我们直接搜索会是这个样子：

不用猜，这些肯定不是我们想要的答案。 那么这个时候，就需要我们去调整一下思路了，比如想一想关键字，特定的语言/框架等等。那么试着先逐字翻译一下，当然如果本来就清楚一些关键词的意思那就能够更快理解了。

比如说某些关键字：unable to access、warning、Timed out、remove等等。 翻译过来一看，便能知个大概。

另外我们可以根据思路来排查问题。

比如：

• npm i的时候的报错
• 点击某个按钮的时候报错
• 新增某个依赖的过后报错

诸如此类的情况很多，有了大致思路，至少可以排除一些可能吧。

又或者我们根据环境来排查问题。

比如：

• Win平台问题
• NodeJs版本问题
• Webpack版本问题你
• Vite版本问题

问题有很多，试着切换一下你排查思路，或许答案离你越来越近。

无论是排查问题，还是编写代码，有一个清晰的思路很重要

总结

• *报错不要慌，仔细去看错误描述。*在不断熟悉了解的过程中，我相信你会逐步掌握快速定位问题这个必备技能

• 官方文档一定要去过一遍！
官方文档一定要去过一遍！
官方文档一定要去过一遍！

• 不要所有错误都只会复制错误信息去搜索答案；要动动脑子，动动手去逐词翻译，了解错误信息。整理思路再去寻求答案。

最后祝各位码友：少bug、少bug、少bug。没有bug那是不可能的，就不要奢望了。

都看到这了，不妨点个赞再走咯~ 当然关注一下也是可以的😄。