从2020年1月到3月踩过的坑

坑一、页面所有图片和icon都不显示 上周五，有人在群里反馈有些用户（其实就是一个）访问我们的一个页面，icon和图片均不显示；惯性思维以为是用户网络问题，后来想想不对，因为那个页面所有的icon和图片都不显示，因此要么代码的兼容性问题，要么是用户设置了无图模式进行浏览网页；由于客服没有提供用户手机信息，因此 1、将background的简写全部改成全称写法，因为background-size的兼容性在安卓4.3及以前有问题 image.png 2、提示用户关闭无图模式； 总结：a、有的时候不光考虑代码问题，还需要考虑浏览器设置或者用户操作问题；b、遇见困惑时，有的时候自己在做其他事时，大脑可能会突然想到问题的解决方案（这次是自己刷牙的时候想到用户开了无图模式）c、package.json里的browserslist image.png 会影响打包后的css前缀 加上了 Safari >= 6后的变化 这一点相信大家都能够理解，就像改.babelrc文件里的targets 下的browsers一样会影响js版本 坑二、倒计时与实际相差4小时 在做一个新年活动，测试人员反馈一台手机与实际正好相差4小时，当时觉得有点奇怪，如果相差8小时还能够理解（8小时 可以考虑我们在东八区），为啥相差4小时呢？检查代码，发现没有问题，于是在网上搜索也没有发现这方面的资料，这时自己突然灵机一动，是不是手机的原本系统时间就有问题？一看手机，果然，手机系统时间慢了4小时。。。 总结：a、如果是个别问题，除了检查代码要考虑是不是用户的设置问题；b、new Date() 出来的时间跟手机的系统时间相关； 坑三、Safari 11浏览器 new Date('2019-01-01 00:00:00') 会提示非法的日期，但Chrome 正常 其实这个如果仔细看 MDN的Date介绍就知道它强烈不推荐使用Date构造函数来解析日期字符串，因为不同的浏览器有不同的差异； image.png 后来通过测试火狐72.0.2、IE11、Edge 44浏览器，发现IE11也会提示非法的日期，但火狐和Edge浏览器正常；再后来将日期改成 new Date('2019/05/05 00:00:00')，前面测试的几个浏览器都正常； 总结：1、平时有事没事多看一下MDN，或者多刷掘金之类的文章；2、多收集一下前端开发的那些坑；3、写代码后测试一定要充分，多试几个浏览器(含不同种类和不同版本)； 坑四、页面底部position:fixed 元素不显示 客服反馈有几个华为用户，在购买产品页面底部的“立即支付”一栏不显示，检查代码，没有发现问题。后来搜索资料，发现百度浏览器会把页面上的元素为position:fixed给当作广告屏蔽掉。。。 第二天获取到一位用户的user-agent信息，发现确实是百度浏览器内核（其实是华为手机系统自带浏览器，但采用的是百度浏览器内核【更正：应该是用户当时使用百度手机浏览器app访问了我发给他的获取user-agent信息的网址】），果然是百度浏览器内核搞的鬼。。。【更正：今天通过用户的访问日志拿到当时用户的浏览器，发现不是百度内核，而是Mozilla/5.0 (Linux; U; Android 9;zh-cn; PAR-AL00 Build/HUAWEIPAR-AL00) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/57.0.2987.132 MQQBrowser/8.1 Mobile Safari/537.36，其实是QQ内核；另外也不是被屏蔽掉而是“立即支付”一栏被浏览器的底部菜单栏完全挡住了----我通过DevEco平台上的一模一样的云真机给模拟出来了。。。 】ps：由于fundebug只记录一个月的信息，因此user-agent和用户浏览器信息没有保存下来。。。【更新：可以让运维那边拿到当时用户的访问日志】 总结 a、自己应该及时总结，避免信息被丢失了； b、出现问题不要想当然，以为就是自己判断的原因，一定要严谨的证实，这一点自己已经犯了两次错误了，一次是购买产品页面出现空白的情况，还有这一次； c、解决问题后，一定要进行验证是否是该原因导致的，有可能你分析是A原因，然后你采取了相应措施确实解决了该问题，但实际上其实不是A原因，而是B原因； d、出现问题，一定不要放过； e、运维知识和后端知识需要积累和学习，否则思维太局限了，也就是解决问题的思路太狭隘了； f、让用户操作一些东西，可能不会很靠谱，因为用户可能理解错你的意思或者没有明白你的意思； g、出现问题，尽量由自己复现，而不是用户复现，因为有的细节用户是不知道的； // 华为nova 3 自带浏览器 user-agent //Mozilla/5.0 (Linux; U; Android 9;zh-cn; PAR-AL00 Build/HUAWEIPAR-AL00) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/57.0.2987.132 MQQBrowser/8.1 Mobile Safari/537.36 // 华为nova 3 在微信里的user-agent Mozilla/5.0 (Linux; Android 9; PAR-AL00 Build/HUAWEIPAR-AL00; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/66.0.3359.126 MQQBrowser/6.2 TBS/045018 Mobile Safari/537.36 MMWEBID/6081 MicroMessenger/7.0.10.1580(0x27000AFA) Process/tools NetType/4G Language/zh_CN ABI/arm64 // 百度手机浏览器v5.1.0.0 user-agent 注：新版本没有了baiduboxapp字段 Mozilla/5.0 (Linux; Android 4.4.2; OPPO R17 Build/NMF26X) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0.0.0 Mobile Safari/537.36 flyflow/4.9.5.34 lite baiduboxapp/4.9.5.34 (Baidu; P1 4.4.2)

本文章由javascript技术分享原创和收集