身為前端工程師通常都習慣在本地開發程式,大多的專案都是 HTML CSS JavaScript 三者成一組,所以在開發上本機還原也是相當簡單的,如果專案是因為環境上的因素無法在本機還原呢?像是程式必須在測試機才看得到效果、又或是使用 JSP 輸出 HTML 模板而你又無法安裝 JAVA 環境,這時在開發上就有點綁手綁腳了。

Resource Override

遇到這種情況我都會使用 chrome 的插件 Resource Override 使用起來也是非常的直觀,在你的開發面板會看到一個新的分頁,Overrides 他可以做到

  • URL 對 URL
  • URL 對 程式碼
  • 插入程式碼
  • 修改請求 Headers

適用情境

本地端不想/無法還原,只能在線上端觀看結果

組合技

一開始覺得不段貼上程式碼很沒效率一直想有沒有更快的方式,其實 URL 對 URL 這個 Rules 可以接受本地端的路徑,所以我們只要在本地端起一個 web server 就可以更快一些,外掛可以用 Web Server for Chrome vscode 可以用 Live Server 或是你要用 Node 起一個也是可以的。

Chrome Resource Override

Summary
Chrome Resource Override 插件開發技巧
Article Name
Chrome Resource Override 插件開發技巧
Description
使用 Chrome Resource Override 插件在本地端對線上端修改程式碼並且看到效果,如果你有無法在本地端還原或是修改的困擾,可以試試看用這個方式來修改你的程式碼。
Author
Publisher Name
bonze