前端调试随笔

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

上一页README下一页浏览器常见问题概览

最后更新于