# 前端调试随笔

### 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。

```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](https://developer.chrome.com/docs/devtools/)，Chrome 浏览器内置的 Web 开发和调试工具。

[vConsole](https://gitee.com/Tencent/vConsole)，针对手机网页的前端开发者调试面板。

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

[Firefox DevTools](https://getfirebug.com/)，Firefox 浏览器内置的 Web 开发工具，用来检查、编辑和调试 HTML、CSS 和 JavaScript。

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

[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，为了帮助开发者简单和高效地开发和调试微信小程序，在原有的公众号网页调试工具的基础上，推出了全新的 微信开发者工具，集成了公众号网页调试和小程序调试两种开发模式。

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

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

[Debugbar](https://www.debugbar.com/)，是一个 IE 的 Web 开发栏，分为工具栏和侧边栏。 它的目的是帮助您调试您的网站更快或快速分析任何网页。

[mockjs](http://mockjs.com/)，用于生成随机数据，拦截 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>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lizh.gitbook.io/knowledge/bugs/00-qian-duan-tiao-shi-sui-bi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.