浏览器常见问题概览

如何清理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 })

Easy fix for: Unable to preventDefault inside passive event listener due to target being treated as passive

Unable to preventDefault inside passive event listener

HTTP 请求错误：net::ERR_CONNECTION_RESET

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

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

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

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

How to Fix the “ERR_CONNECTION_RESET” Error (5 Ways)

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

私钥与证书不匹配

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

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

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

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

解决方法：安信 SSL 证书建议使用 SSL 保护的域名购买专用的 SSL 证书。此专用SSL证书将由受信任的证书颁发机构（如Symantec、GeoTrust等）颁发，并在 SSL 中包含您的域名。因此，Web 浏览器将信任此 SSL，并且不会显示更多警告或消息。

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

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

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

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

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

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

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

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

系统时间不正确

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

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

页面包含有不安全的内容

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

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

浏览器错误

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

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

中间人（代理器）

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

ssl 错误无法建立安全连接什么情况？

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

最后更新于1年前