如何快速获取网页源码(直接把网站的 js css html 扒下来的)

news2025/2/28 16:56:05

如何快速获取网页源码?

在这里插入图片描述
我们在学习和研究的时候,或者看到非常酷炫的页面效果,需要网站的源代码进行借鉴,但每次需要下载网站源代码,我们都需要找到一个,下载一个,每次只能下载一个文件,非常缓慢,而且还要自己拼凑一下源代码文件​。​非常不方便。那我们要如何才能快速下载网站的源代码进行研究呢​?

一、普通下载方式

我们先来介绍一下普通的下载方式​。

首先,进入浏览器,找到我们需要的网站,然后按f12,打开开发者工具。

找到source,我们可以看到整个网站的源代码​。包括js,css,image等文件​。

在这里插入图片描述
找到我们需要的一个文件,鼠标右键,save as 保存为。但图片我们还不可以直接保存​。

在这里插入图片描述
那现在问题来了,我想要完整保存所有网站的源代码,以及图片资源如何才能做到呢​?

二、浏览器网站源代码下载插件​

1.首先去GitHub下载插件并解压:Save All Resources

![在这里插入图片描述](https://img-blog.csdnimg.cn/67eb9213717b457f8875ad9516bb8807.png

解压后如图所示,记住你的解压路径:
在这里插入图片描述

2.打开谷歌浏览器开发者工具并打开开发者模式,加载插件,如下图所示:

在这里插入图片描述
在这里插入图片描述

扩展插件选择下面这个文件

在这里插入图片描述

3.以彼岸图网为例,查看源代码,并下载:

在这里插入图片描述

点击下载

![在这里插入图片描述](https://img-blog.csdnimg.cn/481b14694bad4aa283f14f7e071de8ec.png
在这里插入图片描述
解压:
在这里插入图片描述

vscode 启用open with live server功能

一、open with live server安装

在扩展中输入live server,点击安装即可

![在这里插入图片描述](https://img-blog.csdnimg.cn/3133607cefce4bd4aa1dc25a0f413ec5.png

打开文件
在编辑的html页面,右键 --> open with live server。

在这里插入图片描述

成功!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405018.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue-quill-editor富文本编辑器-扩展表格、图片调整大小

上篇文章已经讲到、vue-quill-editor的基本配置和图片转成url 这篇文章主要使用插件来完成 图片调整大小 和 表格的插件使用(这两个目前quill 版本并不兼容 如果有大神解决了还望指点) 参考文章: vue-quill-editor 富文本编辑器支持图片拖拽…

这12个前端在线工具网站,建议每个开发人员了解下

尽管前端网站开发可能会具有挑战性,但并不一定非常困难。本文将向您介绍12个重要的网站,它们能够帮助您简化前端网站开发的过程,让它变得更加快捷和愉悦。在这些网站上,您可以找到各种工具、技术和资源,包括设计素材、…

微信小程序开发入门与实战(数据监听)

作者 : SYFStrive 博客首页 : HomePage 📜: 微信小程序 📌:个人社区(欢迎大佬们加入) 👉:社区链接🔗 📌:觉得文章不错可以点点关注 &#x1f4…

js构造函数详解

典型的面向对象编程语言(比如C和Java),存在“类”(class)这个概念。所谓“类”就是对象的模板,对象就是“类”的实例。但是,在JavaScript语言的对象体系,不是基于“类”的&#xff0…

前端基本知识介绍

目录 一.前端三剑客 1.前导 2.三剑客的分工 二.VsCode的介绍与配置 1.vscode的介绍 2.vscode的下载安装 3.vscode的使用 3.1 图形界面操作 3.3 常用插件 三.HTML基础标签 HTML基础知识 1.HTML为何物? 2.标签介绍 3.HTML属性 4.HTML标签骨架 基本的H…

微信小程序获取用户openid

小程序端直接获取: 实现代码:直接简单 wx.login({success(res) {if (res.code) {//发起网络请求wx.request({//这里填你自己的appid 和 wxspSecret url: "https://api.weixin.qq.com/sns/jscode2session?appid" wxspAppid"&secre…

2022年微信小程序授权登录的最新实现方案

微信授权登录 我们的项目开发有时候用到用户的一些信息,比如头像,昵称等。目前小程序为我们提供好了wx.getUserProfile方法以供获取用户信息,它的使用非常简单。 wx.getUserProfile方法获取用户信息 不推荐使用 wx.getUserInfo 获取用户信…

vue2.0运行导入的项目出现node:events:491 throw er; // Unhandled ‘error‘ event错误提示解决办法

只为记录自己遇到的错误。 错误提示: App running at: - Local: http://localhost:8080/ - Network: unavailable Note that the development build is not optimized. To create a production build, run npm run build. node:events:491 throw er…

微信小程序支付完整流程(前端)

微信小程序中,常见付款给商家的场景,下面列出企业小程序中,从0起步完整微信支付流程。 一,注册微信支付商户号(由上级或法人注册) 接入微信支付 - 微信商户平台 此商户号,需要由主管及更上级领导…

快速上手vue的登录界面(最新版)

文章目录一、创建vue项目二、引入依赖三、改造下项目四、写入Login视图总结这是一个非常非常适合新手的vue登录界面,总体来说美观大气,axios那部分没有发,有需要的大家可以自己进行二次开发,继续编写。 用到了技术栈有 vue/cli 5.…

vue3 | 数据可视化实现数字滚动特效

前言 vue3不支持vue-count-to插件,无法使用vue-count-to实现数字动效,数字自动分割,vue-count-to主要针对vue2使用,vue3按照会报错: TypeError: Cannot read properties of undefined (reading _c) 的错误信息。这个时…

idea如何导入jar包

通过添加Libraries的方式引入: 1、首先在根目录下创建一个 libs 的目录 2、打开 File -> Project Structure 3、单击 Libraries -> "" -> "Java" -> 选择我们导入的项目主目录,点击OK 4、注意:在弹出的方框…

Vite 完整版详解

目录 序论: vite架子分析 1、 打包构建: 2、环境变量 3、模式 4、兼容老浏览器 5、typescript相关 6、基本配置 核心配置全集 推荐两个插件插件Volar 、 Vue 3 Snippets 序论: 开发环境:ESMHMR:来实现模块的热更新;类…

前端项目性能优化方案有哪些

目录 一、 加载优化(减少http请求数) 二、图片优化 三、使用CDN 四、开启Gzip(代码压缩) 六、减少不必要的Cookie 七、脚本优化 八、前端代码结构的优化 九、SEO优化 一、 加载优化(减少http请求数&#xff09…

vue中axios的二次封装——vue 封装axios详细步骤

一、为什么要封装axios api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护。 通常我们的项目会越做越大,页面也会越来越多,如果页面非常的少,直接用axios也没有什么大的影响,那页面…

vue3的setup的使用和原理解析

1.前言 最近在做vue3相关的项目,用到了组合式api,对于vue3的语法的改进也是大为赞赏,用起来十分方便。对于已经熟悉vue2写法的同学也说,上手还是需要一定的学习成本,有可能目前停留在会写会用的阶段,但是s…

Swagger-的使用(详细教程)

文章目录前言一、简介二、基本使用1. 导入相关依赖2. 编写配置文件2.1 配置基本信息2.2 配置接口信息2.3 配置分组信息3. 控制 Swagger 的开启4. 常用注解使用ApiModelApiModelPropertyApiOperationApiParam5. 接口调用三、进阶使用1. 添加请求头四、项目下载前言 作为后端开放…

37.JavaScript对象与JSON格式的转换,JSON.stringify、JSON.parse方法的使用方法和注意事项

文章目录JSON处理JSON.stringifystringify的限制排除和替换映射函数格式化使用的空格数量自定义toJSON方法JSON.parse使用reviver总结JSON处理 JSON(JavaScript Object Notation)是JavaScript表达值和对象的通用数据格式,其本质就是符合一定…

2023前端面试题及答案整理(JavaScript)

JS类型 string,number,boolean,undefined,null,symbol(es6),BigInt(es10),object 值类型和引用类型的区别 两种类型的区别是:存储位…

Js各种时间转换问题(YYYY-MM-DD 时间戳 中国标准时间)

1. 类型总结 指定格式 YYYY-MM-DD HH:MM:SS时间戳中国标准时间 Sat Jan 30 2022 08:26:26 GMT0800 (中国标准时间) new Date()获得系统当前时间就会是这种形式 2. 类型之间的转换 时间戳转换为 yyyy-mm-dd或yyyy-MM-dd HH-mm-ss function timestampToTime(timestamp) {var …