chrome瀏覽器調試線上文件映射本地文件

經過ReRes讓chrome擁有路徑映射的autoResponse功能。

前端開發過程當中，常常會有須要對遠程環境調試的需求。好比，修改線上bug，開發環境不在本地等等。咱們須要把遠程css文件或者js映射到本地的文件上，經過修改本地文件進行調試和開發。一般咱們能夠經過如下方法來實現映射：

1.修改host文件——只能把域名映射到IP

2.使用Apache或者nginx搭建反向代理——須要裝環境，配置相對繁瑣

3.使用Fiddler中的AutoRespnose功能——不支持目錄映射，mac、linux沒法使用

以上方式，或者功能缺失，或者須要額外安裝軟件，或者配置繁瑣、或者不支持多平臺。我理想中的請求映射工具應該是這樣的：簡單，打開瀏覽器就能用、支持目錄映射和文件映射、跨平臺。 ReRes就是居於這個目標寫出來的，您能夠把請求映射到其餘的url，也能夠映射到你本機的文件或者目錄。ReRes支持單個url映射，也支持目錄映射。

如今就開始使用ReRes

首先從chrome商店安裝ReRes： https://chrome.google.com/webstore/detail/reres/gieocpkbblidnocefjakldecahgeeica?hl=zh-CN&gl=CN

安裝後，在地址欄輸入chrome://extensions/進入擴展頁，找到ReRes，勾選「容許訪問文件網址」，這樣才能讓ReRes支持本地映射，以下：

至此，ReRes就可使用了。下面是一些基本功能的使用操做方法：

添加規則

點擊「添加規則」按鈕，輸入如下信息，而後保存：

• If URL match： 一個正則表達式，當請求的URL與之匹配時，規則生效。注意:不要填開頭的/和結束的/gi，如/.*/gi請寫成.

• Response： 映射的響應地址，映射的響應地址，這個地址會替換掉url中與上面正則匹配的部分。線上地址以http://開頭，本地地址以file:///開頭，好比http://cssha.com或file:///D:/a.js

啓動/禁用

勾選/取消對應規則前面的勾選框便可。

編輯規則

鼠標移到響應規則上，點擊「編輯」。

刪除規則

鼠標移到響應規則上，點擊「刪除」。

批量導入規則

點擊「管理規則」按鈕進入管理頁，點擊頂部「導入」按鈕，便可導入規則列表文件。規則列表文件是一個json文件，其格式以下：

[
    {
        "req":"^https?:\\/\\/.*test.com",
        "res":"http://qunar.com",
        "checked":false
    },
    {
        "req":".*hanan.com",
        "res":"http://cssha.com",
        "checked":true
    }
]

其中相關字段含義以下：

• req：請求所匹配的正則表達式（對應於If URL match輸入框的內容）

• res：映射的響應地址（對應Response輸入框的內容）

• checked：是否啓用

 

本插件源碼託管在https://github.com/hanan198501/ReRes，開發過程當中採用瞭如下開源項目，感謝支持：

• LESS

• Bootstrap

• AngularJS