1.3 浏览器
浏览器选择、标签页与书签管理、扩展程序、搜索运算符、隐私安全与开发者工具
本节 AI 摘要
本节介绍浏览器的选择与主流浏览器对比、标签页与书签管理、地址栏用法、扩展程序的挑选与权限、搜索运算符、隐私与安全(Cookie、无痕模式、密码管理),以及开发者工具(DevTools)入门。学完能明显提升检索与网页调试的效率。
INFO
对于我们来说,浏览器可能是每天打开时间最长的程序——查文档、写算法、搜报错、刷视频、调戏 AI…… 几乎所有学习动作都在浏览器里完成。
善用浏览器与合适的扩展,能明显提升学习与日常使用的效率。
本节主要针对 Windows PC 端浏览器,部分内容在移动端浏览器上会有差异。
一、浏览器分类
浏览器之间没有适合所有人的唯一答案。对于大多数普通用户而言,Windows 自带的 Microsoft Edge 是一个不错的选择。
| 浏览器 | 内核 | 主要特点 | 需要权衡的方面 |
|---|---|---|---|
| Chrome | Blink(Chromium) | 扩展生态成熟,开发者工具资料丰富 | 网络环境受限导致的账号同步与拓展安装受限 |
| Edge | Blink(Chromium) | 与 Windows 集成,兼容 Chromium 扩展 | 默认服务与资讯广告较多,需要进行设置 |
| Firefox | Gecko | 开源,隐私控制选项丰富 | 少数仅针对 Chromium 测试的网站可能存在兼容问题 |
不建议使用部分国产 Chromium 内核浏览器
这类浏览器普遍捆绑推送广告、附带繁杂冗余组件,各类关闭屏蔽选项层级深、配置繁琐。 同时内核更新滞后,存在安全风险。
二、标签页管理
如今,众多浏览器已支持水平标签页与垂直标签页,可根据喜好自由选择。
部分浏览器还支持标签页分组、固定标签页等功能,管理起来更方便。
2.1 标签页快捷键
| 快捷键 | 作用 |
|---|---|
Ctrl + T | 新建标签页 |
Ctrl + W | 关闭当前标签页 |
Ctrl + Shift + T | 恢复刚关闭的标签页(可连续按多次) |
Ctrl + Tab | 切换到下一个标签页 |
Ctrl + 数字键 | 切换到第 N 个标签页 |
Ctrl + Shift + N | 打开无痕窗口 |
2.2 其他常用快捷键
| 快捷键 | 作用 |
|---|---|
Ctrl + D | 收藏当前页面 |
Ctrl + F | 在页面内查找关键词 |
Ctrl + + / Ctrl + - | 放大 / 缩小页面 |
Ctrl + 0 | 恢复 100% 缩放 |
F5 / Ctrl + R | 刷新页面 |
Ctrl + F5 | 强制刷新(忽略缓存) |
F11 | 全屏模式 |
F12 | 打开开发者工具 |
尝试快捷键:
- 打开任意网页,按
Ctrl + T新建标签页,再按Ctrl + W关闭,最后按Ctrl + Shift + T恢复,能成功恢复说明快捷键生效
三、地址栏与搜索栏
地址栏在浏览器窗口顶部,显示当前页面的 URL(俗称“网址”),也可以直接输入网址或搜索关键词。
当前的大多数浏览器,地址栏也可进行搜索,两者已合并。
地址栏与搜索栏的区别:
各大搜索引擎网站中的输入框通常称为“搜索栏”, 它主要用于输入关键词进行搜索,而不是像浏览器地址栏一样直接输入网址并跳转到对应网页。
四、书签管理
4.1 建立文件夹结构
浏览器收藏夹就像文件系统,如果不加分类地堆放,最后一定会变成“找也找不到,删也舍不得删”的状态。建议按用途建立两级文件夹:
结合 1.1 文件管理 的思路
书签管理和文件管理思路一致:分层分类、定期归档,查找更方便。
4.2 定期整理
每隔两周花几分钟清理一次书签:把“临时”文件夹里的内容归类或删除,检查是否有失效链接,把不再用的网站删掉。
五、扩展程序
5.1 几个常用的扩展程序
| 类别 | 可考虑的工具 | 说明 |
|---|---|---|
| 内容过滤(推荐) | uBlock Origin / AdGuard 广告拦截器等 | 过滤广告、跟踪器、弹窗等内容 |
| 深色显示 | Dark Reader | 个别网站显示异常时按站点停用 |
| 用户脚本(推荐) | Tampermonkey 等脚本管理器 | 逐个审查脚本来源和匹配的网站范围 |
| 开发辅助 | Wappalyzer | 识别网站使用的技术栈 |
| ... | ... | ... |
5.2 安装与管理
Chrome 扩展商店:Chrome Web Store Edge 扩展商店:Microsoft Edge Add-ons Firefox 扩展商店:Firefox Browser Add-ons
可在 chrome://extensions、edge://extensions 或 about:addons 中管理已安装的扩展,也可以从浏览器设置进入扩展管理页面。
扩展权限风险
扩展可能读取和修改网页内容。 安装前先看发布者、最近更新时间、源代码或隐私说明,并检查“在所有网站上读取数据”这类权限是否真的必要。
5.3 定期清理无用拓展
每隔一段时间检查扩展列表:删除已经不用的扩展,将只在特定网站使用的扩展权限限制到对应站点。
六、高效搜索
6.1 搜索引擎选择
| 搜索引擎 | 特点 | 适合 |
|---|---|---|
| 结果最准、英文资料全 | 编程问题、英文文档 | |
| Bing | 国内可直连访问、结果质量较好 | 日常搜索 |
6.2 搜索运算符
会用几个搜索运算符,搜索效率会明显提升:
| 运算符 | 作用 | 示例 |
|---|---|---|
"精确匹配" | 搜索完整短语 | "segmentation fault" |
site:域名 | 限定网站 | c++ site:cppreference.com |
filetype:扩展名 | 限定文件类型 | 操作系统 filetype:pdf |
-关键词 | 排除某词 | python -蛇 |
intitle:关键词 | 标题中包含 | intitle:教程 |
.. | 数字范围 | 笔记本 5000..8000 |
6.3 组合使用示例
-
只在 GitHub 上搜索 Vue 相关的 issue
Text"vue 3" site:github.com -
找操作系统课程的 PDF 课件
Text操作系统 课程 filetype:pdf -
排除百度知道的中文教程
Textjava 教程 -site:zhidao.baidu.com
尝试搜索运算符:
- 在地址栏输入
"segmentation fault" site:stackoverflow.com,如果只返回 Stack Overflow 上的相关结果,说明运算符生效
七、隐私与安全
7.1 Cookie 与缓存
| 概念 | 说明 | 清理方式 |
|---|---|---|
| Cookie | 用于保持我们在网站上的登录状态等 | 可设置“退出浏览器时清除 Cookie”或定期清理 |
| 缓存 | 网页资源(图片、脚本)的临时副本,能加快二次访问 | 网站更新后用 Ctrl + F5 强制刷新 |
清理路径(以 Edge 为例):设置 → 删除浏览数据(快捷键 Ctrl + Shift + Del)
7.2 无痕模式
无痕模式(InPrivate / 隐私模式)不会保存历史记录、Cookie 和表单数据。适合:
- 在公共电脑上登录账户
- 测试网页在不带缓存时的表现
- 搜索不想被推荐算法记录的内容
无痕模式不能完全匿名
无痕模式只是不在本地保存记录,网站和运营商仍然能看到我们的访问记录。 真正的匿名需要配合 VPN 或 Tor,不要以为开了无痕就没人知道我们在干嘛👀。
7.3 密码管理
浏览器内置的密码管理器可以保存和自动填充密码,比把密码写在记事本里安全得多。
也可使用更为专业的密码管理器,如 Bitwarden,它支持跨浏览器、跨设备同步。 如果你愿意自己动手配置且恰好有自己的服务器资源,也可以尝试自建一个密码管理器自用。
WARNING
密码应足够长并包含大小写、数字和符号,重要账号定期更换,不要长期复用同一套密码。
八、初窥开发者工具
按 F12 或 Ctrl + Shift + I 打开开发者工具(DevTools)。这是前端开发和网页调试的核心工具,考虑到本章所在的位置,这里只做简单介绍,不多赘述。
| 面板 | 作用 |
|---|---|
| Elements(元素) | 查看和修改 HTML / CSS |
| Console(控制台) | 执行 JavaScript、查看日志 |
| Network(网络) | 查看请求和响应,调试接口 |
| Application(应用) | 查看 Cookie、LocalStorage 等 |
| Sources(源代码) | 查看和断点调试网页源码 |
九、TODO 清单
- 熟记
Ctrl + T、Ctrl + R、Ctrl + Shift + T、Ctrl + F等常用快捷键 - 已完成广告拦截等拓展的安装,且对权限进行审查
- 了解并尝试使用
site:、filetype:、-等搜索运算符组合检索 - 遇到编程报错时,能复制英文报错信息并组合技术栈关键词进行搜索
- 了解 Cookie 与缓存的区别,掌握
Ctrl + Shift + Del清理浏览 缓存 - 了解无痕模式的局限性,并尝试使用 Edge 中 Microsoft 密码管理器 或其他密码管理器
- 对重要的网站已设置强密码且添加 Authenticator 2FA (双因素认证)
十、值得我们思考的问题
为什么 F5 刷新有时没用,Ctrl + F5 却可以?
F5 会优先使用本地缓存,并向服务器发送条件请求(如 If-Modified-Since);若服务器判断资源未变化,会返回 304 Not Modified,页面直接复用缓存。
Ctrl + F5 则跳过缓存校验,强制重新下载所有资源。网站改版后样式或脚本迟迟不变,很可能就是缓存没更新,此时可先尝试 Ctrl + F5。
为什么同一个网页在不同浏览器里显示不一样?
不同浏览器使用不同的渲染内核(Chrome / Edge 使用 Blink,Firefox 使用 Gecko),它们对 CSS 标准、新 API 的支持程度和实现细节存在差异,加上字体渲染、缩放等差异,最终呈现效果会有所不同。
这也是为什么要关注“内核”而不是只关注“品牌”,以及开发网页时需要在多个浏览器中测试的原因。
为什么有些网站强制要求使用 “Chrome” 或 “Edge”?
这类网站通常只针对 Chromium 内核测试,或依赖某些 Blink 内核的新特性 / 私有 API(如部分网银、政务平台),非 Chromium 浏览器可能出现功能缺失或交互异常。
选课、考试等关键场景建议提前确认平台对浏览器的要求,避免关键时刻无法访问。
Microsoft Edge 浏览器 或 Google Chrome 浏览器已经可以满足绝大多数网站的需求。
像 AdGuard、uBlock Origin 这类插件是如何拦截广告等内容的?
像 AdGuard、uBlock Origin 这类广告拦截扩展,本质上是在浏览器加载网页的过程中,依据过滤规则去 拦截请求、隐藏元素或修改页面行为。
主要有三类机制:
- 网络请求拦截
浏览器访问网页时,会继续请求图片、脚本、广告接口等资源。广告拦截器会根据过滤规则判断某个请求是否来自广告或追踪域名,如果命中规则,就阻止该请求发送或加载。
- 页面元素隐藏
有些广告内容和正文来自同一个网站,不能简单阻断整个请求。这时扩展会根据 CSS 选择器隐藏对应元素。例如:
.advertisement {
display: none !important;
}对应的过滤规则可能类似:example.com##.advertisement
- 脚本干预
一些网站会动态生成广告,或者检测用户是否开启广告拦截器。扩展可以注入脚本,修改 JavaScript 执行环境、阻止特定函数调用,或者处理“请关闭广告拦截器”这类反广告拦截逻辑。
这些规则通常来自 EasyList、AdGuard Filters 等过滤规则库,也允许用户自行添加规则。