chrome 開發(fā)者工具 - local overrides

Kosmos 發(fā)布于2019-08-29 16:54 / 802人閱讀

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

使用chrome 作為本地網(wǎng)絡(luò)服務(wù)

chrome 65+ 新功能，使用我們自己的本地資源覆蓋網(wǎng)頁所使用的資源，可以使用本地css文件覆蓋網(wǎng)頁的css文件，修改樣式。

類似的，使用DevTools的工作區(qū)設(shè)置持久化，將本地的文件夾映射到網(wǎng)絡(luò)，在chrome開發(fā)者功能里面對css 樣式的修改，都會直接改動本地文件，頁面重新加載，使用的資源也是本地資源，達(dá)到持久化的效果。

然后就是，很少使用的使用 local override 功能，來搭建一個本地的靜態(tài)網(wǎng)頁服務(wù)器：
搭建過程非常簡單，根據(jù)原文中的步驟（假設(shè)訪問的域名 chromeserver.com）：

搭建local overrider的根目錄， C:/Dev/Web/chromelocal，

在根目錄中新建文件夾，以 chromeserver.com 命名，進(jìn)入該文件目錄，新建一個 index.html

打開chrome 開發(fā)者工具， sources --> Overrides --> 勾選 Enable Local Overriders --> 點(diǎn)擊 Select folder for overrides ,選擇文件 C:/Dev/Web/chromelocal

結(jié)果圖：

在打開了開發(fā)者工具的tab中，訪問 http://chromeserver.com/，就可以看到頁面了。

擴(kuò)展：

1. 設(shè)置持久化。

經(jīng)過上面的設(shè)置后，嘗試打開其他網(wǎng)頁，在Elements 面板中進(jìn)行的樣式，

然后，在sources 中，就會自動生成對應(yīng)域名的文件（在本地磁盤上新建文件）

新開tab 中重新打開頁面，修改依然生效，已經(jīng)將本地的資源文件映射到了網(wǎng)絡(luò)，跟上面工作區(qū)設(shè)置持久化的效果類似。

在chrome 中點(diǎn)擊對應(yīng)index.css文件，可以在右側(cè)面板中，直接修改未格式化的文件

或者在本地磁盤中，使用IDE打開文件 C:/Dev/Web/chromelocal/static.segmentfault.com/v-5badf55c/index/css/index.css,格式化文件后，再修改里面的內(nèi)容，也可以自動刷新，顯示文件更改。

2. 模擬接口數(shù)據(jù)

對于返回json 數(shù)據(jù)的接口，可以利用該功能，簡單模擬返回?cái)?shù)據(jù)。

比如：
api 為 http://www.xxx.com/api/v1/list,

對應(yīng)在chromelocal 目錄下，新建文件 www.xxx.com/api/v1/list，list 文件中的內(nèi)容，與正常接口返回格式相同，

對象或者數(shù)組類型，從而覆蓋掉原接口請求。

相關(guān)功能

workspaces ，chrome 很早就引入了 workspaces ，這個功能允許把DevTools 當(dāng)做IDE使用，
只要在選擇了 Add folder to workspace 后，允許資源訪問，在chrome DevTools 中的改變，相應(yīng)也會保存在本地版本中，跟使用文本編輯器類似的類似的功能。

在 Chrome 63 What"s New In DevTools中提及 workspace2.0 發(fā)布，增強(qiáng)用戶體驗(yàn)，不過延期了，