手把手教你接入前端熱門抓包神器 - whistle

大家好，我是若川，今天推薦騰訊前端團隊的這篇好文。

whistle 是一個基于 Node.js 的跨平臺網絡調試工具。最近隨著 Nohost 的開源，有不少同學問了 whistle 相關的問題，本篇文章將結合幾個常見的業務場景介紹如何在本地前端項目開發中使用 whistle 。

一、使用webpack devServer的項目

項目準備

如今，大部分的前端項目是以 webpack 作為開發和構建工具進行項目開發的。我們將以這樣一個最常見的場景，即以 webpack 開啟本地 devServer 進行開發和調試的方式，展示如何在這樣的前端項目中結合使用 whistle 。

我們以一個 create-react-app 開啟的項目為事例來進行展示。首先，假定有一個以 create-react-app 新建的，名為 my-app 的前端項目：

create-react-app?my-app
cd?my-app
npm?run?start

會在瀏覽器中開啟一個 localhost:3000 的 tab，這是我們常見的一個本地前端開發的場景。


本地 host 的弊端

一般情況下，我們可以直接在 localhost 下進行本地的調試開發。但是，基于 localhost 的本地開發有不少局限性：

  • 用戶身份相關的部分功能，如登陸功能，cookie 讀取等對客戶端的域名有限制，使用 localhost 這個 host 可能會遇到限制。

  • 使用 localhost 進行本地開發，業務代碼中可能需要進行一些額外的邏輯判斷，如針對本地域名和線上域名做行為區分等。


配置 whistle

為了解決上述問題，根據我們的實踐經驗，本地開發時，通過線上真實域名訪問本地前端項目，似乎是一種更加有效的開發方式。

假設我們這個本地項目的線上真實域名為?qq.ketang.com?，則我們的目標即是通過?qq.ketang.com 訪問和調試本地的 my-app 前端項目。

下面我們將演示如何使用 whistle 實現這個目標操作。

1、配置 whistle 規則

打開 whsitle 的規則配置地址?127.0.0.1:8899?, 依次進行如下操作:

-> 選擇 Rules 選項卡

-> 雙擊開啟 Default 配置（其后方出現綠色的打勾即為開啟成功）

-> 在右側規則編輯面板中輸入以下規則

qq.ketang.com/??http://127.0.0.1:3000/

-> 選擇 Save


2、啟用 proxy

選擇 SwitchyOmega 插件的 proxy 模式

隨后,在瀏覽器中訪問地址?https://qq.ketang.com, 就能成功訪問到我們本地的 my-app 項目了。

現在，我們就可以用項目的線上地址來調試本地項目，而不用使用?127.0.0.1:3000?這樣的本地地址了。


whislte 做了什么

這其實是 whislte 中的配置規則起了作用

qq.ketang.com/??http://127.0.0.1:3000/

這條規則將所有?qq.ketang.com/及其子路徑下的請求轉發到了http://127.0.0.1:3000/下。

whistle 的強大功能之一就是提供了各種模式的規則匹配以應對前端開發中的不同場景，上面這條，只是一條最簡單的規則。

如果你想現在就對 whistle 的配置規則有個更全面和清晰的認識，可以參考以下鏈接：

#?whistle?配置方式
https://wproxy.org/whistle/mode.html#?whistle?規則的模式匹配
http://wproxy.org/whistle/pattern.html

即使你有沒細細翻閱又或者沒有很好地理解 whistle 的配置規則也沒關系，下面我們將繼續以這個項目為例，結合幾個常見的開發場景，告訴開發者應該如何配置常見的 whislte 規則。


忽略子路徑下的 cgi 接口轉發

在我們的 my-app 項目中，如果項目中涉及到同域下子路徑的后端接口，如qq.ketang.com/cgi-proxy/xxxxx?，我們的初衷是 cgi 接口不需要轉發，依然走線上即可。

但是如果按照目前的配置，該 cgi 接口也會被轉發至本地的相應路徑，這顯然不是我們希望看到的結果。

#?bad,?不是我們所希望的
#?qq.ketang.com/cgi-proxy/xxxxx?也會轉發至?http://127.0.0.1:3000/cgi-proxy/xxxx
qq.ketang.com/??http://127.0.0.1:3000/

此處需要使用 excludeFilter 規則：

#?good，使用excludeFilter規則,?路徑匹配
#?qq.ketang.com/cgi-proxy/?及其子路徑下的請求不會被轉發至?http://127.0.0.1:3000/cgi-proxy/
qq.ketang.com/??http://127.0.0.1:3000/?excludeFilter://qq.ketang.com/cgi-proxy/

以上我們在 excludeFilter 里采取的是路徑匹配，此外我們還可以采取通配符匹配或者正則匹配來實現這一功能：

#?also?good,?使用excludeFilter規則,?通配符匹配
#?qq.ketang.com/cgi-proxy/,?qq.ketang.com/cgi-bin/?...?這類的請求都不會被轉發
qq.ketang.com/??http://127.0.0.1:3000/?excludeFilter://^qq.ketang.com/cgi-*
#?also?good,?使用excludeFilter規則,?正則匹配
#?qq.ketang.com/cgi-proxy/,?qq.ketang.com/cgi-bin/?...?這類的請求都不會被轉發
qq.ketang.com/??http://127.0.0.1:3000/?excludeFilter:///^\w+://qq\.ketang\.com/cgi-/

有讀者可能會疑惑，為什么以上正則匹配中的//qq?的//沒有轉義，這是因為在?whistle 內部實際上是調用了new RegExp?的方式進行構造正則，已經自動做了轉義，如果不放心，那么寫成 //qq 也可以。

關于模式匹配的具體規則可以參考官方文檔：

#?whistle?規則的模式匹配
http://wproxy.org/whistle/pattern.html


特定 cgi 接口的 mock

一個常見的場景是我們需要對某個 cgi 接口的返回數據進行改造以模擬前端的多種 case ，whistle 有多種方式可以幫助開發者實現該功能。

假設有一個 cgi 接口路徑為/cgi-proxy/getMyName, 則本地 mock 的方式有

  • 以本地文件作為響應

#?qq.ketang.com/cgi-proxy/getMyName?以本地的//User/dug/test/getMyName.json文件作為響應,
qq.ketang.com/cgi-proxy/getMyName??file:///User/dug/data/getMyName.json

  • 編輯在線文件作為響應

    如果不想用本地文件，也可以直接用 whistle 提供的在線文本功能。在 whislte ?的配置界面中：

->選擇 “Values”

->點擊 “Create”, 輸入自定義的文件名（此處為ans.json）

->選中新建的文件，在右側的編輯欄中輸入作為響應的內容

#?qq.ketang.com/cgi-proxy/getMyName?以Values面板中的ans.json作為響應
qq.ketang.com/cgi-proxy/getMyName??file://{ans.json}

  • 使用 xfile 模式

xfile 模式和上述的 file 模式功能基本一致，xfile 和 file 的唯一區別是 file 找不到對應文件返回404，而xfile則是繼續請求線上資源。

#?xfile和file基本功能一致，只是若找不到對應文件，xfile將會繼續請求線上資源
qq.ketang.com/cgi-proxy/getMyName??xfile://{ans.json}

二、無構建工具的傳統前端項目

不少老的項目由于種種原因沒有使用構建工具來構建前端 JS，CSS 等前端資源。對于這種項目，我們希望用本地的對應資源來進行開發和調試。

比如，在我們現在需要對一個老項目進行迭代，項目的線上域名為qq.ketang.com, 這次改動主要涉及到以下兩個文件：

<!--?index.html?-->
...<link?rel="stylesheet"?href="/assets/css/main.css"?type="text/css">
...
<script?src='assets/js/module/my.js'>

在 whislte 中，我們需要配置規則：

#?分別將線上的css和js的訪問?指向本機的項目路徑qq.ketang.com/assets/css/?xfile:///User/dug/myWork/ketang_pro/assets/css/qq.ketang.com/assets/js/??xfile:///User/dug/myWork/ketang_pro/assets/js/

之后，我們在瀏覽器訪問 qq.ketang.com，其中對于/assets/css/?和/assets/js/路徑下的請求將會以本地項目目錄下的對應文件響應，然后我們就能在本地修改和調試項目代碼了。

三、以插件支持特殊的需求場景

有一些特殊的應用場景，依靠 whistle 的基礎功能可能無法實現。

但是，whistle 支持自定義插件來拓展功能，同時社區也有一些插件的積累。

例如，假設項目中有一個 combo 的 url 請求為http://i.cdn.com/??x.js,y.js,z.js?。通過社區的 whistle.combo 插件可以實現將 combo url 切割成數組[x.js, y.js, z.js]并分別組合成?http://i.cdn.com/x.js, http://i.cdn.com/y.js, http://i.cdn.com/z.js

關于插件 whistle.combo 詳見

#?whisle.combo
https://github.com/whistle-plugins/whistle.combo

另外，這里有一份 whistle 的插件集合，可以在里面搜尋是否有滿足自己需求的插件。

#?whislte?插件列表
https://github.com/whistle-plugins

更多關于 Nohost 的信息請點擊“閱讀原文”。

常駐推薦閱讀

若川知乎高贊：有哪些必看的 JS庫？
我在阿里招前端，我該怎么幫你？（現在還可以加模擬面試群）
如何拿下阿里巴巴 P6 的前端 Offer
如何準備阿里P6/P7前端面試--項目經歷準備篇
大廠面試官常問的亮點，該如何做出？
如何從初級到專家(P4-P7)打破成長瓶頸和有效突破
若川知乎問答：2年前端經驗，做的項目沒什么技術含量，怎么辦？

常駐末尾

你好，我是若川，江西人~(點擊藍字了解我)歷時一年只寫了一個學習源碼整體架構系列?有哪些必看的JS庫：jQuery、underscore、lodash、sentry、vuex、axios、koa、redux

  1. 關注若川視野，回復"pdf" 領取優質前端書籍pdf，回復"1"，可加群長期交流學習

  2. 我的博客地址：https://lxchuan12.gitee.io?歡迎收藏

  3. 覺得文章不錯，可以?分享、點贊、在看?呀^_^另外歡迎留言交流～

小提醒：若川視野公眾號面試、源碼等文章合集在菜單欄中間【源碼精選】按鈕，歡迎點擊閱讀，也可以星標我的公眾號，便于查找

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/276124.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/276124.shtml
英文地址，請注明出處：http://en.pswp.cn/news/276124.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Linux命令之hexdump - ”十六“進制查看器

Linux命令之hexdump - ”十六“進制查看器

轉載鏈接&#xff1a;http://codingstandards.iteye.com/blog/805778 用途說明 hexdump命令一般用來查看”二進制“文件的十六進制編碼&#xff0c;但實際上它的用途不止如此&#xff0c;手冊頁上的說法是“ascii, decimal, hexadecimal, octal dump“&#xff0c;這也就是本文…
閱讀更多...
使用數據增強技術提升模型泛化能力

使用數據增強技術提升模型泛化能力

在《提高模型性能&#xff0c;你可以嘗試這幾招...》一文中&#xff0c;我們給出了幾種提高模型性能的方法&#xff0c;但這篇文章是在訓練數據集不變的前提下提出的優化方案。其實對于深度學習而言&#xff0c;數據量的多寡通常對模型性能的影響更大&#xff0c;所以擴充數據規…
閱讀更多...
關于不同用戶進入系統報錯的請求

關于不同用戶進入系統報錯的請求

我自己搞了個系統,用超級用戶進入系統正常,用普通用戶進入系統就報錯,Microsoft JET Database Engine (0x80040E07) 標準表達式中數據類型不匹配。 /xs/huiyuan/huiyuan_bf.asp, 第 203 行 代碼如下請各位高手幫忙 <% if request.Cookies("shiwei_username")"…
閱讀更多...
React 與 Vue 框架的設計思路大 PK

React 與 Vue 框架的設計思路大 PK

大家好&#xff0c;我是若川。今天分享一篇框架設計思路的好文。關于我 大家好我是花果山的大圣&#xff0c;今天很榮幸&#xff0c;有機會跟大家分享一下很多年輕人感興趣的話題《 Vue 和 React 設計思想 PK》,個人水平有限&#xff0c;如果有理解不到位的請傾盆&#xff0c;大…
閱讀更多...
php foreach id是否存在數組_請糾正這 5 個 PHP 編碼小陋習

php foreach id是否存在數組_請糾正這 5 個 PHP 編碼小陋習

在做過大量的代碼審查后&#xff0c;我經常看到一些重復的錯誤&#xff0c;以下是糾正這些錯誤的方法。在循環之前測試數組是否為空$items [];// ...if (count($items) > 0) {foreach ($items as $item) {// process on $item ...}}foreach以及數組函數 (array_*) 可以處理…
閱讀更多...
1161轉進制（C語言）

1161轉進制（C語言）

一&#xff1a;題目 二&#xff1a;思路分析 1.首先該題目讓我們使用遞歸求十進制轉其他進制 2.其次&#xff0c;我們要知道十進制轉換為其他進制怎么轉換&#xff0c;以例題所給的數據為例 由此圖可以看出&#xff0c;十進制轉換為其他進制&#xff0c;是輾轉相除法&#xf…
閱讀更多...
PHP異常處理

PHP異常處理

轉載鏈接&#xff1a;http://www.blogdaren.com/post-2030.html 版權聲明&#xff1a;除非注明&#xff0c;本文由( manon )原創&#xff0c;轉載請保留文章出處 本文鏈接&#xff1a;PHP register_shutdown_function函數詳解 腳本時常死掉,而且并不總是那么好看. 我們可不想…
閱讀更多...
應對無協議脫歐 葡萄牙機場將為英籍旅客設快速通道

應對無協議脫歐 葡萄牙機場將為英籍旅客設快速通道

中新網1月18日電 據臺灣《聯合報》援引英媒報道&#xff0c;英國首相特蕾莎?梅的脫歐協議遭下院否決后&#xff0c;英國無協議脫歐的可能性變大。葡萄牙總理科斯塔17日表示&#xff0c;里斯本當局正對機場開設特殊通道進行規劃&#xff0c;使英國旅客無論英國最后如何脫歐&…
閱讀更多...
javascript 日期控件

javascript 日期控件

http://www.my97.net/dp/index.asp轉載于:https://www.cnblogs.com/Ken-Cai/archive/2010/04/08/1707080.html
閱讀更多...
6輪字節前端校招面試經驗分享

6輪字節前端校招面試經驗分享

大家好&#xff0c;我是若川。最近金三銀四&#xff0c;今天分享一篇字節前端校招面試經驗的輕松好文&#xff0c;相信看完會有所收獲。也歡迎點擊下方卡片關注或者星標我的公眾號若川視野因為我錯過了2020年的秋招&#xff08;ps: 那時候連數據結構與算法都還沒學完&#xff0…
閱讀更多...
redis存opc_Redis集群的三種模式

redis存opc_Redis集群的三種模式

一、主從模式通過持久化功能&#xff0c;Redis保證了即使在服務器重啟的情況下也不會損失(或少量損失)數據&#xff0c;因為持久化會把內存中數據保存到硬盤上&#xff0c;重啟會從硬盤上加載數據。但是由于數據是存儲在一臺服務器上的&#xff0c;如果這臺服務器出現硬盤故障等…
閱讀更多...
斥資近1億港元，小米二次回購

斥資近1億港元，小米二次回購

1月21日消息&#xff0c;小米集團發布公告稱&#xff0c;公司于1月18日回購了984.96萬股B類普通股股票&#xff0c;占已發行股份0.041%&#xff0c;平均價為每股B類股10.1527港元&#xff0c;總計斥資近1億港元。 這也是繼1月17日首次回購后&#xff0c;小米集團連續兩日出手進…
閱讀更多...
MySQL日期數據類型、時間類型使用總結

MySQL日期數據類型、時間類型使用總結

轉載鏈接&#xff1a;http://www.jb51.net/article/23966.htm MySQL 日期類型&#xff1a;日期格式、所占存儲空間、日期范圍 比較。 日期類型 存儲空間 日期格式 日期范圍 ------------ --------- --------------------- -------------------------------…
閱讀更多...
ios macos_設計師可以從iOS 14和macOS Big Sur中學到什么？

ios macos_設計師可以從iOS 14和macOS Big Sur中學到什么？

ios macos重點 (Top highlight)With the introduction of iOS 14 and macOS Big Sur, we are the witness of the next big thing in UI Design. Changes are not so revolutionary like in iOS 7 years before, but they undoubtedly present the trend UI Designers will fol…
閱讀更多...
Web開發性能優化總結 轉載

Web開發性能優化總結 轉載

1. 使用存儲過程&#xff0c; &#xff08;如果在程序里用exec 存儲過程 參數&#xff0c;這樣執行似乎并沒有快多少&#xff09; 在數據庫里是預編譯的&#xff0c;也不需要在字符串傳輸上花費大量時間。 防sql注入攻擊。 2. 盡量優化數據庫語句&#xff0c;使邏輯盡量…
閱讀更多...
金三銀四的騰訊、阿里、?字節等大廠前端社招面經

金三銀四的騰訊、阿里、?字節等大廠前端社招面經

大家好&#xff0c;我是若川。最近金三銀四&#xff0c;今天分享一篇騰訊、阿里、字節等大廠的前端社招面試經驗的好文&#xff0c;相信看完會有所收獲。也歡迎點擊下方卡片關注或者星標我的公眾號若川視野作者面了將近一個月&#xff0c;目前還沒掛過&#xff0c;但由于各種因…
閱讀更多...
JS中創建函數的幾種方式

JS中創建函數的幾種方式

使用 "函數聲明" 創建函數 語法&#xff1a;* function 函數名([形參1,形參2...形參N]){* 語句...* } */function fun2(){console.log("這是我的第二個函數~~~");alert("哈哈哈哈哈");document.write("~~~~…
閱讀更多...
ssm提交post_我用spring mvc做，用post方式提交，后臺獲取不到參數值，用get方式就可以，什么問題...

ssm提交post_我用spring mvc做，用post方式提交，后臺獲取不到參數值，用get方式就可以，什么問題...

展開全部因為form表單e68a843231313335323631343130323136353331333365646330的enctype編碼方式不同導致的&#xff1b;enctype 屬性規定在發送到服務器之前應該如何對表單數據進行編碼。默認地&#xff0c;表單數據會編碼為 "application/x-www-form-urlencoded"。就…
閱讀更多...
網頁設計簡約_簡約網頁設計的主要功能

網頁設計簡約_簡約網頁設計的主要功能

網頁設計簡約重點 (Top highlight)Minimalism is synonymous with simplicity. Not quite. As the name suggests, minimalism is definitely not about opulent design. But the assumption that minimalism is design-less and plain is also wrong. Minimalism is simple ye…
閱讀更多...
MySQL_數據庫數據類型(data type)介紹

MySQL_數據庫數據類型(data type)介紹

轉載鏈接&#xff1a;http://www.360sdn.com/mysql/2013/0511/78.html MySQL_數據庫數據類型(data type)介紹 mysql數據庫的數據類型(data type)分以下幾種:數值類型,字符串類型 一、數值類型 MySQL 的數值類型可以大致劃分為兩個類別&#xff0c;一個是整數&#xff0c;另一…
閱讀更多...
最新文章

Copyright @ 2022~2023