浏览器常见问题概览

如何清理Chrome的favicon缓存？

cd /Users/$USERNAME/Library/Application\ Support/Google/Chrome/Default
rm Favicons Favicons-journal
#重启chrome

如何在Chrome禁用/启用JavaScript？

点击屏幕右上角的菜单图标（三个点） -> 设置 -> 隐私设置和安全性 -> 网站设置 -> JavaScript -> 选择 ”网站可以使用JavaScript“ 或者 ”不允许网站使用JavaScript“。

如何在Chrome禁用/启用CSS？

安装 Chrome 插件：Web Developer。Web Developer 扩展向浏览器添加了一个带有各种 Web 开发工具的工具栏按钮。

禁用 Javascript、通知、弹层等
Cookies 管理：禁用、增删查改等
禁用 Css、修改盒子模型、查看Css等
表单、图片、信息等管理

vue debugger 定位不准确

浏览器调试界面，断点停下来的地方并不是 debugger 那一行。有时候差一点，有时候差很多。

解决： 在 vue.config.js 添加：

module.exports = {
    chainWebpack: config => {
        if (!isProductionEnv) {
            config.devtool('source-map')
        }
    }
}

a 标签的资源链接无法跳转或下载？

原因一： 资源链接权限问题。
原因二： 链接协议问题。比如：当前访问链接是 https，资料链接是 http。

vue检查hostname

由于新版的 webpack-dev-server 出于安全考虑，默认检查 hostname，如果 hostname 不是配置内的，将中断访问。

解决方法如下：

devServer: {
	disableHostCheck: true,
}

Chrome 开发者工具报错（touch）

Chrome 报错：

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>

这是 Chrome 为了提高页面的滑动流畅度而新折腾出来的一个东西。

由于浏览器必须要在执行事件处理函数之后，才能知道有没有掉用过 preventDefault() ，这就导致了浏览器不能及时响应滚动，略有延迟。

所以为了让页面滚动的效果如丝般顺滑，从 Chrome56 开始，在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数，会默认为是 passive: true。

浏览器忽略 preventDefault() 就可以第一时间滚动了。

解决方法一：

body {
  touch-action: none;
}

解决方法二：

window.addEventListener('touchstart', function(event) {
    event.preventDefault();
});

解决方法三（不推荐）：

window.addEventListener('touchstart', function() {}, { passive:false })

相关链接：

HTTP 请求错误：net::ERR_CONNECTION_RESET

net::ERR_CONNECTION_RESET 是 Chrome 浏览器抛出的错误，在其他浏览器，比如，Firefox，则抛出 The connection was reset 错误。

连接重置（Connection reset）是在访问网站时，浏览器无法建立连接时发生的。连接被“重置”，这意味着服务器不能将数据传输到您的浏览器。

在大多数情况下，是网络连接的问题：

虚拟专用网络（VPN）出现问题，比如，没配置公网解析；
防火墙或防病毒程序阻止了到远程服务器的连接；
代理设置有问题；
浏览器缓存有问题。

IOS：发生了SSL错误，无法建立与该服务器的安全连接

私钥与证书不匹配

似乎 cPanel 找不到为此 SSL 证书创建的私钥。私钥与 CSR Key 一起生成。可能错误地删除了此密钥。如果您在同一台服务器上安装了多个 CSR 密钥和私钥，cPanel 将无法找到正确的私钥。

解决方法：可以手动查找随 CSR Key 一起生成的原始私钥并将其粘贴到私钥框中。

可能安装了默认的自签名证书

因为主流浏览器不信任或不支持自签名 SSL 证书，但服务器 WHM / cPanel 设置可能配置了默认的 WHM 自签名 SSL。在常规实践中，所有 WHM 配置都设置自签名，并为此 SSL 中配置的所有域账户设置为共享 SSL。

网站证书不是由受信任的机构颁发

这是因为证书不在浏览器厂商的受信任的列表中。

ssl证书包含域名与网址不一致

每一个 ssl 证书所对应的域名都具有唯一性，是一个全域名 FQDN。当网站出具的证书所包含的域名和网站域名不一致，系统就会自动发出报告，提示证书域名不匹配。

解决方法： 需要重新申请 ssl 证书。如有相同主域名的多站点，则要申请多域名 ssl 证书。

网站证书已过期或还未生效

出现这种情况一般是电脑系统日期错误，另一种就是证书过了有效期，则需要续费。

解决方法： 可查看该证书信息的有效起止日期，确定证书是否在有效期内，如在的话需查看电脑日期是否正确。否则就是第二种原因，ssl 证书不在有效期内，需尽快联系证书颁发厂商，进行续费。

系统时间不正确

如果系统时钟从通用时间选项中被删除，或者时间设置意外地改变了，使得你的系统时间错误，可能会导致 SSL 错误问题。

解决方法： 将系统时间设置回到正确的日期和时间，那就可以继续正确连接。

页面包含有不安全的内容

目前都提倡每一个页面使用 HTTPS，则网站所有内容都必须是 HTTPS。如果遇到图片、Js 脚本，FLASH 插件是通过 HTTP 方式去调用的，就会发生这种错误。

解决方法： 将调用的元素 http 改成 HTTPS 即可，然后刷新测试 ssl 问题是否已经解决。

浏览器错误

有时浏览器可能会出错配置，或者插件可能会导致某些方面的工作方式有所不同，从而导致连接到其他合法网站时出现 SSL 错误问题。

解决方法： 需要准确诊断当前浏览器需要调整的内容，此外最快方法是：将浏览器重置为默认设置并禁用所有插件。当然，有更简单的方法：只需尝试其他浏览器即可。

中间人（代理器）

中间人（MITM）不只是黑客，许多程序和设备拦截流量以进行检查，然后将其发送到应用程序服务器。这也构成了 MITM，都可能导致 SSL/TLS 协议错误。它可能类似于阻止连接的网络防火墙，或者可能是服务器端网络上边缘设备上的配置。

上一页前端调试随笔下一页浏览器兼容问题概览

最后更新于1年前

这有帮助吗？