「前端 BUG 录」记一次线上 Bug 排查过程：思否文章目录

昨天晚上为了参加「探索编码世界之旅 - 记我的第一份编程工作」，撸了一篇文章

结果发现目录结构没有层级

起初怀疑是我标题级别设置异常，通过反复查看 markdown 原文，并无异常
然后又对个人的历史文章，及月榜文章进行查看，层级全部丢失

通过上面的操作，我们已经可以确定只有两个可能：「官方故意拍平层级」或者「层级计算Bug」

官方产品逻辑变更的话，这个不用猜直接去群里问

我们直接通过前端手段来分析一波有没有 Bug

思否这种注重 SEO，一般都是 SSR 服务端渲染模版只出，思否之前是什么我忘了，现在是 NEXT
所以第一步要审查元素，提取关键特征 articleNavCard、article-nav-list、list-group-item-action

有了特征之后我们可以开始 Search

一般我喜欢先精确搜索，通过 Network 查看 Fetch/XHR 和 Doc 标签下的数据

哦吼，不是服务端渲染直出，那么本次行动大概率能定位到问题

接下来还有两个可能：「AJAX异步数据」和「前端数据计算」

接口不多，点开一看，没有目录相关的信息

我们已经可以确定了，这个逻辑是纯前端逻辑，接下来我们开启搜索大法

通过我们上面找到的特征，一下子就发现了渲染代码，那我们可以肯定 buildNavTitle 一定是有问题的，接下来我们可以断点调试、log 调试

我们可以逐行解析代码的意思，一行代码引起了我的注意 if (e.nodeName.substr(1, 1) === t) {

t 在上面是用于循环的，是个数值类型
.substr 是个字符串截取的，输出是个字符串类型
这会导致一个问题 '2'===2 各位明白我的意思吧？这个 if 永远都是 false

那么解决办法有多个

1. (+e.nodeName.substr(1, 1)) === t 左边转成数值
2. e.nodeName.substr(1, 1) === t.toString() 右边转成字符串
3. e.nodeName.substr(1, 1) == t 让 js 自己转类型

好了方案已经有了，那我们怎么测试一下呢？不能拿意淫的代码直接上线吧

这里有两个方法

1. 断点，然后把 t 改成字符类型，在控制台执行 t = t.toString()
2. 使用 log ，增加 t = t.toString()

这里我们用 log，然后刷新页面成功了。

到这里我们已经排查完成，前端同学可以改代码了

问题很明确，就是两个类型不匹配，导致永远都是 false

这里我们其实可以考虑在开发时使用 TS，如下图所示，编辑器会提示我们这是没有意义的