前端Debug随笔

Debug指南

异步问题

前端出现异步的因素有：动画、HTTP 请求、DOM 渲染、定时器等。

缓存问题

浏览器缓存、CDN缓存、路由器的缓存。

实例一：CDN 中缓存的 JQuery 文件不完整，导致部分用户打开页面出错。(因为是部分CDN缓存出错，前端非常难定位问题。)
实例二：本地的 localStorage 缓存，在某些情况下不能再用时，没有定义有效的清除机制。

网络问题

第三方插件链接出错、部分地区网络出错、是否正确使用 http 和 https。

实例一：微信好友分享，由于使用了默认协议 //，导入分享不成功。

es6语法支持

是否使用了 canvas\promise 或者使用了 es6 中的一些语法，但是没有用 babel 转换或者没有引入 polifyfill。

Babel 最核心的依赖： @babel/cli、@babel/core、@babel/polyfill、@babel/register、core-js。

"@babel/cli": Babel 自带了一个内置的 CLI 命令行工具，可通过命令行编译文件。
"@babel/core": `babel`的核心，一些转码操作都是基于它完成的
"@babel/polyfill": Babel默认只转换新的JavaScript语法，但是不转换新的API，比如：`Iterator`、`Generator`、`Set`、`Maps`、`Proxy`、`Reflect`、 `Symbol`、`Promise` 等全局对象，以及一些定义在全局对象上的方法（比如 `Object.assign`、`Array.findIndex` ）都不会转码。而`@babel/polyfill`就可以做到。
"@babel/register": 让webpack.config.babel.js也支持ES6语法

实例一：JS 中用了 findIndex 方法，由于某些原因，该 JS 文件没有经过 babel 转换，导致在一些低端手机执行 JS 出错，而控制台没有详细的报错信息，问题定位困难。

Cookie问题

请求无法携带 cookie 问题：浏览器是否标禁用了 cookie、跨站导致 cookie 无法发送成功、HTTP 请求未设置允许跨站。

浏览器中的 cookie 是可以重写的，使用时要特别注意。

实例一：由于开启了 Mock.JS，导出 cookie 无法携带，HTTP 请求报跨域错误。
实例二：联调本地页面时，IOS 设备上出现循环登录现象。原因是 Cookie 无法跨域携带。解决方案：原生开发放开 APP 禁止跨网站发送的限制，比如，设置 -> 找到【APP】 -> 开启【允许跨网站跟踪】。
实例三：页面反复出现未登录提示。原因是前端根据 URL 链接中的参数，用 JavaScript 重写的 Cookie 的 token 的值（还有一种，同域名下有两个不同项目，登录体系不一样，但都依赖 token，导致相互重写），同时，由于服务端的一些逻辑，并未判断该用户未登录，返回的不是约定的 401 状态，而是其他错误状态。

调试工具

Chrome DevTools，Chrome 浏览器内置的 Web 开发和调试工具。

vConsole，针对手机网页的前端开发者调试面板。

Eruda ：一个用于移动浏览器的控制台，类似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、捕获 XHR 请求、显示本地存储和 Cookie 信息等等。

Firefox DevTools，Firefox 浏览器内置的 Web 开发工具，用来检查、编辑和调试 HTML、CSS 和 JavaScript。

IETester，一款免费的 WebBrowser，允许在 Windows 8、Windows 7、Vista、XP 上拥有 IE 5.5~11 的渲染和 JavaScript 引擎，可以于调试不同版本的 IE 浏览器的兼容性。

微信开发者工具，为了帮助开发者简单和高效地开发和调试微信小程序，在原有的公众号网页调试工具的基础上，推出了全新的微信开发者工具，集成了公众号网页调试和小程序调试两种开发模式。

Fiddler，是最强大最好用的 Web 调试工具之一，它能记录所有客户端和服务器的 http 和 https 请求。允许监视、设置断点、甚至修改输入输出数据。

Charles ，是一个 HTTP 代理 / HTTP 监视器 / 反向代理，它使开发人员能够查看他们的机器和 Internet 之间的所有 HTTP 和 SSL / HTTPS 通信。这包括请求、响应和 HTTP 报头（其中包含 cookie 和缓存信息）。

Debugbar，是一个 IE 的 Web 开发栏，分为工具栏和侧边栏。它的目的是帮助您调试您的网站更快或快速分析任何网页。

mockjs，用于生成随机数据，拦截 Ajax 请求。

移动端真机调试

IOS真机调试

IOS 设备可以通过 safari 调试，但必须满足如下条件：

safari 打开开发者模式：Safari浏览器 -> 偏好设置 -> 高级 -> 在菜单栏中显示“开发”菜单；
IOS 设置 safari ，允许调试；
原生打开允许 app 的调试的限制，即，安装的应用是可调试版本的；
需要原生将该设备加入白名单。

使用数据线连接设备和电脑，Safari 点开开发者调试。

Andriod真机调试

Andriod 设备可以通过 Chrome 调试，但必须满足如下条件：

Android 设备系统版本为 4.4 以上；
开启开发者模式：设置 -> 关于手机 -> 连续点击系统版本。（不同机型开启模式有异差）
系统安全 -> 未知来源 -> 允许；
选择开发者选项：允许 USB 调试。

电脑连接手机：Mac 电脑使用【Android File Transfer for mac】管理安卓机文件（需自行下载，并在加接手机前运行该软件）。

使用数据线连接设备和电脑，Chrome打开：chrome://inspect/#devices

前端调试随笔