常见Bug总结技术分享

网易教育产品部前端周会

前端开发工程师曹欢欢 （ ch19900606@gmail.com）

“如果你交给某人一个程序，你将折磨他一整天；如果你教某人如何编写程序，你将折磨他一辈子。”

ftl模板

//ftl模板，?html存在bug
//存在的地方比较多，bug可能还未出现
<#if webUser.nickName?exists>nickName:"${webUser.nickName?html?js_string}"...
					

当字符串含有\r或\n时，使用?html会出现换行，如果包裹在js代码中，会导致代码执行不正常。

坑爹的坑

0.39 * 10 = ？
0.59 * 10 = ？
0.69 * 10 = ？
					

在ie下，会自动整理属性，把datasrc属性，改成了dataSrc

0.39 * 10 =

0.59 * 10 =

0.69 * 10 =

语法兼容性

//时间初始化
new Date("2015-10-30 23:59:59")
//有问题吗？
					

//标准方法
var _date = new Date()
_date.setYear(2015);
_date.setMonth(10);
...
					

IE7以下 不支持display:inline-block

IE8 不支持element.insertBefore()，其他浏览器支持的

手机浏览器 不支持outerHTML 属性及其操作

“送人玫瑰，授之以渔”

定位BUG

1. 复现问题，初步定位
2. 查看URL，寻找模块

定位BUG

1. 复现问题，初步定位
2. 查看URL，寻找模块
3. 查找umiUtil.js

定位BUG

1. 复现问题，初步定位
2. 查看URL，寻找模块
3. 查找umiUtil.js
4. 全局搜索ctrl+h（不同编辑器有所不同）

定位BUG

1. 复现问题，初步定位
2. 查看URL，寻找模块
3. 查找umiUtil.js
4. 全局搜索ctrl+h（不同编辑器有所不同）
5. 页面调试，打断点

打包后的BUG

最恶心的线上bug，打包后，没法分析

1. 定位代码位置（core.js 还是？）
2. 全局打断点定位
3. 定位不到？？？
4. 格式化core.js（假设确定在core里）
5. 根据关键字定位代码片段
6. 在代码片段上打断点
7. 调试数据分析
8. 还不行？？？放弃吧？？？找高手？？？

整个世界安静了

开始拉分支，修改bug吧，这个过程可能比较漫长，要有信心

页面自动刷新插件hmreload

还为页面刷新而烦恼吗？

喜欢所编即所见的效果吗？

试试hmreload吧

人世间有百媚千红，我独爱这一种...

1. 安装浏览器插件
2. npm install hmreload
3. hmreload (监听目录)
4. 开启双屏，OK啦！！！

Thank You

- chrome plugin
- https://github.com/livereload/livereload-js
- 《欢欢出品，必属精品》