如何快速获取网页源码?
![在这里插入图片描述](https://img-blog.csdnimg.cn/c1f88f6ba3c34748ab495fc8ae3dc96f.png)
我们在学习和研究的时候,或者看到非常酷炫的页面效果,需要网站的源代码进行借鉴,但每次需要下载网站源代码,我们都需要找到一个,下载一个,每次只能下载一个文件,非常缓慢,而且还要自己拼凑一下源代码文件。非常不方便。那我们要如何才能快速下载网站的源代码进行研究呢?
一、普通下载方式
我们先来介绍一下普通的下载方式。
首先,进入浏览器,找到我们需要的网站,然后按f12,打开开发者工具。
找到source,我们可以看到整个网站的源代码。包括js,css,image等文件。
![在这里插入图片描述](https://img-blog.csdnimg.cn/422444b1ec1449a9bef12b4c04f50640.png)
找到我们需要的一个文件,鼠标右键,save as 保存为。但图片我们还不可以直接保存。
![在这里插入图片描述](https://img-blog.csdnimg.cn/a4a72b5721b941a184d015fd5c3fed7f.png)
那现在问题来了,我想要完整保存所有网站的源代码,以及图片资源如何才能做到呢?
二、浏览器网站源代码下载插件
1.首先去GitHub下载插件并解压:Save All Resources
https://github.com/up209d/ResourcesSaverExt (注意:这里下载步骤需要科学上网)
![![在这里插入图片描述](https://img-blog.csdnimg.cn/67eb9213717b457f8875ad9516bb8807.png](https://img-blog.csdnimg.cn/babeacd3afb84b26978d5b5e09759ee6.png)
解压后如图所示,记住你的解压路径:
![在这里插入图片描述](https://img-blog.csdnimg.cn/97ba7f666306413e811d9a10da0e4c24.png)
2.打开谷歌浏览器开发者工具并打开开发者模式,加载插件,如下图所示:
![在这里插入图片描述](https://img-blog.csdnimg.cn/99c188f6e6c04181b4cdb26d1d9a5ea3.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/1b85bd7121b24e01a3e3ea657987cd44.png)
扩展插件选择下面这个文件
![在这里插入图片描述](https://img-blog.csdnimg.cn/ef9f7a6a5fd145719da3713c55713be6.png)
3.以彼岸图网为例,查看源代码,并下载:
![在这里插入图片描述](https://img-blog.csdnimg.cn/fb1d9d2c931e42f4963d3606c8bc11fd.png)
点击下载
![![在这里插入图片描述](https://img-blog.csdnimg.cn/481b14694bad4aa283f14f7e071de8ec.png](https://img-blog.csdnimg.cn/261ad7a5063746d1af5f7d3ae7a0eb8a.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/dbc8c6e0891f48a0bf1abbd259d311e5.png)
解压: 将解压后的文件放入vscode编辑器里面
![在这里插入图片描述](https://img-blog.csdnimg.cn/fddefa689a5b4b42aa0ab4626006187b.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/8703b31c0d794fec98a6e9ac30990843.png)
vscode 启用open with live server 功能
一、open with live server 安装
在扩展中输入live server,点击安装即可
![![在这里插入图片描述](https://img-blog.csdnimg.cn/3133607cefce4bd4aa1dc25a0f413ec5.png](https://img-blog.csdnimg.cn/54d1427042be48519a6a2be9d66f52d9.png)
打开文件
使用 vscode 打开 index.htm l页面,右键 --> open with live server。
![在这里插入图片描述](https://img-blog.csdnimg.cn/f991a02abc2a4d52b62bc27e47d50689.png)
成功!
![在这里插入图片描述](https://img-blog.csdnimg.cn/22b963278090480db498a006befa50c4.png)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)