chrome 開發者工具 - local overrides

leo108 發布于2019-08-02 11:40 / 2179人閱讀

摘要：比如為對應在目錄下，新建文件，文件中的內容，與正常接口返回格式相同，對象或者數組類型，從而覆蓋掉原接口請求。在中提及發布，增強用戶體驗，不過延期了，

使用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 發布，增強用戶體驗，不過延期了，

GPU云服務器云服務器 chrome webrtc 開發 Override Overriding overrides

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53043.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的工作區設置持久化，將本地的文件夾映射到網...

huhud 2019-08-23 12:15 評論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