如何查看已收藏网页的源代码？

浏览器收藏夹 保存的不是网页的完整代码，而只是一个书签（URL链接）。

当你点击收藏夹里的链接时,浏览器会重新向那个网址的服务器发送请求，获取最新的网页内容并显示给你，直接在收藏夹里是找不到代码的。

你需要做的是,在浏览器中打开那个收藏的网页，然后查看当前页面的源代码。

查看当前正在浏览的网页代码（最常见）

这是最直接的方法,适用于任何你正在访问的网页，无论它是从收藏夹打开的，还是直接输入地址打开的。

通用方法（适用于所有浏览器）：

1. 打开网页：在浏览器中打开你想要查看代码的那个网页。

   
   （图片来源网络，侵删）

2. 打开开发者工具：在网页上点击鼠标右键。

3. 选择“查看网页源代码”：在弹出的菜单中，找到并点击 “查看网页源代码” (View Page Source) 或类似的选项。

4. 查看代码：浏览器会打开一个新标签页，里面显示的就是这个网页的完整源代码，这些代码主要是 HTML，也包含了一些内嵌的 CSS 和 JavaScript。

快捷键（推荐使用，更快）：

• Windows / Linux: Ctrl + U
• macOS: Cmd + Option + U

按下快捷键后,会直接打开源代码页面，无需右键菜单。

只想看网页的某一部分代码（例如某个按钮或图片）

有时候你只想知道页面中某个特定元素的代码,而不是整个页面的，这时就需要用到“检查元素”功能。

方法：

1. 打开网页：在浏览器中打开目标网页。

2. 定位元素：将鼠标光标移动到你想要查看代码的那个元素上（比如一个按钮、一张图片、一段文字）。

3. 右键点击：在你选中的那个元素上点击鼠标右键。

4. 选择“检查”：在弹出的菜单中，点击 “检查” (Inspect) 或 “检查元素” (Inspect Element)。

5. 查看代码：浏览器的开发者工具会自动打开，并且直接定位到对应的那部分代码，通常是在 Elements (元素) 面板中，你可以在这里看到该元素的 HTML 结构，以及它在 CSS 面板中对应的样式。

快捷键：

• Windows / Linux: Ctrl + Shift + C
• macOS: Cmd + Option + C

是动态加载的（例如通过 AJAX、React/Vue 构建）

对于现代网站,很多内容并不是一开始就加载好的，而是当你进行某些操作（如下拉刷新、点击“加载更多”）时，才通过 JavaScript 动态从服务器获取并渲染到页面上。

这种情况下,你使用 Ctrl + U 查看到的源代码是初始的、静态的 HTML，你找不到那些动态加载出来的内容。

如何查看动态加载的代码？

你需要使用开发者工具的 “网络” (Network) 面板。

1. 打开开发者工具：按 F12 或 Ctrl + Shift + I (Windows) / Cmd + Option + I (macOS)。
2. 切换到“网络”面板：在开发者工具中点击 Network
3. 执行操作：在网页上执行触发内容加载的操作（比如点击“加载更多”按钮）。
4. 分析请求：你会看到“网络”面板中出现了新的请求，动态加载的数据会以 XHR (XMLHttpRequest) 或 Fetch 的形式出现，点击这个请求。
5. 查看响应：在请求的详情中，切换到 Response 或 Preview 标签，这里就能看到服务器返回的原始数据，通常是 JSON 格式，这些数据才是驱动页面动态内容的“代码”。