如何剪切网页中的JS代码？

直接查看网页源代码（适用于内联JS和部分外部JS）

这是最基础的方法,适用于直接写在HTML文件中的JavaScript代码。

操作步骤：

1. 打开目标网页：在浏览器中打开你想要提取JS的网页。
2. 查看页面源代码：
   • 快捷键：在Windows/Linux上按 Ctrl + U，在Mac上按 Cmd + Option + U。
   • 右键菜单：在页面上任意位置点击鼠标右键，选择“查看网页源代码”（View Page Source）。
3. 查找JS代码：
   • 内联脚本：在打开的源代码窗口中，搜索 <script> 标签,里面的代码就是直接嵌入在HTML中的JS。
   • 外部脚本：你还会看到类似 <script src="path/to/your-script.js"></script> 的标签，这表示JS代码在一个单独的文件里，这个src属性就是JS文件的路径。

优点：

• 简单直接,无需任何工具。
• 可以看到完整的HTML结构和内联JS。

缺点：

• 无法看到动态加载的JS：很多现代网站会使用JavaScript动态地创建<script>标签来加载JS文件,这些代码在初始源代码中是看不到的。
• 对于外部JS文件，这里只显示链接,不显示代码内容。

使用浏览器开发者工具（最强大、最常用）

这是开发者最推荐的方法，几乎可以提取网页中所有的JS代码,包括动态加载的。

操作步骤：

1. 打开开发者工具：

   • 快捷键：在Windows/Linux上按 F12 或 Ctrl + Shift + I，在Mac上按 Cmd + Option + I。
   • 右键菜单：在页面上点击鼠标右键，选择“检查”（Inspect）。

2. 切换到 "Sources" (源代码) 面板：

   • 在开发者工具顶部，找到并点击 "Sources" 标签页。

3. 查找并定位JS文件：

   
   （图片来源网络，侵删）
   • 左侧面板（文件树）：这里列出了所有被浏览器加载的文件，包括HTML、CSS和JS。
   • 文件类型：你可以看到 Page（页面本身的JS）、Content Scripts（浏览器扩展的JS）、Frames（iframe中的JS）等。
   • 搜索文件：如果文件很多，可以使用左侧面板顶部的搜索框来快速找到你想要的JS文件（输入 .js）。
   • 动态加载的文件：即使JS是页面加载后通过AJAX或其他方式动态添加的，一旦它被加载和执行,它也会出现在这个文件列表里。

4. 查看和复制代码：

   • 点击左侧文件列表中的任何一个JS文件，该文件的代码就会显示在中间的代码编辑器区域。
   • 你可以在这里阅读代码，也可以直接全选（Ctrl+A）并复制（Ctrl+C）。
   • 你还可以在代码行号旁边添加断点，来调试代码的执行过程,这对于理解代码逻辑非常有帮助。

优点：

• 功能最强大：能看到所有加载的JS文件,包括动态加载的。
• 可调试：可以设置断点、单步执行，实时查看变量值,是学习和分析JS代码的利器。
• 格式化代码：对于经过压缩或混淆的代码，通常可以在代码编辑器右键菜单中选择“格式化代码”（Format Code）,使其可读性大大提高。

缺点：

• 对于非常复杂的单页应用，文件列表可能会非常庞大,需要花时间筛选。

处理外部JS文件（网络请求）

当你通过开发者工具的 "Sources" 面板发现JS代码在一个外部文件中时,你可以直接获取这个文件。

操作步骤：

1. 找到JS文件的URL：

   • 在开发者工具的 "Sources" 面板中,找到目标JS文件并点击它。
   • 或者，切换到 "Network" (网络) 面板，刷新页面（F5），然后筛选 JS 或 Doc 类型,找到对应的JS文件请求。
   • 在请求项上右键，选择 "Open in new tab"（在新标签页中打开）或 "Copy" -> "Copy link address"（复制链接地址）。

2. 获取代码：

   • 方法A（直接访问）：如果你复制了链接，在新标签页中打开它，浏览器会直接显示该JS文件的源代码,然后你就可以直接复制了。

   • 方法B（使用命令行工具）：如果你熟悉命令行，可以使用 curl 或 wget 工具直接下载文件。

     # 使用 curl 下载并显示在终端
     curl "https://example.com/path/to/script.js"
     # 使用 curl 下载并保存到本地文件
     curl "https://example.com/path/to/script.js" -o my-script.js

优点：

• 获取的是最原始、未经修改的代码。
• 适合自动化脚本处理。

缺点：

• 需要额外的步骤来获取文件URL。

高级技巧（处理压缩/混淆代码）

有时候你从网页中提取的JS代码是经过压缩或混淆的,可读性极差。

如何识别：

• 代码通常只有一行。
• 变量名像 a, b, c, _0x1234 这样。
• 文件名通常包含 min (如 main.min.js)。

解决方法：

1. 使用开发者工具的格式化功能：

   • 在 "Sources" 面板中打开压缩后的JS文件。
   • 在代码编辑器区域右键，选择 "Format Script" 或 "Pretty print"，浏览器会尝试将其格式化成更易读的形式，但这只是格式化,变量名仍然是混淆的。

2. 使用在线反混淆/美化工具：

   • 如果格式化后仍然看不懂，可以尝试使用专门的在线工具，如 JSNice.de、JStillery 等,它们利用大数据和AI技术尝试推断出有意义的变量名和函数名。
   • 注意：这些工具不是万能的，对于高度复杂的混淆效果可能有限,并且请勿用于破解或分析有版权的闭源商业软件。

总结与推荐

掌握浏览器开发者工具的 "Sources" 面板是提取和分析网页JavaScript代码的核心技能，90%的情况下它都能完美解决问题。