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. 結果圖 : overrides.png

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

擴展:

1. 設置持久化。

經過上面的設置後,嘗試打開其他網頁, 在Elements 面板中進行的樣式,

change-class

然後,在sources 中,就會自動生成對應域名的文件(在本地磁盤上新建文件)
圖片描述

新開tab 中重新打開頁面,修改依然生效,已經將本地的資源文件映射到了網絡,跟上面工作區設置持久化的效果類似。

在chrome 中點擊對應index.css文件,可以在右側面板中,直接修改未格式化的文件
indexcss

或者在本地磁盤中,使用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 發佈,增強用戶體驗,不過延期了,

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章