邻居少妇被爽到高潮A片,zoom与牛性胶zoom,1000部啪啪未满十八勿入下载

whistle 是什么

whistle，拼音[wēisǒu])基于 Node 實現的跨平臺 web 調試代理工具，類似的工具有 Windows 平臺上的 Fiddler，主要用于查看、修改 HTTP、HTTPS、Websocket 的請求、響應，也可以作為 HTTP 代理服務器使用，不同于 Fiddler 通過斷點修改請求響應的方式，whistle 采用的是類似配置系統 hosts 的方式，一切操作都可以通過配置實現，支持域名、路徑、正則表達式、通配符、通配路徑等多種匹配方式，且可以通過 Node 模塊擴展功能

總的來說，whistle 有如下幾個特性

基于 Node 實現的跨平臺 web 調試代理工具，window，Linux，Mac 都可以使用
用于查看、修改 HTTP、HTTPS、Websocket 的請求、響應，也可以作為 HTTP 代理服務器使用
whistle 采用的是類似配置系統 hosts 的方式，一切操作都可以通過配置實現
可以通過 Node 模塊擴展功能

為什么選擇 whistle

第一點，whistle 是一個 web 調試代理工具，它的功能十分強大。作為一名前端，我們經常跟協議中的應用層打交道，Mock 數據，修改 HTTP 請求頭，解決跨域問題、移動端調試等等，都是我們必備的技能，而 whistle 就能解決其中 90% 的問題

我經常使用的一些場景如下，后面我們針對一些場景做一些講解和實戰

綁定 Host
替換請求（Mock 數據）
使用 Weinre 或者 vConsole 調試移動端頁面
修改 cookie
往 HTML 中插入樣式
往 HTML 中插入腳本
...

以下為官方的一張圖，大家可以感受一下

官方圖片

第二點，除了功能十分強大，使用也十分便捷，只需要簡單的命令就能打開網頁進行抓包等操作（當然你需要先安裝）

第三點，不像 window 中的 Fidder 需要消耗大量 CPU，也不像 Mac 中 Charles 不是免費的（當然也可以破解），它是免費的，開源的，而且一個跨平臺 web 調試代理工具

第四點基于 Node 模塊和可以通過 Node 模塊進行擴展，讓我們前端倍感親切

以上，還沒說服你的話，希望接下來的實戰能夠讓你感受它的強大

安裝

安裝這一部分，我這里不打算細講，具體請看官方文檔安裝啟動

安裝 Node，推薦安裝最新版的 Node,雖然 whistle 支持 v0.10.0 以上版本的 Node。這一個我相信大家作為一名前端都應該有的環境。這里多插一句，推薦使用 n 管理 node 版本
安裝 whistle，如果很慢，請切換源，你懂的。再插一句，推薦使用 nrm 管理你的 npm 源

npm install -g whistle
// Mac
sudo npm install -g whistle

啟動 whistle
w2 start
啟動之后，我們看到以下，就表示成功了

這里還需要留意其他幾個經常使用的命令

w2 help // 查看幫助，里面很多常用的命令
w2 restart // 重啟 whistle
w2 stop // 停止 whistle
w2 run // 調試模式啟動whistle(主要用于查看whistle的異常及插件開發)

配置代理，分為全局代理、瀏覽器代理和移動端代理。這里主要談談 mac 端全局代理，chrome 瀏覽器代理以及 IOS 側的移動端代理。其他詳情可以查看官方文檔安裝啟動。需要注意的是，代理服務器：127.0.0.1 端口號：8899。如果端口被占用，可以通過 -p 來指定新的端口

1.全局代理（mac）：System Preferences > Network > Advanced >Proxies > HTTP or HTTPS

2.瀏覽器代理。首先先下載 Chrome 代理插件：推薦安裝 SwitchyOmega ?？紤]到一些朋友在墻內，可以去這里下載。然后配置如下：

3.移動端代理。注意，要和當前電腦的 WIFI 是同一個 WIFI以 IOS 為例

訪問配置頁面，一切順利的話，訪問 http://127.0.0.1:8899 就可以看到相關的頁面
還有一個很重要的步驟：安裝根證書，假如不安裝根證書的話，就不能抓 HTTPS 的包，安裝詳情步驟，這一點調試線上問題的時候，可能會遺漏了

以上就是我們的準備工作了，可能還是一些同學還是會遇到一些問題，可以去官方 issue 看看有沒有相關的解決方法，也可以留言評論，我們一起看看

界面講解

對于新手來說，我們先熟悉下，whistle 的界面，有個大概的印象
以下是 whistle 的界面，常見的幾個選項：
Network——請求列表頁面
Rules——操作規則配置頁面
Values——存放 KeyValue 的系統
Plugins——插件列表頁面

快速上手——基礎使用【mock 數據以及解決跨域】

whistle 使用的是類似代理的方式，Rules 版面下默認有一個 default 的分組，我們可以創建、重命名、刪除一個分組，可以根據以下的步驟快速建立一個分組，如下所示

接下來，我們就可以在右側建立一些規則，大顯身手了。我們來拿掘金的接口做個演示吧，掘金推薦首頁獲取列表數據的接口為 https://apinew.juejin.im/recommend_api/v1/article/recommend_all_feed，以下是目前的頁面，注意，該接口的響應頭設置了 access-control-allow-origin: https://juejin.im

我們根據這個接口設置一條規則，以下規則表示完全匹配該接口，返回你指定的 juejinList.json 數據，相當于 Mock 這個接口的返回

# 完全匹配，相當于 Mock 這個接口的返回
https://apinew.juejin.im/recommend_api/v1/article/recommend_all_feed file://{juejinList.json}

查看效果，報錯了，看看報錯，跨域問題，線上的之所以沒有報錯，原因在于，線上的接口的響應頭設置了 access-control-allow-origin: https://juejin.im，所以我們還應該 Access-Control-Allow-Origin 請求頭

怎么辦，就沒有方法了么？當然不是，這個時候可以多配置另外一條規則，總的規則如下

https://apinew.juejin.im/recommend_api/v1/article/recommend_all_feed file://{juejinList.json}
https://apinew.juejin.im/recommend_api/v1/article/recommend_all_feed resCors://{cors.json}

其中 cors.json 內容為

origin: https://juejin.im

查看效果，可以了

我們來看下 network 版面，選中我們代理了的接口，可以看到已經走了我們所配置的規則了

上面我們是通過精確匹配匹配到了掘金的獲取列表接口，寫起來會很長，其實我們可以通過域名、路徑、正則、精確匹配、通配符匹配等方式去匹配的，比如如下的規則也是可以的

/v1/article/recommend_all_feed/i file://{juejinList.json}
/v1/article/recommend_all_feed/i resCors://{cors.json}

基礎的使用就是這么簡單，這里我們就解決了 Mock 數據以及跨域的問題，當然，這只是 whistle 一個很小的功能，接下來才是重頭戲

常用技能

解決跨域問題

可以通過 reqCors 修改請求的 CORS。也可以通過 resCors 修改返回的 CORS 。從而達到解決跨域的效果。上面的例子已經演示過，這里不再重復

Mock 數據

通過上面提到的 file:// 協議，我們就可以 Mock 數據，當然你如果不想使用 Values 中的值，也可以使用本地的文件，類似如下的配置：

# 注意是絕對路徑
/v1/article/recommend_all_feed/i file:///Users/gpingfeng/Documents/Personal/Test/juejinList.json

模擬 JSONP 返回

如果是 JSONP，我們要怎么 Mock 呢？這里我們用到了 tpl 協議，tpl 協議基本功能跟 file 協議一樣一樣可以做本地替換，但 tpl 內置了一個簡單的模板引擎，可以把文件內容里面 {name} 替換請求參數對應的字段(如果不存在對應的自動則不會進行替換)，一般可用于 mock jsonp 的請求

這里我們拿京東首頁的一個獲取輪播圖的接口作為演示。我們可以看到 URL 中指定的回調函數的 key 為 callback，這個很重要，在配置 Values 的時候會用到

我們配置規則，修改返回為了路飛的圖片

/floor.jd.com/recommend-v20/focus_monetize/i tpl://{jsonp.json}

其中 jsonp.json 中的格式為

// callback 是根據上面 JSONP 請求中發送出去的回調函數決定的
{callback}({
// 這里是返回的 JSON，這里我就是替換了返回的圖片而已
})

看結果，生效了

綁定 Host

一提到綁定 Host，我們會想起使用 Switch Host 切換，但使用 whistle 可以更加方便和強大，不僅支持傳統的 Host配置，還支持子路徑和端口的 Host 轉發配置，我們可以將我們的環境放在不同的規則中，隨時切換，而且無緩存，切換時候生效更快

本地代碼，調試線上問題

有時候，我們遇到線上的問題，卻因為數據問題，沒有辦法在本地復現。一般我們項目 api 的 url 都會設計帶上后綴，利用這個，我們可以配置如下的規則，輕松調試線上的問題

# 接口走線上
^example.com/api/*** https://example.com/$1
# 訪問走本地
^example.com/*** http://127.0.0.1:8120/$1

往 HTML 中插入腳本 JS

jsAppend 協議往 content-type 為 html 或 js 的響應內容后面追加數據，如果是 html，則會自動加上 script 標簽在追加到響應內容，如果是 js，則會自動追加到js文本后面

配置一個規則：

/https://juejin.im/frontend/i jsAppend://{myJS}

查看源碼，可以看到已經自動加上 script 標簽在追加到響應內容

往 HTML 中插入樣式

cssAppend 往 content-type 為 html 或 css 的響應內容后面追加數據，如果是 html，則會自動加上 style 標簽在追加到響應內容，如果是css，則會自動追加到文本后面

我們給掘金網頁版加上暗黑模式吧，以下是 CSS

html {
    filter: invert(1) hue-rotate(180deg);
}

我們配置規則，插入到掘金中

/https://juejin.im/frontend/i cssAppend://{myCSS}

暗黑版掘金

源碼中也有了相關的 CSS 樣式

以上插入 HTML 和 CSS 的動圖如下

修改 cookie

開發中，我們很多時候，需要設置請求頭或者響應頭的 cookie，這個時候，我們就需要用到 reqCookies 和 resCookies。它們的功能分別是修改請求頭的 Cookie 和修改響應頭的 Set-Cookie

/apinew.juejin.im/interact_api/i reqCookies://{reqcookie}
/apinew.juejin.im/interact_api/i resCookies://{resCookies.json}

reqcookie 內容如下：

name: 'Gopal'
like: 'FE'

效果如下：

resCookies.json 的內容如下

{
    "name": "Feng",
    "age": "26",
    "happy": {
        "value": "FE",
        "maxAge": 60,
        "httpOnly": true,
        "path": "/",
        "secure": true
    }
}

效果如下：

真正的殺手锏——移動端調試

相比于 PC 端，在移動端調試網頁，主要會遇到以下兩個問題：

沒有 Console，無法查看頁面的js錯誤及通過 console.xxx 輸出的調試日志
無法查看、修改頁面的 DOM 結構及樣式

雖然很多移動端頁面，我們可以在 Chrome 的模擬器中進行調試，但不是所有的移動端頁面都可以在 PC 端調試和復現問題。往往 APP 中嵌入的頁面，在不同的機器中會遇到兼容性問題，需要在真機中才能看到效果【復現問題】，這個時候就需要我們的 whistle 登場了

移動端捕獲頁面錯誤和 log

移動端，我們查看報錯信息也是比較麻煩的，為此，whistle 提供了 log 功能如下：

https://juejin.im/frontend log://{test.js}

test.js 主要是模擬腳本報錯，內容如下：

console.error({ error: true });
console.warn({ error: true, warn: { test: true } });
console.log(123456);
// 模擬拋出異常
console.notAFunction('test');

在 Network —— Tools 下面就可以看到報錯等日志了

查看移動端頁面的 DOM 樣式

移動端的 DOM 樣式查看和調試對于我們來講也是一個比較頭疼的事情，whistle 就能夠做到輕松查看調試移動端的 DOM 樣式

https://juejin.im/frontend weinre://test

使用插件——利用whistle注入vConsole

vConsole 是微信團隊開發的輕量、可拓展、針對手機網頁的前端開發者調試面板，主要原理是通過在頁面注入 js 實現模擬 PC 瀏覽器的 Console 功能

因為官方沒有提供，所以我們這里使用插件，順便介紹下插件的用法（每個插件的用法不同，大家舉一反三）

安裝：

npm i -g whistle.inspect

安裝成功后，可以在 Plugins 頁面中看到

安裝插件后，只需配置簡單的規則即可隨意切換 vConsole 和 eruda，這里我們只演示 vConsole

配置規則：

/juejin.im/i whistle.inspect://vConsole

插件開發

上面提到了插件的使用，為了滿足一些特定業務場景的需要，whistle 提供了插件擴展能力，通過插件可以新增 whistle 的協議實現更復雜的操作、也可以用來存儲或監控指定請求、集成業務本地開發調試環境等等，基本上可以做任何你想做的事情，且開發、發布及安裝 whistle 插件也都很簡單。

whistle 的插件是一個獨立運行的進程，這樣是為了確保插件不會影響到 whistle 主進程的穩定性，并通過暴露一些 http server 的方式實現與 whistle 的交互，whistle 會在特定階段請求特定的 server，具體看下面的原理圖：

whistle 實現原理圖

從上面幾個圖可以知，whistle 插件會設計以下7種 server，也就是有7種強大的功能

statsServer：統計請求信息的服務
resStatsServer：統計響應信息的服務
rulesServer：設置請求規則的服務(支持 http/https/websocket 請求)
resRulesServer：設置響應規則的服務(支持 http/https/websocket 請求)
tunnelRulesServer：設置 tunnel 請求規則的服務
server：whistle 會把指定請求轉發到該 server
uiServer: whistle 插件的界面，可以通過特定的 url 訪問

結束語

whistle 作為一個強大的工具，我給大家介紹的只是其中一部分知識，但我堅信其中能夠解決大家 80% 的問題了，更多的使用技巧，大家可以看官方文檔，去探索吧

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

前端應該知道的web調試工具——whistle

前端應該知道的web調試工具——whistle

whistle 是什么

為什么選擇 whistle

安裝

界面講解

快速上手——基礎使用【mock 數據以及解決跨域】

常用技能

解決跨域問題

Mock 數據

模擬 JSONP 返回

綁定 Host

本地代碼，調試線上問題

往 HTML 中插入腳本 JS

往 HTML 中插入樣式

修改 cookie

真正的殺手锏——移動端調試

移動端捕獲頁面錯誤和 log

查看移動端頁面的 DOM 樣式

使用插件——利用whistle注入vConsole

插件開發

結束語

參考文章

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

前端應該知道的web調試工具——whistle

whistle 是什么

為什么選擇 whistle

安裝

界面講解

快速上手——基礎使用【mock 數據以及解決跨域】

常用技能

解決跨域問題

Mock 數據

模擬 JSONP 返回

綁定 Host

本地代碼，調試線上問題

往 HTML 中插入 腳本 JS

往 HTML 中插入 樣式

修改 cookie

真正的殺手锏——移動端調試

移動端捕獲頁面錯誤和 log

查看移動端頁面的 DOM 樣式

使用插件——利用whistle注入vConsole

插件開發

結束語

參考文章

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

本地代碼，調試線上問題

往 HTML 中插入腳本 JS

往 HTML 中插入樣式