本文主要是介绍眼见不一定为实！记一次JS字符串查找过程中遇到的让人怀疑人生的Bug的修复过程，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1.浏览器坏了还是我的眼睛出问题了？开始怀疑人生。。。
首先，说一下发生问题的代码的场景，本来我是在写油猴脚本，不懂的可以百度一下，油猴脚本大体的用途就是可以让你在任何网站插入自己的JS代码并执行。
目标网站有一个很长的列表，我在目标网站插入自己的代码，代码的功能是添加一个按钮，按钮点击的时候 根据一个关键词数组在每个列表项里去查询是否包含可能的关键词。有几个列表项内容里包含了以下内容：
于是我想把以上2项内容 归类到一起 我使用了关键词 FCT 去查询所有列表项，结果代码没有查询到。返回一个空数组。着实让我很意外，因为我的代码是可以查询到别的关键词的，所以我没有怀疑是查询代码的问题。我觉得可能是 FCT 这个查询字符串的问题，于是 我重新刷新页面，等全部列表项加载完毕之后，我使用Chrome浏览器自带的查询功能（Ctrl+F）输入 FCT 字符串，更奇怪的事情发生了 ，Chrome也没有查询到相关的关键词。（不信的可以使用浏览器的查找功能看看能不能定位到这个 FCΤ） 我就纳闷了，我明明看见页面有好几个 FCT 为什么 浏览器说没有找到呢？？？我不解，我困惑。。。
2.根据经验进行初步的Bug分析
这时候，我以往的丰富的踩坑经验告诉我，页面显示的实际内容 可能跟我使用肉眼看到的内容 不一样。。那怎么验证呢？？
当你不确定页面显示的字符是什么的时候，或者不知道怎样使用输入法打出那个字符的时候，有一个简单的小技巧，那就是使用复制功能。这个小技巧经常使用在设置一些软件的特殊昵称的时候派上用场，比如你想在自己的昵称里加上 π 或者 ☺ 这时候 靠拼音 你是不能打印出这些字符的，这时候 你就可以使用 输入法的特殊符号也行 ，百度相关页面 然后去页面复制这些符号也行。然后就可以粘贴到你需要设置特殊昵称的软件里面了。
言归正传，我使用上面的 FCT 去搜索查询列表项，结果没有找到，那么有一种可能性：页面显示的肉眼看起来像是 FCT 但是实际上可能不是 英文字母的 FCT ，那我们怎么验证呢？
有些朋友应该已经想到了，我们可以使用上面的复制的方法，这时候我打开了Chrome浏览器的开发者工具，然后选中其中一条列表项，在控制台测试了以下代码，先给你们看一下结果，看看有人能看懂不。
对于不熟悉前端的开发者，我先解释一个东西，上面的$0代表我选中的那个HTML元素
我来逐条解释一下 每行代码执行时的环境和意思
1.输出HTML元素包含的文本内容，就是页面看到的内容，这里很清楚的能看到 内容 包含 FCT
2.我在HTML文本内容里查询 FCT ，这个字符串是我手动输入的，执行结果false表明 没有查询到，虽然上面代码的执行结果里 看着 明明有一个 FCT。。。
3.这个结果就神奇了 ，这个结果是true 标明查询到了，为什么这个看起来和 上面 第二部的 一模一样，执行结果却不一样呢，这个跟第二部手动输入的 FCT 不同的是 这个是我 通过切换到 element面板 使用右键复制出来的内容，并不是手动输入的三个字母，结果就是true了。。。
这时候我拿出了文件比较的神器---Compare
新建2个文本文件：
1.TXT 手动输入 FCT 三个字母
2.TXT 通过element面板复制得到长得像FCT的三个字符
然后进行比对，一比对，果然结果表明两者不一样。。
记事本打开，两个文件看起来都像是 FCT 但是在Compare里 却变成了上图。
虽然不清楚为什么 T 变成了 韦 ，但是至少说明两个文件的内容 是不一样的。
这里基本上可以断定 页面显示的内容 和 我手动 输入的 FCT 三个字母是 不一样的。
肉眼看起来是一样的内容，实际上 是不一样的！
这里，我要插入一个很宝贵的经验：做开发，要使用工具去比较文件是否一样，不要肉眼比较！
3.深入分析和定位出现Bug的原因
上面我们已经知道，页面的显示内容肉眼看起来像是 英文字母 FCT，但是实际上不是，下一步我们就要断定，到底问题出在哪个字母上面，或者页面显示的内容到底是什么？？
这时候我又拿出来了控制台 然后测试代码 具体请看以下截图：
由上面的截图的执行结果可以看到，在页面内容里能查询到F、FC，但是查不到FCT，由此可以断定 问题出在 字母 T 上面，现在还不知道这个长得像T的字母到底是什么。
真的万万没想到，万万没想到啊，一大群英文字母里混入了一个长得像英文字母，但是实际上不是英文字母的字符。。。
这时候，我们百度 “像T的字母”，搜索结果前几项就能看到一个 希腊字母里 有一个像 T的字母，
还能看到怎样输出这个字符：点输入法栏--菜单--软键盘--希腊字母
这时候我还是在控制台测试代码 先写上FC然后使用上面的方法输入这个T 然后发现果然查询结果是true 标明 这个字符就是希腊字符。。。我们上面不是说 Chrome浏览器自带的查找 也没找到吗，现在还是使用同样的方法去Chrome的查找框里输入，发现 FCT内容也能查询到了。。。
至此此次神奇Bug的分析已经完成。
4.解决Bug之后的问题思考和扩展
后来过了几分钟，我脑子中突然闪现，这个可以当成一道装逼的面试题啊，请看下面的表达式执行结果，问：为什么是false。
后来，想了想，还是不够迷惑人，只有一个字符 容易被识破，得加一些干扰字符，于是就是优化改造得到了下面的表达式：
这个表达式 能够唬住很多人吧，哈哈。原因有2个：
1.比较的字母是多个，增加找出出问题的那个字母的难度
2.JS里有 true，而此处是 True 多多少少会给回答问题的人增加一些分析问题时候的干扰
哈哈，觉得今天的这个Bug，挺有意思的，所以在此记录一下。也希望能给以后遇到类似问题的兄弟们一点提示和帮助吧。
最后，再说一遍：做开发，比较内容一定要使用工具！不要肉眼比较！！！
这篇关于眼见不一定为实！记一次JS字符串查找过程中遇到的让人怀疑人生的Bug的修复过程的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
