浏览器常见问题概览

如何清理 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 开发环境开启完整映射：

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

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

// 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 协议。 禁止使用协议相对地址 //，微信环境基协议不固定，极易出现资源加载失败。