chrome 开发者工具 - local overrides

huhud 发布于2019-08-23 12:15 / 1376人阅读

摘要：比如为对应在目录下，新建文件，文件中的内容，与正常接口返回格式相同，对象或者数组类型，从而覆盖掉原接口请求。在中提及发布，增强用户体验，不过延期了，

使用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 发布，增强用户体验，不过延期了，

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98179.html

chrome 开发者工具 - local overrides

摘要：比如为对应在目录下，新建文件，文件中的内容，与正常接口返回格式相同，对象或者数组类型，从而覆盖掉原接口请求。在中提及发布，增强用户体验，不过延期了，使用chrome 作为本地网络服务 chrome 65+ 新功能，使用我们自己的本地资源覆盖网页所使用的资源，可以使用本地css文件覆盖网页的css文件，修改样式。类似的，使用DevTools的工作区设置持久化，将本地的文件夹映射到网...

Kosmos 2019-08-29 16:54 评论0 收藏0
chrome 开发者工具 - local overrides

摘要：比如为对应在目录下，新建文件，文件中的内容，与正常接口返回格式相同，对象或者数组类型，从而覆盖掉原接口请求。在中提及发布，增强用户体验，不过延期了，使用chrome 作为本地网络服务 chrome 65+ 新功能，使用我们自己的本地资源覆盖网页所使用的资源，可以使用本地css文件覆盖网页的css文件，修改样式。类似的，使用DevTools的工作区设置持久化，将本地的文件夹映射到网...

leo108 2019-08-02 11:40 评论0 收藏0
SpringMVC之源码分析--LocaleResolver（二）

摘要：概述上一篇就默认的进行了分析，详细请参考，本节我们继续分析学习，主要分析解析器类继承关系如下图由上面类图可知，继承并实现接口，主要是操作的工具类，继承接口，增加了信息操作。即通过实现的选择。概述上一篇就Spring MVC默认的LocaleResovler（AcceptHeaderLocaleResolver）进行了分析，详细请参考https://segmentfault.com/...

RichardXG 2019-08-15 15:56 评论0 收藏0
爬虫可视化点选配置工具之chrome插件简介

摘要：从右上角菜单更多工具扩展程序可以进入插件管理页面，也可以直接在地址栏输入访问。其中，个是必不可少的，和是推荐的。什么是Chrome插件 Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包. 开发与调试 Chrome插件没有严格的项目结构要求，只要保证本目录有一个manifest.json即...

RiverLi 2019-08-16 13:25 评论0 收藏0
SpringMVC之源码分析--LocaleResolver（一）

摘要：概述为我们提供国际化支持，通过设置系统的环境，根据运行环境使用不同的语言显示。提供接口的作用是解析客户端使用的地区，目的是为了根据这些信息实现视图多语言即国际化。接口继承接口，增加时区支持。概述 Spring MVC为我们提供国际化支持，通过设置系统的环境，根据运行环境使用不同的语言显示。Spring提供LocaleResolver接口的作用是解析客户端使用的地区（Locale），目...

HtmlCssJs 2019-08-15 15:55 评论0 收藏0