浏览器使用指南

前言

浏览器使得我们能够很方便得访问互联网上的网页和资源，很多情况下，我们不必为了使用某一个工具而需要在PC上下载各式各样的的应用软件。浏览器主要是为了解决资源定位与导航以及网页渲染的问题，因此不同的浏览器虽然有着不同的界面风格，大体还是相似的。个人偏好使用Chrome浏览器，本文主要记录在使用Chrome浏览器时觉得有用的知识以及一些开发相关的知识。

Chrome官网下载地址：Google Chrome 网络浏览器。

日常

书签

书签主要是方便保存和管理我们经常访问的网站链接或者临时的网站链接，方便后续查看而无需每次手动输入网址或通过搜索引擎查找。

示例：保存必应的网址到temp目录

书签栏的显示与隐藏

书签的同步

若登录了Google账号，可以开启自动同步，这样在不同设备上只要登录了账号，就可以看到在其他设备上收藏的书签。

因为某些原因，正常情况下我们无法登录。我们可以选择其他浏览器，如Microsoft Edge浏览器，有着类似的功能。或者将书签从这台设备导出，再从另一台设备导入。

chrome://bookmarks/

插件

插件下载

正常情况下我们无法访问Chrome应用商店，可以从插件官网或其他地方（如：Chrome插件屋|每一个chrome插件，站长手工亲测好用）下载安装包，然后本地安装。

以Tampermonkey插件(帮助用户安装、管理和运行各种用户脚本)为例。

Tampermonkey插件

官网地址：Home | Tampermonkey。

下载好后，将文件拖拽到扩展程序界面（chrome://extensions/），如下：

管理脚本：

在这里可以找到各种各样的脚本，同时也支持自定义脚本。

示例：打开百度一下，你就知道时，弹窗显示hello。

启用该脚本，如下：

完成上述操作后，打开百度一下，你就知道，界面显示如下：

开发

资源定位

资源定位是指在网络环境中确定和标识特定资源的过程，用户可以通过网络访问和利用这些资源。

URI (Uniform Resource Identifier)，统一资源标识符，是用于标识资源的字符串。

URL(Uniform Resource Locator)，统一资源定位符 ，URL 是 URI 的一个子集，它不仅标识资源，还包含了如何访问资源的信息（如使用HTTP协议）。

---

URL的组成：协议（Scheme）+主机名（Host）+端口号（Port）+路径（Path）+查询参数（Query Parameters）+片段标识符（Fragment Identifier）。

http://www.example.com:8080/path/to/resource?query=param#section

在上述URL示例中：

协议：http，定义了资源如何被访问，即访问资源所使用的协议。

主机名：www.example.com，标识资源所在的服务器或主机，这当中涉及域名解析的过程。

端口号：8080，指定服务器上资源所在的服务端口，端口号用于区分同一台服务器上的不同服务，http协议默认端口80，https协议默认端口443，如果使用默认端口，URL中可省略端口号。

路径：/path/to/resource，标识资源在服务器上的位置，即资源位于服务器上的哪个目录。

查询参数：?query=param，用于向服务器传递额外的数据，可以用来过滤结果或提供额外的信息。

片段标识符：#section，用于指向页面内的某个位置。

域名解析

域名解析是一个将域名转换为对应的 IP 地址的过程，使用户可以通过输入域名来访问网站。

域名系统 (DNS)是一个分布式数据库系统，用于存储域名和 IP 地址之间的映射关系。

---

假设用户想要访问 www.example.com

解析过程：

1. 客户端发起请求：用户在浏览器中输入域名。
2. 本地 DNS 查询：客户端首先查询本地 DNS 缓存，如果找不到，则向本地 DNS 服务器发送请求。
3. 递归查询：本地 DNS 服务器如果不知道 IP 地址，向根 DNS 服务器查询，根 DNS 服务器返回顶级域服务器的地址，然后查询 .com 顶级域服务器，最后查询 example.com 的权威 DNS 服务器。
4. 权威 DNS 服务器响应：最终查询会到达权威 DNS 服务器，它会返回正确的 IP 地址。
5. 响应给客户端：IP 地址被返回给客户端，客户端使用该 IP 地址访问目标网站。

---

hosts 文件与域名解析的关系

在域名解析的过程中，hosts 文件的映射优先于 DNS 服务器提供的信息，当用户尝试访问一个域名时，系统首先检查 hosts 文件中是否有相应的映射条目。

hosts 文件是操作系统中用于静态映射域名到 IP 地址的一个文本文件。

通常位于 /etc/hosts（Unix/Linux/macOS）或 %SystemRoot%\System32\drivers\etc\hosts（Windows）。

提供一个用于管理hosts文件的工具：https://github.com/oldj/SwitchHosts/releases

应用场景：

• 在开发环境中，hosts 文件常用于映射虚拟主机名到本地开发服务器的 IP 地址。
• 当 DNS 服务器出现问题时，可以通过 hosts 文件绕过 DNS 故障，直接访问目标服务器。

小测试：

首先访问：百度一下，你就知道，一切正常。

然后在hosts文件中增加行，如下

127.0.0.1	www.baidu.com

 再次访问百度一下，你就知道，会发现该网站已无法正常访问，127.0.0.1指向的是本机，然而我们并没有在本机443端口(https协议默认端口)根目录下部署服务。

开发者工具

官网文档

概览  |  Chrome DevTools  |  Chrome for Developers

打开方式

方式一：

方式二：

在页面右击鼠标点击检查

方式三：

快捷键1：F12

快捷键2：Ctrl+Shift+I

未完待续。。。