之前相信每个前端程序员在日常编码中或多或少都会遇到三个前端问题：（1）有没有方便的H5页面抓取和模拟假数据的方法？（2）在公司网络的限制下，如何让手机直接连接电脑服务，而不是通过费时费力的流水线打包访问测试服务器？（3）在学习业界优秀的技术方案时，能不能直接“试”、“改”代码，分析测试所见即所得？“工欲善其事，必先利其器”，这个问题一直困扰着渴望“高效工作，健康生活”的我。那么，有没有一种前后端调试的方案，既需要手机直连电脑进行高效调试，又可以在没有代码仓库的情况下随意修改呢？一次偶然的机会，我发现同事子力在使用ADB（AndroidDebugBridge）端口转发命令（adbreversetcp:8081tcp:8081）通过数据线将手机直接连接电脑服务。他这样做主要是为了方便Controltheimpactfactors方便二分法查看影响网页性能的因素。我当时眼前一亮，这不就是我一直在寻找的手机直接连接电脑的方案吗？其实我也是从安卓开始的。不禁想到我在开发ReactNative的时候就是用这个命令来启动电脑服务进行手机开发调试的。再想想，ChromeDevTools的设备检查功能（chrome://inspect/#devices）和Vysor的电脑远程控制投影手机功能都是类似手机直连电脑实时预览的解决方案.图片来源：RemotedebugAndroiddevices或者说，高手的世界就像星空，你看得见，却看不懂。但至今，我已经看到了更大的世界，思绪如泉涌，想尝试由浅入深地了解它。由浅入深的想象，由浅入深，思考问题出在哪里，我要怎么办？不就是前后端调试环境吗？如果能亲手写一个简单的后台服务，和自己共同调试，那该多好啊。手写前后端先写一个简单的H5页面，包含网络请求。接下来，使用流行的Expressweb框架（极简风格和开源）来设置后端服务。Ctrl+C、Ctrl+V可以直接上线，我参考《一杯茶的时间，上手 Express 框架》，复制改改，根据url路径返回Html主文档和json数据。因为本地没有express包，所以需要运行npminstallexpress手动安装依赖。为了避免国内安装太慢，建议先运行npmconfigsetregistryhttp://registry.npm.taobao.org设置国内镜像。最后运行nodesimple-html-and-json-server.js启动本地服务。我们来看看在浏览器中打开http://localhost:3000/的效果。好的，整个事情已经启动并运行了。hello.json数据请求失败。不出所料，网上没有http://sheng.shuqiang.com/hello.json服务链接。把网上的域名改成本地的，试试http://localhost:3000/hello.json。漂亮的！！！至此，本地搭建的前后端环境已经成功，解决了问题（1）。代码在手，天下我有，想为所欲为，自然要模拟假数据（Mock）。你是不是有点兴奋？再也不用担心和后端同学加班联调了。只要自己和自己过联通，就可以保证前端这边没有问题，剩下的就交给后端的同学慢慢调整吧。停下，别走！您在电脑上使用浏览器访问本地服务并通过联通自检。你的手机呢？手机可以访问公司局域网内的电脑吗？手机直接连接电脑，试试手机先连接电脑好吗？让我们先简单点。我的电脑和手机用的是家里的网络，没有网络政策限制。让我们看看我是否可以连接。成功了，虽然在情理之中，但心里还是有些高兴。还有一点，有些同学运行ifconfig命令来查找电脑的IP，有点费力又伤眼，推荐一个简洁大方的。接下来，尝试连接到企业VPN！电脑连上公司VPN后，IP地址是不会变的，但是这时候刷新手机网页，不出意外就进不去了。既然不能用局域网，那换个思路，直接断网直接USB连接如何？是时候让AndroidDebugBridge发挥作用了。电脑运行adbreversecp:3000tcp:3000反向转发3000端口请求。简单的说就是手机访问3000端口会直接转发给电脑的3000端口代理，手机访问和电脑访问看起来是一样的。让我们拭目以待！说实话，刚到这里的时候，我的心都碎了。做不到。。。可以理解为手机访问http://192.168.101.17:3000/不可用。毕竟已经断网了，手机也访问不了。电脑IP。那么http://localhost:3000就不行了，为什么呢？不是说adbreverse就是反向端口转发吗？在手机上访问http://localhost:3000等同于在电脑上访问http://localhost:3000。在电脑上访问http://localhost:3000可以正常打开页面。为什么电话打不通？没了……掉坑里了，冷静点！改成http://127.0.0.1:3000试试？看，奇迹般的，手机可以上网了，开心极了。于是乎，网络限制就被绕过了，问题（ii）也被攻克了。您又可以愉快地在公司手机上访问电脑服务了。拼多多似乎拥有某种吸引所有人的魔力。当别人关心拼多多买东西有多便宜时，作为一名技术工作者，更吸引我的是拼多多页面为什么这么快？科学上网拼多多浏览器直接打开拼多多首页网址http://pddwyb.com，不出意外就跳转到了登录页面，想让我打退堂鼓。显然，我还在继续，照他说的做，用手机号登录试试。果然，我的手已经被保护了。登录后跳转到首页，然后快速跳回登录页面。有意思，代码都在我电脑上，页面瞬间刷新首页，又可以调试页面了，难不成现在打不过我了？毕竟大家学的都是一样的。电脑在我手上，夺冠只是时间问题！如果我能在页面跳回登录页面之前用断点暂停页面不就好了吗？照办吧，看看ChromeDevTools->“SourceCode”->“EventMonitoringBreakpoint”，勾选几个比较有可能的，刷新页面，果不其然，停了下来。回过头来看，只需检查“DOMChanges”->“DOMContentLoaded”。断点在跳转到登录页面之前就停止了，这就是我想要的效果。单击浏览器导航栏中的“文件”->“将页面另存为...”。这里要注意“网页，全部”的格式，这样相关的依赖文件也一起保存。直接打开本地存储的拼多多Html主文档试试。主页一眼就能正常显示，不错。然后你会在控制台看到一堆CORS跨域错误和网络故障。跨域问题很容易解决。页面路径和依赖文件本来是在同一个文件夹下的，但是直接访问文件会出现跨域问题。在本地启动一个http-server服务可以吗？去做就对了！运行npminstallhttp-server安装http-server依赖包。安装成功后，运行./node_modules/.bin/http-server。-p8080启动本地http-server服务。在浏览器中输入http://127.0.0.1:8080/pddwyb.com.html就可以看到了。接下来如果要解决跨域，可以像上面Express的后端服务一样，在网络响应头中添加Access-Control-Allow-Origin:*和Access-Control-Allow-Headers:Content-Type。是的，但是这样做太麻烦了。拼多多首页的Html主文档直接包含了首屏静态DOM信息。我们可以看到，拼多多使用了服务端渲染（SSR）首屏优化技术，这也是我们要找的页面打开“快”的原因。虽然H5代码没有任何秘密可言，但是经过混淆后阅读起来还是很吃力的。一般不会直接更改混淆后的代码，而是采用额外执行代码或覆盖代码的方法。问题Ⅲ构建本地运行代码也解决了。这里还好吗？答案是否定的！以上手写操作只是为了方便大家用最简单的方式理解原理，在特殊情况下可以有更多的解题思路。真正的方法当然是站在巨人的肩膀上，借助一个强大的工具Whistle（读作[?w?s?l]，拼音[wēisǒu]），恰好就是这样一款前端调试工具。深入Whistle完全可以实现前端抓包和Mock数据功能。最吸引我的是它的轻量级和开源（免费）。但是在实际测量的过程中，还是遇到了一些没有说明或者没有详细的操作步骤等问题，导致始终效果不佳。这也是我写这篇文章的初衷，为未来的自己和屏幕前的你记录下来。接下来我就一步步带大家了解Whistle可以用来提高我们工作效率的功能点，以免踩坑发疯。手机抓包首页必须安装whistle。考虑到国内安装比较慢或者失败，运行npminstallwhistle-g--registry=https://registry.npmmirror.com指定镜像安装。安装完成后，whistle、w2、wproxy这三个命令是等价的，都可以用来执行whistle命令。您可以运行w2-V来检查版本。如果可以正常打印，则说明安装成功。安装完成后，运行w2start启动whistle。您可以通过在浏览器中打开http://127.0.0.1:8899/#network来查看whistleweb控制台。现在网络请求基本上都是通过https。如果要抓包，必须在电脑和手机上安装https证书。证书条目如上图所示。证书下载好后直接双击安装，中间需要输入密码，然后whistle证书选择“始终信任”如下图。将电脑下载的whistle证书复制到手机中，如下图所示安装证书。手机证书安装成功后，将手机连接到电脑哨子代理服务，即手机网络设置为手动代理到电脑IP地址（我的电脑是192.168.101.17）和3000端口。注意手机和电脑必须连接到同一个网络。手机连接电脑whistle代理服务后，你会在电脑whistleweb控制台抓取手机发送的所有网络请求包，包括HTTP、HTTPS、WS、WSS等。打开拼多多手机浏览器首页http://pddwyb.com/抓包看到货架瀑布流列表数据~其实大部分开发都是用电脑浏览器，在电脑上启动本地服务就可以抓包了打包模拟数据？模拟电脑本地服务假数据虽然前端的本地服务可以在代码中写入假数据（简称Mock数据），但这毕竟是对业务代码的侵入。如果没有删除干净，可能会被带上线。通过前端写假数据来测试代码是无奈之举。那么是否可以在不修改前端代码的情况下模拟假数据呢？答案必须是肯定的。我们来看看上面的手机抓包打了很多数据。让我们模拟一下。通过抓包，也可以进一步证明拼多多使用了SSR首屏渲染。第一屏已经渲染出来了，自然就没有json数据了，所以我们只能mock货架瀑布第二页的数据。先给大家看看效果，再说说怎么做？将拼多多首页第二页第一标题“【超低价】2022板栗生栗子”改为“求进”，将第二标题“批发白红全新料无味”改为“不愧为你”。只需要两个简单的步骤就可以实现上面的Mock数据。第一步：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，点击复制按钮复制第二个货架瀑布数据的页面。点击切换到Values页面，新建文件query_goods_list_by_opt_id_c_v2.json，粘贴复制的货架瀑布数据列表，修改第一个货架的goodsName的值为“worthyofyou”。注意：修改完成后一定要保存文件。如果不保存，文件名和Values会是红点。请注意，不保存不会生效。第二步：resBody://{query_goods_list_by_opt_id_c_v2.json}，其中resBody://表示替换返回数据，{xxx.json}对应mock数据。配置完成后，再次刷新页面，可以抓包看到mock修改的数据已经生效。这里需要注意的是，修改内容后，需要手动保存。注意ValuesandRules左上角是否有红点。.至此，我们就完成了手机端的数据mock，电脑端的mock也是一样的。但是现在的问题是，如果手机网络断开，哨子控制面板根本抓不到其他网络包。如果要抓包，必须请求使用whistle端口（默认8899）作为代理。如果你想让你的电脑浏览器能够抓包，你需要设置浏览器端口（http默认80端口，https默认443端口）代理到8899，两种方法都可以。方法一：w2proxyon开启代理，w2proxyoff关闭代理。在这方面，我也被各种文件难住了。有些还打开“网络首选项”->“高级”->“代理”->“WebProxyHTTP”设置“127.0.0.1:8899”和“SecureWebProxyHTTP”设置“127.0.0.1:8899”。其实w2proxyon相当于在高级网络面板中设置HTTP和HTTPS代理为127.0.0.1:8899，w2proxyoff相当于取消设置。运行相关命令后，可以在网络面板的高级选项中查看代理状态，两种方法完全一样。方法二：检查代理浏览器是否生效最简单的方法是看http://local.whistlejs.com)是否可以正常打开。如果能正常打开，说明浏览器代理设置生效。当然代理的有效性也可以通过刷新页面看是否有对应的抓包信息来判断。总体而言，推荐的方式是安装SwitchyOmega插件，该插件还有其他高级功能有待探索。棘手的是网上很多文档都没有说清楚。事实上，这是一种相互排斥的关系。一直在互斥和互补之间跳来跳去...，惨痛的教训是一定要到chromeappstore官方渠道下载安装，不行就删掉重新安装。问题还没结束？虽然解决了电脑浏览器代理问题，但是本地服务，比如上面设置的express端口3000服务，访问url为http://127.0.0.1:3000，根本抓不到。其实大部分本地开发的前端代码都是类似这样的。如果您无法捕获模拟数据，那就是浪费时间。在这一点上，粗略的猜测和胡乱的测试肯定是行不通的，那我们就来梳理一下计算机的理论知识。这涉及对HTTP请求和端口的理解。HTTP默认端口号为80，一般情况下，HTTP请求不包含端口号，即默认端口为80，即http://www.baidu.com等同于http://百度网：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端口，听起来有点绕，直接上解决方案。在规则页面添加转换规则：^http://sheng.shuqiang.com$http://127.0.0.1:3000。直接通过http://sheng.shuqiang.com访问http://127.0.0.1:3000服务。CROS跨域问题就像上面分析拼多多跨域问题的解决方案一样，在网络响应头中添加Access-Control-Allow-Origin:*和Access-Control-Allow-Headers:Content-Type即可。如果单独服务的成本有点高，resHeaders://{corsheaders}规则可以完美解决这个问题。给网页添加脚本，上面拼多多也提到过。直接看混淆码太费力了。正常的操作是添加代码来操作DOM或者修改逻辑。正好口哨也有这个功能。我们先来看一个有趣的东西。加个代码直接把“百度”改成了“是你”。注入vConsole调试面板，运行w2iwhistle.inspect安装whistle.inspect插件，在规则中配置http://sheng.shuqiang.comwhistle.inspect://。在远程日志规则中配置https://sheng.shuqiang.comlog://，在Network页面打印主文档请求对应的console.log日志。看完这篇我再简单总结一下。通过Express前端框架，可以简单的搭建一个路由服务，对返回内容进行细粒度的代码控制。通过ADB反向转发接口，可以在断网的情况下通过USB线访问网络服务。通过前端断点、保存网络文件内容、http-server，随心所欲更改，有助于迭代更科学的在线解题思路。终极武器属于哨子。其强大的功能包括但不限于手机电脑抓包或mocking数据，轻松解决CROS跨域问题，网页添加脚本，注入vConsole调试面板和远程日志，理论上可以通过转发链接。实现手机直连电脑服务。
