前因
信赖每一位前端程序员，在日常编写代码中，或多或少都会碰到前端三题：
㈠ 有没有便捷的 H5 页面抓包和模仿假数据办法？
㈡ 在公司网络约束下怎样做到手机直连电脑服务，而不是经过费时费力的流水线打包拜访测验服务器？
㈢ 学习业界优秀的技能计划时，能不能直接“试”着“改”代码，所见即所得地剖（pu）析测验？
“工欲善其事，必先利其器”，这个问题一直困扰着巴望“高效作业，健康生活”的我。
那么，有没有一种既要手机直连电脑服务高效调试，又要没有代码库房仍能想怎样改就怎样改，还要操作简略的前后端调试处理计划？
本文示例运转环境为 MacBook Pro 电脑（macOS Monterey 版别12.5.1，Apple M1 Pro芯片）和华为 Mate 40 Pro 手机（HarmonyOS 版别 3.0.0）。
看见
一个偶尔的时机，我发现同事子力在使用 ADB（Android Debug Bridge） 端口转发指令（adb reverse tcp:8081 tcp:8081），手机仅经过数据线直连本地 HTTP 服务器，他这么做主要是为了便于操控影响因子，便利二分法排查网页功用影响要素。
我其时眼睛一亮，这不便是我一直在苦苦寻找的手机直连电脑处理计划么？
其实我也是 Android 起家，不由让我想到 ReactNative 开发时就用过这个指令来发动电脑服务供手机开发调试，不过其时囫囵吞枣，只是把这个指令当东西用，导致现在的我也成了东西…
再触类旁通地想一想， Chrome DevTools 的设备查看功用（chrome://inspect/#devices）和 Vysor 的电脑长途操控投影手机功用都是类似手机直连电脑实时预览的处理计划。
图片来源: Remote debug Android devices
话说，高手的国际像星空，你看得见，却看不懂。
但至此，现已看到更大国际的我，思如泉涌，也想试试能不能由浅入深地看懂。
由浅
先把野兽般的想象力收一收，由浅入深地想想，问题是什么，我要干啥？
不便是前后端调试环境么？
要是我能手写一个简略后端服务，自己和自己联调，那感觉，倍爽。
手写前后端
先写一个包括网络恳求的简略 H5 页面。
<html><title>书强号</title><body> <h1>我们好，<br>欢迎大驾光临“书强号”</h1> <!-- 显现网络恳求呼应信息 --> <div id="resDesc"></div> <script> console.log("我们好，欢迎大驾光临“书强号”"); // 发送网络恳求代码 const xhr = new XMLHttpRequest(); // 线上域名 // const url = "http://sheng.shuqiang.com/hello.json"; // 本地域名 // const url = "http://localhost:3000/hello.json"; const url = "http://127.0.0.1:3000/hello.json"; xhr.open('GET', url); xhr.onreadystatechange = function () { // const { readyState, status, statusText, responseText, responseURL } = xhr; // console.log(`数据回来: ${JSON.stringify({ readyState, status, statusText, responseText, responseURL })}`, xhr); const resDescElement = document.getElementById("resDesc"); if (xhr.readyState == 4) { let resDesc, resDescStyle; if (xhr.status >= 200) { resDesc = `数据回来成功：${xhr.responseText}`; resDescStyle = "color: green;" } else { resDesc = `数据回来失败`; resDescStyle = "color: red;" } resDescElement.innerHTML = resDesc; resDescElement.style = resDescStyle; } } xhr.send(); </script></body></html>
接下来使用备受青睐的 Express Web 结构 （极简风格且开源），搭一个后端服务。
能够直接上网 Ctrl + C 和 Ctrl + V，我参阅一杯茶的时刻，上手 Express 结构，仿制过来改一下，依据 URL 途径别离回来 Html 主文档和 json 数据。
// 使用 express 结构搭建本地服务，监听端口 3000，能够拜访 Html 主文档 和 Json 数据var app = require('express')();// 处理 Html 主文档路由const handlerHtml = function (req, res) { const htmlPath = __dirname + '/index.html'; console.log("SSU", "用户拜访 index.html，后端途径为" + htmlPath); res.sendfile(htmlPath);};// 处理 Json 数据路由const handlerJson = function (req, res) { const jsonPath = __dirname + '/hello.json'; console.log("SSU", "用户拜访 hello.json，后端途径为" + jsonPath); res.sendfile(jsonPath);};// 处理浏览器标题栏图标 favicon.ico 图片路由const handlerFavicon = function (req, res) { const faviconPath = __dirname + '/favicon.ico'; console.log("SSU", "用户拜访 favicon.ico，后端途径为" + faviconPath); res.sendfile(faviconPath);};// Html 主文档路由，http://localhost:3000/ 和 http://localhost:3000/index.html 皆可app.get('/', handlerHtml);app.get('/index.html', handlerHtml);// Json 数据路由，http://localhost:3000/hello.jsonapp.get('/hello.json', handlerJson);// favicon.ico 图片路由app.get('/favicon.ico', handlerFavicon);// 监听 3000 端口app.listen(3000);
由于本地没有 express 包，需求运转 npm install express 手动装置依靠。
为了避免国内装置速度太慢，主张先运转 npm config set registry http://registry.npm.taobao.org 设置国内镜像。
最后运转 node simple-html-and-json-server.js 发动本地服务。
让咱们来看看浏览器翻开http://localhost:3000作用。
能够，整体跑起来了，hello.json 数据恳求失败，意料之中，线上本来就没有 sheng.shuqiang.com/hello.json 服务链接，把线上域名改本钱地试试 http://localhost:3000/hello.json。
美丽！！！
至此，本地搭建的前后端环境现已成功了，问题 ㈠ 已拿下。
代码在手，天下我有，想咋地咋地，模仿假数据（Mock）天然不在话下。
是不是有点小激动，我再也不用忧虑和后端同学加班联调了，只要自己和自己联通经过，保证前端这边没问题，剩下的交给后端同学慢慢调。
站住，别走！
你这是在电脑上用浏览器拜访本地服务联通自测经过，手机呢？公司局域网内手机能拜访电脑么？
手机直连电脑
先手机链接电脑试试行不可？
先整简略点的，我电脑和手机用的是家里的网络，没有网络策略约束，看看能不能连上。
成功了，尽管情理之中，可是仍是有点小高兴。
多说一句，有的同学运转 ifconfig 指令找电脑 IP ，这样有点费力还伤眼睛，引荐个简略优雅的。
或许更简略直接的 cmd + option + wifi 图标（感谢 Billy 同学友谊提示）。
接下来，连上公司 VPN 试试吧！
电脑衔接公司 VPN 后，IP 地址不会变化，可是此时改写手机网页，毫无意外地拜访不了了。
已然走局域网不可，换个思路，直接断开网络，走 USB 直连呢？
是时分让 Android 调试桥上场了，ADB是 Android 手机供给的调试桥，顾名思义，该办法仅能用于 Android 手机。点击此处进行下载装置 adb 东西软件包。手机翻开调试形式，假如您未看到开发者选项，请按照相关说明启用开发者选项。
电脑运转 adb reverse tcp:3000 tcp:3000 反向转发 3000 端口恳求，简略说便是手机拜访 3000 端口会直接转发给电脑 3000 端口署理，手机拜访看起来和电脑拜访相同了。
让咱们拭目以待吧！
说实话，走到这，我的内心是溃散的，咋还不可…
手机拜访 http://192.168.101.17:3000网络不可用我能了解，究竟网络现已断开，手机是无法拜访电脑 IP 的。
那么 http://localhost:3000 也不可，为什么啊？不是说 adb reverse 是端口反向转发么，手机拜访 http://localhost:3000 等同于电脑拜访 http://localhost:3000，电脑拜访http://localhost:3000能正常翻开页面，为什么手机就不可了…
掉坑里边去了，淡定！
换成 http://127.0.0.1:3000 试试？
快看，奇迹般地，手机居然能拜访了，喜大普奔。经 Billy 同学提示，localhost 不能用应该是hosts文件里边缺省没有这条。
于是乎，网络约束已被绕过，问题 ㈡ 被攻下。
又能够高兴地在公司手机拜访电脑服务了。
拼多多，好像有着某种法力吸引着我们。当别人在关怀拼多多买东西有多廉价时，作为一个技能工，更吸引我的是为什么拼多多页面这么快？
科学上网拼多多
浏览器直接翻开拼多多主页网址 pddwyb.com，不出意外地跳到了登录页，想让我知难而退。
明显，我还在继续，就按他说的，手机号登录试试。
公然，现已防我这一手了，登录后跳到主页后又迅速跳回登录页。
有点意思，代码都在我电脑上了，而且页面还瞬间改写了主页，我又能够 Debug 页面，这下还能难得倒我？
究竟我们学得都差不多，电脑在我手上，拿下只是时刻问题！
假如我能在页面跳回登录页前断点暂停页面，是不是就能够了？
说干就干，看了一下 Chrome DevTools -> “源代码” -> “事件监听断点” ，把几个可能性比较大的打上对勾，改写页面，公然不出所料，断住了。
回过头一看，只要把 “DOM 变更” -> “DOMContentLoaded” 勾上即可。
在跳转到登录页前断点停住了，这便是我要的作用。点击浏览器导航栏 “文件” -> “页面存储为…”，这里留意格式要挑选“网页，悉数”，这样相关的依靠文件也一块存下来了。
直接翻开存储在本地的拼多多 Html 主文档试试，第一眼主页能够正常显现，不错。接着会看到操控台一堆 CORS 跨域报错和网络失败。
跨域问题很好处理，页面途径和依靠文件本来便是相同文件夹下，只不过直接经过文件的拜访办法会导致跨域问题。假如本地起一个 http-server 服务是不是就行了。
Just do it！
运转 npm install http-server 装置 http-server 依靠包，装置成功后运转 ./node_modules/.bin/http-server . -p 8080 发动本地 http-server 服务。
浏览器输入 http://127.0.0.1:8080/pddwyb.com.html 看看吧。
接下来假如要处理跨域的话，能够像上面的 Express 搭的后端服务相同，在网络呼应 header 里边加上 Access-Control-Allow-Origin:* 和 Access-Control-Allow-Headers:Content-Type 就能够，不过这么搞太麻烦。
经过拼多多主页 Html 主文档直接包括首屏静态 DOM 信息可知，拼多多使用了服务端烘托（SSR）首屏优化技能，这便是咱们要找的页面翻开为什么“快”的原因。
尽管 H5 代码毫无秘密可言，可是究竟经过混杂了，读起来仍是非常费力的，一般不会直接改混杂后的代码，而是采用追加履行代码或许掩盖代码的办法。
问题 ㈢ 搭建本地运转代码也处理了。
是不是到这就能够了。
答案是否定的！
上面的手写操作只是以最简略的办法便利你了解原理，能够在特殊情况下多一些解题思路。真实的做法当然是站在伟人的肩膀上，借助强壮的东西，Whistle(读音[wsl]，拼音[wisu])，刚好便是这样的前端调试利器。
入深
Whistle 能够彻底担任前端抓包和 Mock 数据功用，最吸引我的当地是轻量和开源（免费），不过实测过程中仍是遇到了一些缺少说明或许缺少具体操作过程等问题，导致一直不收效的情况，这也是我写这篇文章的初衷，记录下来给未来的自己以及屏幕前的你们。
接下来我将 Whistle 能够用于进步咱们作业中功率的功用点带我们一步步走一遍，少些踩坑抓狂。
手机抓包
主页有必要是装置 whistle ，考虑到国内装置缓慢或失败，运转 npm install whistle -g --registry=https://registry.npmmirror.com 指定镜像装置。
装置完成后，whistle、w2 和 wproxy 三个指令是等价的，都能够用于履行 whistle 指令。能够运转 w2 -V 看一下版别，假如能正常打印出来，说明装置成功了。
装置完成后，运转 w2 start 发动 whistle。
经过在浏览器翻开 http://127.0.0.1:8899/#network 即可看到 whistle 网页操控台。
注：除非设置了电脑本地网络署理到 8899 端口（怎样设置网络署理下文有讲），不然直接翻开 local.whistlejs.com/ 拜访不了，有必要带上端口号 local.whistlejs.com:8899/，作用同 http://127.0.0.1:8899/#network。
现在网络恳求基本都走 https ，要想抓包有必要在电脑和手机装置 https 证书。证书入口如上图所示。
证书下载后直接双击装置，中心要求输入暗码，然后如下图将 whistle 证书挑选“一直信赖”。
将电脑中下载好的 whistle 证书拷贝到手机，按下图过程装置证书。
手机证书装置成功后，将手机衔接到电脑 whistle 署理服务，即手机网络设置为手动署理到电脑IP地址（我电脑是 192.168.101.17 ）和 3000 端口。留意，手机和电脑要衔接同一个网络。
手机衔接电脑 whistle 署理服务后，你将会在电脑的 whistle 网页操控台捉住所有手机发送的网络恳求包，包括 HTTP、HTTPS、WS、WSS等。
假如还不能抓包，可能是电脑防火墙没有关，关掉即可。
在手机浏览器翻开拼多多主页 pddwyb.com/，抓包看看货架瀑布流列表数据吧～
iOS 手机设置署理和装置证书类似，图解如下。
其实大部分开发是使用电脑浏览器，那边电脑上发动的本地服务能抓包 Mock 数据吗？
模仿电脑本地服务假数据
尽管前端起的本地服务，能够在代码里边写假数据（简称 Mock 数据），但这样究竟对事务代码有侵入性，假如删除不干净很可能带到线上去了，经过前端代码写死假数据测验实属无奈之举。那么能不能在前端代码不批改的情况下模仿假数据？
答案有必要能。先就着上面手机抓包拼多多数据，咱们来 Mock 一下。
经过抓包，也能够进一步佐证拼多多使用了 SSR 首屏烘托。
居然首屏现已烘托好了，天然也就没有 json 数据，所以只能 mock 货架瀑布流第二页数据。先给我们看看作用，再说怎样做的？
将拼多多主页第二页第一个标题“【超低价】2022板栗生栗子”改成“要求进步”，第二个标题“批发 白色 赤色 全新料无味”改成“不愧是你”。
做到上面 Mock 数据只需求简略两步。
Step 1： 保存mock数据。whistle 操控面板 Network 页加上url过滤 http://127.0.0.1:8899/#network?url=https://mobile.yangkeduo.com/proxy/api/api/jinbao/h5_weak_auth/goods/query_goods_list_by_opt_id_c_v2，点击 Copy 按钮仿制货架第二页瀑布流数据。
点击切换到 Values 页，创建新文件 query_goods_list_by_opt_id_c_v2.json, 将仿制的货架瀑布流数据列表张贴过来，批改第一个货架 goodsName 值为“不愧是你”。
注：批改完成后必定要保存文件，未保存时，文件名和 Values 均会飘红点，这个务必留意一下，不保存将不收效。
Step 2: 设置拦截规矩。切换到 Rules 页，选中 Default（右侧有对勾才会收效），将第二页网页地址仿制过来，空格距离，后面写上 resBody://{query_goods_list_by_opt_id_c_v2.json} ，其间 resBody:// 表明替换回来数据，{xxx.json} 对应待 mock 数据。
装备好了再次改写页面，能够抓包看到 mock 批改后的数据已收效。
这里要留意，批改内容后需求手动保存，留意 Values 和 Rules 左上角是否红点，有则切换曩昔保存，不保存则对应批改的规矩和数据不收效，对我来说是一次沉痛的抓狂经验。
至此，咱们完成了手机端数据 mock，电脑端 mock 也相同。不过现在的问题是，假如断开手机网络，whistle 操控面板底子抓不到其他的网络包。
假如要想抓包，有必要恳求走 whistle 的端口（默许 8899）署理，要想电脑浏览器能够被抓包，就需求设置浏览器端口（http 默许端口 80，https 默许端口 443）署理到 8899，有两类办法能够做到。
办法一： 直接经过 whistle 署理指令 w2 proxy on 翻开署理， w2 proxy off 关闭署理。这一块我也是被各种文档坑得够呛。有的还翻开“网络偏好设置”->“高档”->“署理”->“网页署理 HTTP”设置“127.0.0.1:8899”和“安全网页署理 HTTP”设置“127.0.0.1:8899”。
其实， w2 proxy on 等价于在网络面板高档里边设置 HTTP 和 HTTPS 署理为 127.0.0.1:8899， w2 proxy off 等价于撤销设置。运转相关指令后能够在网络面板高档选项中看看署理情况，两种办法如出一辙。
办法二： 办法一的缺点是电脑大局署理，电脑任意程序只要走到了 HTTP 和 HTTPS 恳求，都会被署理，这种做法除了会导致网速慢外，部分恳求可能由于署理而失败。所以就有了计划二的浏览器插件做法。别离是 SwitchyOmega 插件和 Whistle 第三方插件。
查验署理浏览器有没有收效的最简略办法便是看 local.whistlejs.com) 能否正常翻开，能正常翻开则表明设置浏览器署理收效。
当然了，署理收效也能够经过改写页面看是否有对应抓包信息来判断。
整体来说，引荐的做法是装置 SwitchyOmega 插件，这个插件还有其他高阶功用待我们发掘。
这块比较坑的是网上许多文档都没有讲清楚这块，其实是互斥联系，有的写成了互补…，最坑爹的是有的插件主张下载压缩文件装置，装置后不收效，导致我一直在互斥和互补中心很跳…,沉痛的经验便是必定要去正规渠道 chrome 使用商店下载装置，不可删了再装。
问题还没完呢？尽管处理了电脑浏览器署理问题，可是本地起的服务，比方说上面搭的 express 3000 端口服务，拜访 url 为 http://127.0.0.1:3000，底子抓不着。其实本地开发前端代码大都类似这种，假如不能抓包 Mock 数据，等于白忙活一场。
到这，粗犷地一顿瞎猜乱试肯定是行不通的，整理一下计算机理论知识。
这里涉及对 HTTP 恳求和端口的了解。
HTTP 默许端口号 80，正常情况下拜访 HTTP 恳求不带端口号，即默许 80 端口，也便是 www.baidu.com 等价于 www.baidu.com:80 。
之所以 whistle 服务能够署理网络恳求，无一例外都将网络端口指向了 8899，手机衔接电脑对应网络手动署理是 电脑IP:8899, 电脑浏览器关于服务署理是批改 HTTP 署理服务为 127.0.0.1:8899。
也便是只有拜访 http://127.0.0.1:8899 才能被署理，http://127.0.0.1:3000 由于不经过 8899 端口，所以不会被署理，假如想被署理，仅有的计划是先拜访 http://127.0.0.1:8899，然后在 8899 端口转发到 3000端口。
听起来有点绕，直接上处理计划吧。
在 Rules 页中新增转换规矩：^http://sheng.shuqiang.com$ http://127.0.0.1:3000。
直接经过 sheng.shuqiang.com 中转拜访 http://127.0.0.1:3000 服务。
反向署理手机拜访本地电脑服务
这其实是署理东西最强的当地，whistle 和Charles 均能做到，即手机拜访本地电脑服务，能够实时调试。
只需求在 “Rules” 装备一行 mall.meituan.com 127.0.0.1:8080即可，其间 8080 是我本地电脑服务端口，你能够改成你自己的本地端口。
然后手机直接翻开 App 拜访线上方针页面，会发现被署理到了本地服务，必要时能够在代码里边加一句 debugger。
至此，假如本地能复现，没有什么处理不了的 bug 。
关于反向署理科普，肖国栋大牛的深入了解 http 反向署理讲得特别棒，主张花时刻看看。
CORS 跨域问题
正如上面剖析拼多多跨域问题的计划相同，在网络呼应 header 里边加上 Access-Control-Allow-Origin:* 和 Access-Control-Allow-Headers:Content-Type 就能够。假如独自起服务本钱有点高，resHeaders://{corsheaders} Rules 能够完美处理了这个问题。
网页追加脚本
上面科学上网拼多多也讲过，直接看混杂后的代码太费力，惯例操作是追加代码操作 DOM 或许批改逻辑。
恰恰 whistle 也具备这种功用。
先看亮点好玩的，一句追加代码直接把“百度一下”改成“不愧是你”。
注入 vConsole 调试面板
运转 w2 i whistle.inspect 装置 whistle.inspect 插件，规矩中装备 http://sheng.shuqiang.com whistle.inspect://。
长途 log
规矩中装备 https://sheng.shuqiang.com log:// 即可在 Network 页对应主文档恳求打印 console.log 日志。
常用 Whistle Rules 装备
#过滤美团 local.whistlejs.com:8899/#network?ur…
#过滤Owl上报 local.whistlejs.com:8899/#rules?url=…
# 后面规矩掩盖前面规矩
# 署理到本地 localhost
# www.baidu.com/ localhost:3000
# 署理到本地 html
# www.baidu.com/ file://${projectPath}/test/index.html
# 署理呼应内容
# www.baidu.com/ resBody://{test.json}
# 署理
# www.baidu.com/ www.google.com.hk/
# 批改ua
# www.baidu.com/ ua://{ua}
# 自定义款式
# www.baidu.com style://color=@fff&fontStyle=italic&bgColor=red
# 署理资源
# dss0.bdstatic.com/5aV1bjqh_Q… file://${projectPath}/test
# 跨域
# www.baidu.com resCors://*
# 移动端调试
# 注入 vConsole
# www.baidu.com/ jsPrepend://{vConsole.js}
# 打印日志
# www.baidu.com/ log://
# mock 接口回来
# 批改接口回来状况
# www.baidu.com/ statusCode://404
# 批改接口回来数据
# music.163.com/weapi/cloud… resBody://{netease.json}
# 模仿 5 秒超时
# www.baidu.com reqDelay://5000 enable://abort
# 模仿弱网
# www.baidu.com resSpeed://50
看懂
写到这，我简略总结一下。
-
经过 Express 前端结构能够简略搭建一下路由服务，用于代码精细化操控回来内容。
-
经过 ADB 反向转发接口，能做到断网下经过 USB 线完成拜访网络服务。
-
经过前端断点、保存网络文件内容、以及 http-server 能够获取想怎样改就怎样改，有助于迭代更多的科学上网解题思路。
-
究极利器是属于 whistle 的，强壮的功用包括但不限于手机、电脑抓包或 Mock 数据、轻松处理 CORS 跨域问题、网页追加脚本、注入 vConsole 调试面板和长途 log，理论上经过转发链接也能完成手机直连电脑服务。
全文完，假如觉得写得不错，那就点个“关注”或许“在看”。
假如转载本文，文末务必注明：“转自微信大众号：书强号”。
我是美团买菜前端盛书强，专心于大前端开发，欢迎和各位大前端大牛做朋友，教学相长。
文中相关代码会上传至 github.com/shengshuqia…。
