debug复盘 记错

首先是简单的经验

1. 不要用array[0]来判断空数组，有可能array[0]是null/undefined而后面有东西

Dec-25th-2017

项目中的google-map中的map.fitbounds(bounds)很诡异：使用后地图的center符合预期，而zoom该变的时候却没变。我进行了艰辛的debug，步骤如下：

• 比对能正常工作的demo
• 把相关代码从上述demo考到当前文件中试验，结果工作正常 => fitbounds没有打错字或者参数错误。
• 一步步注释掉所有和fitbounds无关的代码，进一步缩小范围。
• 最后锁定到这句google.maps.event.clearInstanceListeners(window.map);，也就是说，当你清除了map上的所有事件，fitbounds就不再正常工作了，what the hell?
• 前后花了相当多的时间和精力，回头看看，如果凭感觉找，谁能猜到是这句呢？看来应该规范化debug流程，总结一些套路，这对于提高效率大有裨益。
• 之后又出了个问题，收起ul的icon会导致地图右边出现空白，fitbounds解决不了，看了陈亮大佬的代码找到了解决方法：google.maps.event.trigger(map, "resize");

Feb-21th-2018

• 事情是这样的，在做HTML简历时，我用onWheel事件触发setState，触发一次增加1，测试的时候却每次都加2，百思不得其解，睡了一觉第二天早上很快就发现，onWheel事件在window上绑定了一次，在div上又绑定了一次，这样触发一次会加2.
• 在做简历的其中一个组件（第三页）时，一个处理数据的中间件函数对state中的数组用了shift方法，结果就是第一次渲染正常，从别的状态切换回来时数据都没了。纯函数的好处由此可见。

May-03th-2018

• B2B项目中，我写好了一个拼合两次异步操作数据的函数patchTable ，想把它import进组件时: import {patchTable} from '@/views/order/orderUtils' let patchTable = _.curry(patchTable )(this)，报错了：patchTable 为undefined，检查的结果令人沮丧，没发现有啥错误。
• 还好我读过阮一峰的es6教程，我反应过来关键在于let关键字，它有变量提升效应，会在所有代码运行前将该变量锁死，任何赋值行为都不允许，import自然也无法将函数导入变量patchTable，于是它从始至终都是undefined 。

May-30th-2018

• 我试图在一个vue组件的生命周期中使用console.log打印信息，但却报错。 原因在于我在该组件中注册了一个叫console的自定义组件，这导致console的命名冲突

June-15th-2018

• 使用new Promise()时，要记得用resolve来触发fullfilled，而不是return

July-9th-2018

• 不要用map来做forEach的工作，如果非做不可，记得return value。一旦链式调用map，且忘记return，必然导致失败。

July-11th-2018

• 写复制流程功能时，FlowWraper类中已经有了clone方法，然后加了一个generator叫*clone，结果是generator被覆盖，找了很久才发现。

September-13th-2018

• 前端导出excel功能，增加一列(新增字段)，新的一列死活出不来，但过程中的数据又都符合预期，于是我把目标限定在最后的输出阶段，如果有问题，这个问题一定会反应在输出excel函数的参数中;传递给导出函数的数据有两个:wb和wopts,我彻查了wb，果然发现了内部的ref字段是元凶。

Octobor-24th-2018

• pull --upstream时出错，直接reset --hard，直接退到了旧的一个版本，然后不停reset都找不到对的，最后大佬在reflog里找commit 用checkout看事件找回.
• git操作失误的解决方法: 一. reflog reset --hard 二.两个小时commit一次 三.实在找不回的时候用编辑器ctrl+z 四. 提交时一旦出现异常 先停下来理清思路 别急着reset

January-03th-2019

• 由于gitlab改版，push的分支错了,直接到了master

January-16th-2019

• 开发chrome插件，目的是拿到当前页面的url来判断解析html的方法。
• 一开始的方向就错了：在content_script中获取，每个iframe都会引入content_script，这导致url有多个，还有其他问题不再赘述。这浪费了大量的时间。
• 之后突然想起chrome 在 background 中有提供获取当前tab信息的API，目的达成
• 另外在3月四日，张七星那边登录不了，经查是因为当时提交后为了之后的修改安全和方便把url换回了localhost，且默认url设置成了url.dev，而此时dev的url已被删除。教训：交付的代码应至少临时再检查一次，且不应再因这种原因在完成后另改代码，交付的代码应是仓库中的而不是本地的。

Feburary-22th-2019

• 自定义度量编辑器

March-14th-2019

• 一个纯前端的bug测试服有，本地一样的代码却没有，于是test-build到本地，node . 用build出来的文件起本地服务器，发现没有bug，于是线上重新build解决了线上问题。但后来本地npm run dev页面却变成了空白，原因是之前test-build时把windows的环境变量NODE_ENV永久设置为"test"，删除该环境变量后恢复正常。教训是最好设置暂时的环境变量。

March-15th-2019

• 在react的componentWillReceiveProps中很容易犯的错误:该用nextProps的时候用了this.props，好几次了，不要再犯。

April-1st-2019

• 用 superagent 写爬虫抓取数据，网页是用.NET apsx 写的，查询时发出 post 请求，表单含有四个有用字段和__VIEWSTATE __EVENTVALIDATION，其余字段为空，先是用postman照抄各字段，要么超时，要么返回报错的html，而脚本抓取则要么超时要么报错。后来发现脚本抓取的超时其实是结尾没有打印响应的数据，实际上正确的数据已经返回。当然，这个错误很智障，分析过程可以得出以下经验：postman要么是我没用熟要么是有问题，参数格式都对却结果与脚本和浏览器不同，下次涉及postman要更加多留个心眼，由于postman的结果经常出现超时，我对于脚本没有反应的情况更加没有怀疑而以为是超时，更难注意到没有打印这种低级错误(还有一个原因是之前每次500报错，superagent都有打印报错，我误以为是每次响应返回都有打印)，其实后来也有严重怀疑是一个低级错误，但终究没有发现。

July-23th-2019

• 从前端 的 webpack-dev-server 用 http-proxy-middleware 代理到 后端 localhost:55007 接口, 却一直 504(代理超时), 以为是 http-proxy-middleware 配置的问题，但不是，想到可能是 hosts 的问题，但浏览器可以访问 localhost，就觉得不应该，甚至用了 wireShark 抓包，也分析不出什么，后来发现确实 /etc/hosts 被 ihosts 清空了，也就是 localhost 对 127.0.0.1 的映射关系是在 hosts 实现的，结论是这种能改 hosts 的软件要小心使用，且浏览器识别 localhost 不依赖于 hosts 文件。

September-23th-2020

• 搭建复制AiNTA的项目，发送登录请求时，发现 axios 发送的post 请求变成了 get 返回码是 302，分析后发现本地的服务是 http 而 服务端是 https，等于说对着 https 的服务发了 http 请求

Jan-14th-2021

• const answerTable = Array(m + 1).fill(Array(n + 1).fill(0));
• Array. fill 中如果是引用类型万不可fill({}), 这会导致数组里面全部是同一个对象，产生莫名其妙的现象