用Chrome將本地端檔案替代伺服器檔案

功能介紹

很多時候我們在除錯前端時,會需要把某些例如像設定檔之類換成別的(例如換成DEV環境的設定檔),這個時候可以用Chrome Developer Tool內建的功能,指定替換掉某個伺服器上面的檔案,非常方便。

很多時候我們要了解別人的網站的一些技術,這個功能也可以幫上很多忙

使用方法

在 Chrome 中可以使用”Developer Tool > Source > 找到要取代的檔案 > 右鍵 > Override Content”去把內容取代掉

點選了之後,切換到Override頁籤,選擇取代的檔案所放置的資料夾,接著就可以去該資料夾看你剛剛所選的Override的檔案

然後更改裡面的檔案,同步就會更改線上的檔案,我們可以console.log出一些我們有興趣知道的東西,或者修改某些設定。

取代後不能下載檔案的問題

如果某些檔案不能取代,而出現錯誤訊息時,如下

則可以去關掉Source Map的功能

  • 打開 開發者工具 (DevTools):按下 F12 或右鍵點選網頁選擇「檢查」。
  • 點擊右上角的 設定齒輪圖示(通常在「Console」標籤右側)。
  • 在「Preferences」設定頁中,找到「Sources」部分。
  • 取消勾選Enable JavaScript source maps(啟用 JavaScript Source Map)和 Enable CSS source maps(啟用 CSS Source Map)這兩個選項。
  • 關閉設定窗口。

17年資歷女工程師,專精於動畫、影像辨識以及即時串流程式開發。經常組織活動,邀請優秀的女性分享她們的技術專長,並在眾多場合分享自己的技術知識,也活躍於非營利組織,辦理活動來支持特殊兒及其家庭。期待用技術改變世界。

如果你認同我或想支持我的努力,歡迎請我喝一杯咖啡!讓我更有動力分享知識!