使用 chromium 以及 Chrome 外掛 API 實現本地除錯前後端分離專案

主要是為了可以利用現有的前端頁面更方便地對 bug 進行重現、除錯。而不用自己去 postman 寫測試引數等等。

因為有時候流程比較長，自己在 postman 寫測試資料的過程也會很耗時，這個外掛就是要減少這其中的耗時。

• 第一步：啟動 Chromium，/Applications/Chromium.app/Contents/MacOS/Chromium --disable-web-security --user-data-dir --disable-extensions-http-throttling
  • 這裡要加上三個引數：具體含義自行百度，如果不加上的話，由於瀏覽器的安全策略，會阻止外掛的重定向
• 第二步：點選 Chromium 右上角的三個點，按圖示方式開啟擴充套件頁面
  
• 第三步：clone 原始碼，git clone https://github.com/eleven26/tw-debugger/tree/develop
• 第四步：點選 Load unpacked 載入上一步 clone 的程式碼（需要先開啟開發者模式，Developer mode 右邊的開關），下圖
  
  
• 第五步：我們拿 github 做一下測試，下面第一張圖是實際請求的地址，我們待會會使用外掛重定向該請求到本地
  
  • 上圖是外掛配置，會把 https://api.github.com 的請求重定向到 http://127.0.0.1:8000
    
  • 上圖是未啟用外掛時候的請求
    
  • 上圖是未啟用外掛時候的請求響應
    
  • manifest.json 配置，需要在這裡配置域名許可權，這裡我們實際使用的時候就配置為自己專案前端頁面的訪問地址，可以使用萬用字元。

    這裡有個需要說明的，你的外掛只能在這裡列出的域名列表中生效

• 最終效果：原來的請求域名已經變為了 http://127.0.0.1:8000，這樣我們實現了前後端分離專案的本地除錯