5ep9lzv 发表于 2024-6-29 16:09:57

一款能够直接下载浏览器 sources 资源的 Chrome 插件【剧烈举荐】


    <h2 style="color: black; text-align: left; margin-bottom: 10px;">前言</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">经常在仿站的时候会遇到下载别人网站上的<span style="color: black;">照片</span>、css、js 等资源，<span style="color: black;">倘若</span>你是一个个的手动下载是很麻烦的，<span style="color: black;">亦</span>很慢的。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">程序员要学会偷懒，<span style="color: black;">倘若</span>这些资源能一键下载下来，并按原来的目录结构放好文件，直接打开就完美复原原来的网站，该多好啊！</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">笔者找了大半天，，找了好几个插件，都不太好用，<span style="color: black;">况且</span>会打乱目录结构。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">最终</span>找到了一个比较神奇的 Chrome 插件：Save All Resources 完美的满足了我的需求！</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">另一</span>，关注公众号：全栈修炼，发送 <a style="color: black;">1024</a> 可领取免费视频资料哦。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">安装</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">插件 GitHub <span style="color: black;">位置</span>：<a style="color: black;"><span style="color: black;">https://</span><span style="color: black;">github.com/up209d/Resou</span><span style="color: black;">rcesSaverExt</span></a></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">插件 Google <span style="color: black;">位置</span>：<a style="color: black;"><span style="color: black;">https://</span><span style="color: black;">chrome.google.com/webst</span><span style="color: black;">ore/detail/save-all-resources/abpdnfjocnmdomablahdcfnoggeeiedb</span></a></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-a4fcbeb783c41242512508ae428b789a_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">运用</span></h2>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">1. 审查</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">审查元素后，翻到最后一个选项，点击 Save All Resources <span style="color: black;">就可</span>。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-4a411bf9872fbe7fe810bcd0dcc56d6b_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">2. 下载</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">下载时的文件会被打包成一个压缩包。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">例如</span>我下载小米手机的官网页面：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-1ff475e908781a9d6548a5e1d22b3762_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-ae701bbf8daca8ec6ed9b23aeb23857a_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">3. 打开</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">解压下载的压缩包，里面的文件结构长<span style="color: black;">这般</span>。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-3b4bb9c0c0c9110a7a3ae59cbb23381d_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">html、css、js 等文件是下载下来了，直接打开你的 html 文件<span style="color: black;">就可</span>。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">本地服务 Live Server 打开</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">做前端<span style="color: black;">研发</span>的时候，最常用的 IDE 是 VsCode，<span style="color: black;">咱们</span><span style="color: black;">必须</span>打开浏览器进行预览和调试静态页面。有了 Live Server ，就<span style="color: black;">能够</span><span style="color: black;">处理</span>你的问题了。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">
      <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/v2-2288930d935328665e363f1c340d46d6_b.jpg" style="width: 50%; margin-bottom: 20px;"></div>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这个插件就<span style="color: black;">能够</span>实现静态、动态页面的实时预览，<span style="color: black;">保留</span>就能看见页面更新，不<span style="color: black;">必须</span>手动去刷新。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">用 VsCode 打开</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-61044656227c35d73cb48123acef4551_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">结果</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-2139ea1b26807f4b5bc675b91aa4bc33_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">这般</span><span style="color: black;">亦</span><span style="color: black;">能够</span><span style="color: black;">处理</span>请求的<span style="color: black;">照片</span>等资源找不到的问题。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">--- 全文完 ---</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">举荐</span>阅读：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">1. GitHub 上能挖矿的神仙技巧</a> - <span style="color: black;">怎样</span><span style="color: black;">发掘</span>优秀开源项目</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">2. 160+ 本技术类精华电子书开源了，<span style="color: black;">包含</span>前端、后端、数据结构与算法、计算机<span style="color: black;">基本</span>、设计模式、数据库等书籍</a></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">另一</span>，关注公众号：全栈修炼，发送 <a style="color: black;">1024</a> 可领取免费视频资料。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-2acd762b27385d32b4e6e49ed787b8ab_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>




jszmdq158 发表于 2024-8-24 03:26:14

你的努力一定会被看见，相信自己，加油。

流星的美 发表于 2024-8-31 02:46:17

你的见解真是独到，让我受益匪浅。

aikangjian 发表于 2024-9-8 10:04:17

大势所趋，用于讽刺一些制作目的就是为了跟风玩梗，博取眼球的作品。

wrjc1hod 发表于 2024-10-2 11:39:33

我赞同你的看法，你的智慧让人佩服，谢谢分享。

nqkk58 发表于 2024-11-8 08:29:44

你的见解独到，让我受益匪浅，非常感谢。
页: [1]
查看完整版本: 一款能够直接下载浏览器 sources 资源的 Chrome 插件【剧烈举荐】