chrome 開發者工具 - local overrides

使用chrome 做爲本地網絡服務

chrome 65+ 新功能， 使用咱們本身的本地資源覆蓋網頁所使用的資源，能夠使用本地css文件覆蓋網頁的css文件，修改樣式。

相似的，使用DevTools的工做區設置持久化，將本地的文件夾映射到網絡，在chrome開發者功能裏面對css 樣式的修改，都會直接改動本地文件，頁面從新加載，使用的資源也是本地資源，達到持久化的效果。

而後就是，不多使用的使用 local override 功能，來搭建一個本地的靜態網頁服務器：
搭建過程很是簡單，根據原文中的步驟（假設訪問的域名 chromeserver.com）：

1. 搭建local overrider的根目錄， C:/Dev/Web/chromelocal，
2. 在根目錄中新建文件夾，以 chromeserver.com 命名，進入該文件目錄，新建一個 index.html
3. 打開chrome 開發者工具， sources --> Overrides --> 勾選 Enable Local Overriders --> 點擊 Select folder for overrides ,選擇文件 C:/Dev/Web/chromelocal
4. 結果圖 ：

在打開了 開發者工具的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 發佈，加強用戶體驗，不過延期了，