友情提示：
-
如果只想看结论，直接从文末开始看；
-
有过“支付宝小程序开发经验”的阅读口感更佳；
-
只关注“秃发”问题的，也可以直接从文末看…
前言：很久没更新公众号文章了，今天恰好在开发支付宝小程序时，遇到一个有意思的前端技术问题，又无意间翻了一下自己最近的朋友圈，觉得有必要写一篇文章来证明 一下自己还是一个前端程序员.
想象一下：
如果某天回到家里，想找出自己小学毕业照，你会？
假设没带手机，来到一个陌生的城市，想最快了解当地所有餐馆口碑最差的的一道菜是什么？你又会怎么做？
又或者你的一位朋友在公司负责财务，结果由于种种原因，误把一笔100多万的资金打到了另一家有业务往来的公司，所幸还没撕破脸皮，但对方一直拖，这时你该如何帮到你朋友？
这都是些什么神仙问题…… 和 debug 有关吗？
……
……
……
扯远了，接下来是证明自己是一个前端程序员的过程了.
……
……
……
抱歉，拿错图了，
这次，没拿错 
（证明完毕，全文终）
真·言归正传
先看一下需求，将轮播图的指示点（indicator dots），从方的改成圆的。
尝试一：审查元素
是不是很简单？
审查元素，找到选择器名，然后，
一顿操作猛如虎，border-radius 百分之五……十，
就可以了
……吗？
的确，果真如此简单，也就不会有这篇文章了
问题出在，审查元素，无法定位到这个指示点，无论在 AXML 中，还是在模拟器中点选，都无法选中轮播图的指示点
就好比在超市里想买冷饮，饮料就在冷柜里，看得见；
但是有玻璃门给挡着，如果不动手打开门，就取不到里面的饮料。
回到上面的问题，现在的情况更复杂一些，这门似乎还有密码锁，正常手段（审查元素）还行不通。
而此时，XX 微微一笑，内心毫无波动：会被这么简单的问题难住？不存在的。
不然怎么对得起这么多年秃掉的头发？
根据经验尝试了审查元素无效之后，想到了最坏（花时间？）的方案是手写轮播图的指示点，至少理论上能满足业务方的需求
谜之音：怎么实现我不管，反正明天上线
当然，这是最坏的打算。
尝试二：官方文档
与此同时，打开了支付宝小程序的官方文档，发现 API 中与 dot 有关的有三个属性，
然而都无法满足设置 border-radius 以及改变宽高的需求
题外话：写这篇文章的时候去看了一下微信小程序的 swiper 的文档，也没有相关内容
尝试三：搜索引擎
官方文档未果，于是习惯性地打开了搜索引擎，输入了以下关键词：
“支付宝小程序 轮播图 指示点 自定义 样式”，
然后喜闻乐见地发现返回的结果十有八九都是某友商小程序，而非支付宝小程序。
抱着试试看的心态，看了几篇，大多数都是说“禁用 swiper 自带的指示点，然后 DIY 自己写一个”；
ps：有一个小细节，写这篇文章的时候才发现自己都没有点击过第二则搜索结果……
顺便题外话一下，《思考，快与慢》这本书里提到了人的大脑有两种工作方式：
系统1（无意识、快速）
系统2（审慎、缓慢）
有次偶然看到朋友分享了一本书《斯坦福商业决策课》的截图，书里作者自己编的一个系统3，不过挺有意思 ——
系统3：寻求工具、过程、数据和专家帮助
上面题外话不重要，由于刚才的搜索结果，几乎都是某友商小程序的，（唯一一个支付宝小程序的是官方文档），
所以这次改了一下搜索关键词
“支付宝小程序 轮播图 指示点 自定义 样式 -微信”
过滤掉包含“微信”的结果后，发现……
好像也并没有什么用
尝试四：问身边同事
到此时，差不多已经花了 30 分钟在这个问题上了，是时候骚扰一下同事了，然而大家也没有在支付宝小程序接到过这类需求，所以进入尝试五
尝试五：搜索引擎 v2.0
又在搜索引擎上随缘调整了几个搜索关键词，不过并没有实质性的进展；
尝试六：支付宝小程序开发者社区搜索
很快就转移阵地来到支付宝小程序开发者社区：
“轻轻一搜，万一解决了呢！”
尝试“swiper 轮播图 指示点 样式”，这组关键词
有几百条（805条）搜索结果，翻了几页，不过没能找到能解决问题的
题外话：写这篇文章的时候，到友商小程序的开放社区里试着用同样的关键词搜索了一下，结果如图，
简单粗略地修改了搜索词，倒也有大量搜索结果，不过没有找到相关可用的解决方案
尝试七：支付宝小程序开发者社区提问
至此差不多已经接近花了 1 个多小时时间了，这也是为啥会有这篇文章的原因.
头一回体验支付宝的开发者社区，于是抱着试试看的心态，简单描述了一下，发了个贴，提了个问题，
https://openclub.alipay.com/read.php?tid=13735&fid=65
提完问题，发现还需要审核，于是开始去做其他事儿了，偶尔刷新一下看这个帖子有没有审核通过；
ps：印象中微信小程序提问好像不需要审核？但也实在是记不清了，上一次在微信小程序社区提问好像还是2017年3月……已经两年前了
可能提交审核的时候恰好是午饭时间，审核的小哥哥小姐姐可能吃午饭去了，下午1点多的时候看还在审核中；于是继续忙其他事情；
等到2点半左右看了下，有大佬回复了
验证可行
问题解决了，指示点从方的变成圆的了。
但看这篇文章的进度条，就知道后面肯定还有一堆“废话”。
首先，注意到回复帖子的的大佬，在截图后还有一句话：“但是不建议修改”，对于这句话，我还是很好奇为什么不建议修改的
其次，仔细看改完后的截图，发现指示点没有对齐；
按照刚才的思路，首先想到的是去找到父级的 class 名，于是跑到搜索引擎上搜索 wx-swiper-dot，对，没看错，就是 wx-swiper-dot ；
然后发现一篇文章里有个叫 wx-swiper-dots 的类名
于是尝试加了样式 .a-swiper-dots 发现并没有用……
作罢，简单加了个补丁：
.a-swiper-dot-active {
position: relative;
top: -2px;
}
还不错。
debug 过程到此就告一段落了，但这篇文章还得继续，不然对不起这个标题：
《认真 debug 可能就秃了》
设想，假如当时一直没有人回复我、或者没有有效的信息？
问题还是要尝试解决，接下来自己可能有哪些尝试？
以及，目前的解决方案是最优的方案吗？是否有更好的？
在这次 debug 过程中，有哪一步可以改进的？
OK，一步步来
未尝试的尝试八：民间小程序开发者社区搜索 & 提问
之所以第八步是这个，因为 2 年前踩坑微信小程序的时候，有一些民间的社区的文章很有价值，而且社区也很活跃。
XX 曾在某社区提过，也回答过一些问题。
未尝试的尝试九、十……：支付宝小程序开发者钉钉群提问 & 各类前端交流群提问
而最后会考虑的尝试，则是各类开发者交流群，之所以最后才想到群里提问，更多是因为自己的个人原因：意志力、专注力不够。
在群里发消息，很可能短时间内没有人回应，在群里等待的过程中，偶尔会刷到一些吸引眼球的内容，分散了注意力；或是不停地刷消息，或许会滋生焦虑。
为了避免上述分散注意力、焦虑，过去的做法通常是最后才考虑到群里提问；因为其他方式的求解过程自己都很明确自己这一步要做的事情，对自己的行为、期望都有把控。
这点或许平时自己没有意识到，因为平时解决这类简单问题的方法，基本都跟着直觉走，处于系统1模式（无意识、快速），然而在写下这篇文章的时候，好比是在用系统2（缓慢、审慎），重新审视了一下，而已。
尾声
一边审视自己，
一边审视自己掉的头发，
一边熬夜写文章，
顺便想到今天恰好是植树节，还刚收到快递，这两天被安利的一款治秃发套装……
刚入手，准备开始用，目前还不知道效果如何，打算用一个月看看效果如何……
植一棵（tou）树（fa）最好的时间是十年前，而后是现在；
十年树木，百年树人（fa）
共勉
小结
梳理一下，自己这次开发 & debug 的过程
-
明确需求 1min
-
审查元素 2min
-
明确问题 2min
-
官方文档 10min
-
搜索引擎 20min
-
身边同事 15min
-
搜索引擎 15min
-
官方开发者社区提问【问题解决】
-
描述问题 5min
-
等待审核 1h+
-
验证 5min
-
todo
-
民间开发者社区
-
官方开发者交流群
-
各个小程序交流群
-
各个前端交流群
-
这个做不了，砍需求
-
……
反思
debug 过程中，几个可能有助于更快解决问题的改进点
1. 改进点：第一次进行搜索时，如果点开了排在第二的搜索结果
现象：第二条结果给出的就是微信自定义轮播图 dot 的方法
问题：视觉盲区？
改进方案：至少保证阅读前三条搜索结果
2. 改进点：在支付宝小程序开发者社区进行搜索时，如果用对了关键词，就无需后续再提问了
现象：如果精简搜索词，只填写 swiper 指示点，就能发现可用的解决方案
问题：搜索词使用不当
改进方案：
-
提升一下搜索的能力
-
准确定义问题（如果已经确定了思路的话）
题外话：
-
支付宝文档的搜索匹配规则很有趣，输入得越多，匹配到的结果也越多（此处450条结果，而上文关键词“swiper 轮播图 指示点 样式”有805条；）
-
而微信文档的匹配规则，输入越多，则匹配到的结果越少
3.改进点：如果早点在支付宝小程序开发者群里提问，或许会有人能给出解答
现象：由于上文所说自己注意力容易分散，所以在没有花费太多时间之前，不愿意到群里提问，避免看到某些吸引目光的东西而分心，影响工作状态
问题：自身不够专注
解决方案：
-
选择性专注于自己解题相关的内容
-
尽量忽略无关信息
-
一旦不看群消息，就把聊天框切换到“文件传输助手”，眼不见为净
4. 改进点：这次遇到的问题，实际上已经分析出解决问题的方向，即：找到控制 swiper 的指示点的 class 名（选择器名），但没有好好加以利用
解决方案：
-
让自己的搜索关键词和自己分析的方向保持一致；
-
如果已经有了初步结论了，那么就更深入地设计搜索关键词：“小程序 swiper 指示点 class” 或者 “小程序 swiper 指示点 类名”，
5. 最近在看的一本书：波利亚《怎样解题》
书中在解题过程中划了几个重点，其中第一点，要：“深入理解题目”，而其介绍解题的思路也可以借鉴一下（虽然是教学生解数学题的）
顺便提一下，这本书上另外也有一点非常触动我，提出一个观点：
一个真心希望帮助学生的教师首先应该激起学生的好奇心，使他产生解题的意愿。 如果学生在学校中没有机会使自己体会到这种为解题奋斗而带来的各种情绪变化，他的数学教育就在最重要的一点上失败了。 波利亚 《怎样解题》
ps：突然想到自己两年前还简单整理了一下如何解决问题的思路，分为三步：
-
自己明白
-
电脑明白
-
别人明白
再次献丑……
https://github.com/xunge0613/front-end-practice-collections
所以，下次遇到类似问题，自己可能会采用套路：
0 ~ 30 分钟内
-
认真审题
-
自行分析解决
-
官方文档
-
官方开发社区搜索
-
民间开发者社区搜索
-
搜索引擎
30 分钟左右
-
问身边同事
-
在群里一次性、详细、规范地描述自己的问题（然后不去管它，去忙自己手上的事，提出那种不需要其他人追问的问题，让自己可以不用解释，解放自己注意力到其他事情上）
-
官方开发者交流群
-
各个小程序交流群
-
各个前端交流群
30 分钟 ~ 1 小时内
-
重新审视自己对于问题的定义与分析
-
在上一条基础上，随缘重试之前的方法
1 小时+
-
在开发者社区发帖提问
3 小时+
-
条件允许的话明天再来解决这个问题（说不定洗个澡就有灵感了）
10 小时+
-
这个做不了，看能不能砍需求……（开玩笑的产品大佬们别当真……）
以上，仅供参考；
而且只限定于解决一些相对简单的，且和文档强相关的问题，适用于小程序开发、antd 、 element ui 、taro ui 组件使用上的问题；
遇到更复杂或者更基础性的问题，还需要结合实际情况，三思而后行 ，
例如：
-
明天中午吃什么？
-
怎样哄生气的女朋友/男朋友？（首先，你需要……）
-
一星期发际线上移了 1cm，怎么办，急，在线等？
明确问题出在哪里很重要。如果一时间没有思路没关系，或许换一个角度，换位思考试试？亦或者上升一个维度，从更高的一个层面去考虑这件事情？又或者先把问题拆解成几个简单的小问题，分而治之……
解决问题的办法很多，可能更重要的是，在这个过程中，尽量保持头脑清醒、保持解决问题的驱动力、保护好你的发际线……
这篇文章写了大半的过程中，又突然开始反思自己为什么要写这篇文章，可能很重要的一个原因就是，前几天看自己公众号2个月没更新了，居然粉丝还净增长了十几个…… 觉得自己有点愧疚感，所以更新一下；
当然更多的还是为了抛砖引玉，希望各位大佬分享一下 debug 的姿势~
结论：
-
搜索：使用搜索引擎搜索的时候，用对关键词很关键；
-
迭代思考：设计搜索关键词，也是一个思考的过程，是一个不断地重新定义、定位问题的过程，应该跟着自己的思考进度不断动态地变化
-
专注：明确自己的目的是解决问题，那么就专注于解决问题，放下偏见、保持专注、对无关信息“视而不见”
-
思维盲区：从不同角度重试曾经用过的方法，或许是一个消除思维盲区、突破思维定势的办法
-
小技巧：
-
通过“-”运算符来过滤搜索结果
-
详细、规范地描述问题；抛出问题之后，不用管它，只要问题够好，等一会儿，可能答案自然就会有了
-
在详细、规范地描述问题这一过程中，说不定自己就会想到解决方案了
-
发际线自救计划：最近计划对左侧发际线用新买的生发套装， 右侧发际线用医院开的喷雾，28天后看看效果如何，回头会专门再写一系列文章来记录，欢迎围观
最后，欢迎大家留言、分享一下自己的 debug 经历 / 与秃发抗争经历
一句话：
认真 debug 未必会秃，熬夜写文很可能会秃
