> For the complete documentation index, see [llms.txt](https://lizh.gitbook.io/knowledge/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lizh.gitbook.io/knowledge/bugs/01-liu-lan-qi-chang-jian-wen-ti-gai-lan.md).

# 浏览器常见问题概览

### 如何清理 Chrome 的 favicon 缓存？

刷新页面无法清除标签页图标，是因为图标缓存存储在用户目录的 SQLite 数据库中。需要**完全退出 Chrome**，删除配置目录下的 `Favicons`、`Favicons-journal` 缓存文件，重启浏览器即可。

* macOS：`~/Library/Application Support/Google/Chrome/Default`。
* Windows：`%LOCALAPPDATA%\Google\Chrome\User Data\Default`。
* Linux：`~/.config/google-chrome/Default`。

```
# macOS 清理示例
cd ~/Library/Application\ Support/Google/Chrome/Default
rm Favicons Favicons-journal
```

### 如何在 Chrome 禁用、启用 JavaScript？

临时关闭 JS，可快速排查页面报错是否由脚本异常导致：

* 图形设置：设置 → 隐私和安全 → 网站设置 → JavaScript，或直接访问 `chrome://settings/content/javascript`。
* 开发者工具快捷操作：按下 `Ctrl+Shift+P`（macOS `Cmd+Shift+P`），输入 `Disable JavaScript` 即可禁用，仅对当前标签页生效、刷新不重置；再次执行 `Enable JavaScript` 即可恢复。

### 如何在 Chrome 禁用、启用 CSS？

如需关闭页面样式、纯查看 DOM 结构，排查样式错乱、布局挤压问题，可安装 **Web Developer** 浏览器扩展。 该插件支持一键关闭 CSS、禁用 JS、屏蔽弹窗通知、批量管理 Cookie、查看图片与表单信息，调试效率极高。

### 为什么 debugger 语句无效？

代码写入 `debugger` 但断点无法停留，核心原因集中在五类：

* **逻辑未执行**：`debugger` 位于条件判断内部，代码分支未触发，语句未执行。
* **构建压缩剔除**：Terser、Uglify 等打包工具，默认会自动删除生产环境 `debugger` 语句。
* **脚本被忽略**：DevTools 开启了忽略名单，曾对当前文件添加「Add script to ignore list」，可在 `DevTools → 设置 → Ignore list` 中删除对应规则。
* **全局断点停用**：开发者工具开启「停用断点」（带斜杠暂停图标），所有断点、debugger 全部失效。
* **单行禁用**：代码行右键设置过「Never pause here」，该行永久跳过断点监听。

### 为什么 debugger 定位不准？

断点停留行号与源码不一致，本质是**源码、打包编译代码映射异常**。 DevTools 依靠 SourceMap 将打包代码映射为源代码，未生成 SourceMap、映射质量过低（eval、cheap-module-source-map）、手动关闭 JS SourceMap，都会导致行号偏移。

**Vue CLI** 开发环境开启完整映射：

```json
module.exports = {
  chainWebpack: (config) => {
    if (process.env.NODE_ENV !== 'production') {
      config.devtool('source-map')
    }
  },
}
```

**Vite** 开发模式默认开启 SourceMap，生产包需手动开启：

```javascript
// vite.config.js
export default {
  build: {
    sourcemap: true
  }
}
```

### a 标签资源链接无法跳转、下载？

点击链接无响应、不触发下载、仅打开预览页，可按三类问题逐一排查：

* **资源请求异常**：接口 401、403、签名过期、防盗链拦截，Network 面板可看到请求失败，与标签属性无关。
* **混合内容拦截**：页面为 HTTPS 协议，资源链接为 HTTP 协议，浏览器直接拦截跳转、下载，统一改为 `https://` 协议即可。
* **download 属性跨域失效**：该属性**仅支持同源资源**，跨域场景会被浏览器忽略，无法指定文件名、无法触发下载。

**跨域下载解决方案**：

* 服务端响应头添加：`Content-Disposition: attachment`，强制触发文件下载；
* 前端通过 `fetch` 请求资源转为 Blob，基于 blob 地址使用 download 实现跨域下载。

**iOS 系统浏览器存在特殊限制**：`download` 属性不生效、`target="_blank"` 会覆盖下载逻辑、非用户手势触发的脚本点击事件会被浏览器拦截，只会预览不保存。

### Chrome 报错：Unable to preventDefault inside passive event listener

```
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
```

该提示**非代码报错**，是浏览器默认策略导致。 Chrome 56+ 对 `window`、`document`、根节点的 `touchstart`、`touchmove` 事件，Chrome 73+ 对根节点 `wheel` 事件，默认开启 `passive: true`，禁止通过 `preventDefault()` 阻止默认滚动行为。

需要拦截滚动、禁止手势时，两种解决方案：

* **CSS 方案（推荐）**：目标元素添加 `touch-action: none;`，浏览器原生禁止滚动、缩放；
* **JS 方案**：手动声明事件参数 `passive: false`，仅挂载在需要拦截的元素上，不全局挂载。

### HTTP 请求错误：net::ERR\_CONNECTION\_RESET

该错误代表 **TCP 连接被服务端、中间设备强制重置**，Firefox 对应提示为 `The connection was reset`。

常见诱因：

* 本地 VPN、代理配置异常、杀毒软件、防火墙拦截链路；
* 抓包工具、公司网关中途中断连接；
* 服务端、负载均衡主动断开请求连接。

> 临时清缓存可重置连接复用，仅治标，核心问题在于**网络链路、服务端配置**。

### HTTPS 页面混合内容被拦截

页面主协议为 HTTPS，却通过 HTTP 加载图片、脚本、样式等资源，浏览器会自动拦截不安全的混合内容。

最优规范：**页面、所有静态资源统一使用 HTTPS 协议**。 禁止使用协议相对地址 `//`，微信环境基协议不固定，极易出现资源加载失败。