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

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

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

  • 最終效果：原來的請求域名已經變為了 http://127.0.0.1:8000，這樣我們實現了前後端分離專案的本地除錯
    file
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章