chrome 开发者工具 - local overrides
使用chrome 作为本地网络服务
chrome 65+ 新功能, 使用我们自己的本地资源覆盖网页所使用的资源,可以使用本地css文件覆盖网页的css文件,修改样式。
类似的,使用DevTools的工作区设置持久化,将本地的文件夹映射到网络,在chrome开发者功能里面对css 样式的修改,都会直接改动本地文件,页面重新加载,使用的资源也是本地资源,达到持久化的效果。
然后就是,很少使用的使用 local override 功能,来搭建一个本地的静态网页服务器:
搭建过程非常简单,根据原文中的步骤(假设访问的域名 chromeserver.com):
- 搭建local overrider的根目录, C:/Dev/Web/chromelocal,
- 在根目录中新建文件夹,以 chromeserver.com 命名,进入该文件目录,新建一个 index.html
- 打开chrome 开发者工具, sources --> Overrides --> 勾选 Enable Local Overriders --> 点击 Select folder for overrides ,选择文件 C:/Dev/Web/chromelocal
- 结果图 :
在打开了 开发者工具的tab中,访问 http://chromeserver.com/,就可以看到页面了。
扩展:
1. 设置持久化。
经过上面的设置后,尝试打开其他网页, 在Elements 面板中进行的样式,
然后,在sources 中,就会自动生成对应域名的文件(在本地磁盘上新建文件)
新开tab 中重新打开页面,修改依然生效,已经将本地的资源文件映射到了网络,跟上面工作区设置持久化的效果类似。
在chrome 中点击对应index.css文件,可以在右侧面板中,直接修改未格式化的文件
或者在本地磁盘中,使用IDE打开文件 C:/Dev/Web/chromelocal/static.segmentfault.com/v-5badf55c/index/css/index.css,格式化文件后,再修改里面的内容,也可以自动刷新,显示文件更改。
2. 模拟接口数据
对于返回json 数据的接口,可以利用该功能,简单模拟返回数据。
比如:
api 为 http://www.xxx.com/api/v1/list,
对应在chromelocal 目录下,新建文件 www.xxx.com/api/v1/list,list 文件中的内容,与正常接口返回格式相同,
对象或者数组类型,从而覆盖掉原接口请求。
相关功能
workspaces ,chrome 很早就引入了 workspaces , 这个功能允许把DevTools 当做IDE使用,
只要在选择了 Add folder to workspace 后,允许资源访问,在chrome DevTools 中的改变,相应也会保存在本地版本中,跟使用文本编辑器类似的类似的功能。
在 Chrome 63 What's New In DevTools中 提及 workspace2.0 发布,增强用户体验,不过延期了,
chrome 开发者工具 - local overrides的更多相关文章
- Chrome开发者工具详解(5)-Application、Security、Audits面板
Chrome开发者工具详解(5)-Application.Security.Audits面板 这篇文章是Chrome开发者工具详解这一系列的最后一篇,介绍DevTools最后的三个面板功能-Appli ...
- Chrome开发者工具详解(2)-Network面板
Chrome开发者工具详解(2)-Network面板 注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elem ...
- Chrome开发者工具详解(1)-Elements、Console、Sources面板
Chrome开发者工具详解(1)-Elements.Console.Sources面板 Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Netwo ...
- Chrome开发者工具详解(1)
Chrome开发者工具面板 面板上包含了Elements.Console.Sources.Network.Timeline.Profiles.Application.Security.Audits这些 ...
- Chrome开发者工具详解(2)
Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板.Timeline面板.Profiles面板.Application面板.Sec ...
- 【Tools】Chrome开发者工具详解
作为一名前端开发者,打交道最多的可能是和浏览器.市面上各种浏览器多不胜数,主流的有Chrome,Firefox,Safari,IE,Opera,非主流的如360,遨游,QQ浏览器,搜狗浏览器,据说淘宝 ...
- Chrome开发者工具详解(1):Elements、Console、Sources面板
Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Se ...
- Chrome开发者工具面板
Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板.Timeline面板.Profiles面板.Application面板.Sec ...
- 在chrome开发者工具中观察函数调用栈、作用域链与闭包
在chrome开发者工具中观察函数调用栈.作用域链与闭包 在chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量 ...
随机推荐
- poi生成excel整理(设置边框/字体/颜色/加粗/居中/)
转: poi生成excel整理(设置边框/字体/颜色/加粗/居中/) 2016年12月02日 11:05:23 吃奶的牛 阅读数:34324 HSSFWorkbook wb = new HSSFW ...
- 阶段3 2.Spring_10.Spring中事务控制_6 spring基于XML的声明式事务控制-配置步骤
环境搭建 新建工程 把对应的依赖复制过来 src下内容复制 配置spring中的声明事物 找到bean.xml开始配置 配置事物管理器 里面需要注入DataSource 2-配置事物通知 需要先导入事 ...
- Oracle中 ORA-12704:字符集不匹配
前言 在使用Union all连接时,若A集合中某列为nvarchar2或nvarchar类型,而B集合中无此列,用‘ ’ 来代替是会报字符集不匹配 1 select '中国','China',cas ...
- Lombok的用法
Lombok是一款Java开发插件,使得Java开发者可以通过其定义的一些注解来消除业务工程中冗长和繁琐的代码,尤其对于简单的Java模型对象(POJO).在开发环境中使用Lombok插件后,Java ...
- linux top 查看CPU命令
top 命令主要用于查看进程的相关信息,同时它也会提供查看系统平均负载,cpu 信息和内存信息 实时监控系统资源使用情况 [root@localhost ~]$ top // 动态查看进程使用资源的情 ...
- N76E003双串口无法进UART1中断问题解决办法
最近在做有关N76E003的项目,使用到双串口.串口的配置没有特殊要求,最基本的配置 void Uart0_Init(void) { //—————————串口0引脚初始化———————— set_P ...
- SpringMvc 整合mybatis项目搭建
1.使用idea创建maven项目 2.在项目src目录下 添加java文件夹 并设置类型为sources,添加resource文件夹 设置为resources 4.修改pom文件 添加引用 < ...
- 思考--mysql 分库分表的思考
查询不在分库键上怎么办,扫描所有库?由于分库了,每个库扫描很快?所以比单个表的扫描肯定快,可以这样理解吗. 多表jion怎么弄,把内层表发给每个分库吗? citus,tidb 都有这些问题,citus ...
- Centos7 升级php版本到php7
一.首先查看是否有老版本 yum list installed | grep php 二.如果安装的有 yum remove php.x86_64 php-cli.x86_64 php-common. ...
- python_操作MySQL 初解
单文件操作数据库 import random import threading, multiprocessing import time, datetime import pymysql import ...