Fiddler助力微信開發調試

Fiddler助力微信開發調試

Fiddler是一個非常強大的代理工具，可以讓你的前端開發調試更加方便。下面介紹在微信開發調試方面的應用。

微信網頁開發中，由于有js接口安全域名和授權域名等的限制，導致部分功能需要部署到線上才能測試。通過代理可以實現本地調試網站的所有功能。

配置代理規則

全站轉發可以這樣設置：Tools -> HOSTS

HOST配置

圖片中表示your.domain.com的請求全部轉發到127.0.0.1:8000。第二個參數的限制是：不能加協議、路徑或參數。

如果你的網站域名和接口域名是同一個，那就不能使用全站轉發了，需要html、css、js、websocket請求轉發到本地，接口調用請求則直接發送到遠程服務器。

可以使用自定義規則實現


自定義規則

上面圖片中的正則表達式和目標地址如下：

regex:^http://your.domain.com(?!/api|/swagger|/webjars|/configuration/ui)(.*)


http://localhost:8000$1

本條規則表示：將your.domain.com下的http請求轉發到localhost:8000，其中/api、/swagger、/webjars、configuration/ui開頭的路徑不轉發。

目標地址表達式中的$1代表原始請求URL域名后面的字符串，包括path和search。

設置代理服務器

打開微信開發者工具，設置 -> 代理設置 -> 選擇手動設置代理。
Fiddler默認運行在127.0.0.1:8888。

在真機上測試

在真機上測試本地微信網頁項目的步驟如下：

  1. 手機和電腦連接同一個局域網。
  2. 設置Fiddler允許遠程連接，Tools -> Options -> Connections -> 勾選Allow remote computers to connect。
allow-remote
  1. 查看電腦在局域網中的IP地址，命令行輸入ipconfig(windows)。
getIp
  1. 手機網絡配置代理服務器。
phone-config

到這里，本篇文章的主要內容就結束了，如果你想了解更多關于Fiddler和代理工具的使用，可以參考我同事的文章代理工具Fiddler -調試與替換接口狀態，
代理工具做微信項目的調試配置。
如果你想了解使用nodejs如何實現上述以及更多自定義的功能，敬請往下閱讀。

nodejs實現代理服務器

下文中，client表示客戶端（瀏覽器），proxy表示代理服務器，server表示目標服務器

HTTP

實現HTTP代理服務器是非常簡單的，因為HTTP為明文傳輸，所以proxy只需要解析client的HTTP報文，再向server發送相同的請求，server響應時，proxy將HTTP響應狀態，響應首部字段和響應主體返回給client即可。

這里可以使用nodejs的http模塊實現

const http = require('http');
const { URL } = require('url');

let server = http.createServer((req, res) => {
  let {
    pathname,
    search,
    hostname,
    port
  } = new URL(req.url);

  console.log('http ', req.url);

  // 后端api調用請求直接發送給遠程服務器，除此之外的HTTP請求發送給本地運行的端口
  if (!pathname.startsWith('/api')) {
    hostname = 'localhost';
    port = 8000; // 項目運行的端口
  }

  req.pipe(http.request({
    hostname,
    port,
    path: `${pathname}${search}`,
    method: req.method,
    headers: req.headers
  }, (response) => {
    res.writeHead(response.statusCode, response.statusMessage, response.headers);
    response.pipe(res);
  }));
});

server.listen(8888);

HTTPS

只有HTTP代理服務器是不夠的，因為不管是微信開發工具，還是瀏覽器，都有可能發送HTTPS請求。比如微信開發者工具的登錄和域名校驗就是使用的HTTPS與微信服務器通信的，如果不代理這部分流量是無法正常運行微信開發者工具的。

HTTPS因為報文加密的原因，proxy不能解析報文后偽裝client發送請求。最常見的解決方案是web隧道，proxy建立和client、server的TCP連接，之后盲轉發兩端的數據。

建立web隧道的方式之一是使用HTTP的CONNECT方法，實際上客戶端（瀏覽器）設置了代理服務器后，client發出的HTTPS請求是不同的，它首先會使用CONNECT方法發送HTTP請求，請求proxy建立連接，這是proxy能代理HTTPS的關鍵。

client請求proxy與server建立TCP連接的HTTP報文如下：

CONNECT your.domain:443 HTTP/1.1
Host: your.domain:443
Connection: keep-alive
User-Agent: M....

proxy在與server建立TCP連接后，按照約定，需要200 Connection Established響應，響應首部字段可自定義：

HTTP/1.1 200 Connection Established
Connection: close

所以http服務器就可以代理https請求。實際上，按照上面的原理http服務器能夠代理很多其他協議的流量。

https代理服務器需要使用http和net模塊，對上面的http代理的代碼擴展即可

server.on('connect', (req, clientSocket) => {
  let {
    port,
    hostname
  } = new URL(`http://${req.url}`);

  console.log('https', req.url);

  let serverSocket = net.connect(port || 80, hostname, () => {
    clientSocket.write(
      `HTTP/1.1 200 Connection Established
Connection: close

`
    );

    clientSocket.pipe(serverSocket);
    serverSocket.pipe(clientSocket);
  });
});

從實現方式可以看出來，這種代理服務器是無法正常獲取和更改通信雙方的數據的。如果要實現能監聽和更改通信數據的HTTPS代理服務器，可以使用自簽名證書實現，這里不做探究。

websocket

本地開發的項目往往有熱更新功能，而熱更新的通信依靠websocket，所以websocket代理也是必不可少的。websocket的連接也是用HTTP建立起來的。
如果根據我們之前了解的websocket知識，client會向服務器發送協議升級請求（請求報文中包含特殊的請求首部字段），服務器響應101 Switching Protocols，之后的數據則轉為websocket協議發送。根據以上流程，同樣只需要對http服務器代碼擴充即可，我們很容易寫出如下代碼：

server.on('upgrade', (req, clientSocket) => {
  let {
    pathname,
    search,
    hostname,
    port
  } = new URL(req.url);

  console.log('websocket', req.url);

  let request = http.request({
    pathname: 'localhost',
    port: 8000, // 項目運行的端口
    method: req.method,
    headers: req.headers
  });

  req.pipe(request);

  request.on('upgrade', (response, serverSocket) => {
    let resStr = 'HTTP/1.1 101 Switching Protocols\r\n';

    for (let [key, value] of Object.entries(response.headers)) {
      resStr += `${key}: ${value}\r\n`;
    }

    resStr += '\r\n';

    clientSocket.write(resStr);
    clientSocket.pipe(serverSocket);
    serverSocket.pipe(clientSocket);
  });
});

server.listen(8888)

上面的寫法實際上是反向代理服務器的寫法。即，瀏覽器直接建立到ws://localhost:8888的請求，該代理服務器是能夠將請求轉發到8000端口的，但當瀏覽器設置了代理服務器后，發送websocket請求和沒設置前是不同的，它同樣會先向proxy請求建立連接，所以代理websocket請求和代理https請求代碼是一樣的，我們在connect事件中做好區分即可。

server.on('connect', (req, clientSocket) => {
  let {
    port,
    hostname
  } = new URL(`http://${req.url}`);

  console.log('https', req.url);

  // websocket請求發送到本地8000端口
  if (req.url === 'your.domain.com:80') {
    port = 8000; // 項目運行的端口
    hostname = 'localhost';
  }

  let serverSocket = net.connect(port || 80, hostname, () => {
    clientSocket.write(
      `HTTP/1.1 200 Connection Established
Connection: close

`
    );

    console.log(req.url, 'connect');

    clientSocket.pipe(serverSocket);
    serverSocket.pipe(clientSocket);
  });
});

經過以上三步，一個帶有完整功能的代理服務器就寫好了，想要實現自定義功能，無非是在請求報文識別和server響應報文篡改上做文章，盡情發揮你的創造力吧。

作者簡介：葉茂，蘆葦科技web前端開發工程師，代表作品：口紅挑戰網紅小游戲、服務端渲染官網、微信小程序粒子系統。擅長網站建設、公眾號開發、微信小程序開發、小游戲、公眾號開發，專注于前端領域框架、交互設計、圖像繪制、數據分析等研究。 一起并肩作戰： yemao@talkmoney.cn 訪問 www.talkmoney.cn 了解更多

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容