手机也能拥有Chrome开发者工具！跨时空App让网页调试变得触手可及

先说个场景。

前两天朋友发我一个H5活动页，说”你帮我看看这个按钮点了没反应是怎么回事”。我接过手机，点了几下，确实没反应。

正常情况下，排查这种问题，你得找一台电脑，打开Chrome，连上手机，开Remote Debugging，然后对着DevTools一行一行看网络请求和控制台报错。

整个流程顺畅的话大概需要五分钟。如果不顺畅，驱动没装好、USB线接触不良、Chrome版本不匹配，折腾半小时也正常。

问题是我当时不在电脑前。我在地铁上。

手机上打开一个网页，想知道它背后到底发了什么请求、Cookie带了什么参数、哪个JS报了错，你没有任何办法。手机浏览器就是个黑盒，你能看到的只有最终渲染出来的页面。至于这页数据从哪来的、为什么加载这么慢、本地存了什么东西，一概不知。

这是个老问题了。做前端的、做测试的、做运营的，只要跟移动端H5沾边的，几乎都踩过这个坑。

今天聊一个我最近在用的工具，叫「跨时空」。

它干了一件特别简单但特别实用的事，在你的手机上注入一个完整的调试工具。

什么意思呢，就是你开启它之后，随便打开一个网页，右下角会出现一个小图标。点开，Network、Cookie、LocalStorage、DOM元素、控制台，全在里面。

跟你在电脑上按F12看到的东西，基本是同一个。

用法简单到离谱。

第一步，开启注入开关。第二步，打开任意网页。第三步，点右下角那个vConsole图标。

没了。

我看了一下它的网络面板，跟Chrome DevTools的Network长得很像，请求列表、状态码、请求头、响应体，该有的都有。抓包这件事，在手机上终于不是一件需要借助电脑才能干的事了。

Cookie也能直接看。

这个在调试登录态的时候特别有用。很多时候H5页面白屏或者接口返回401，原因就是Cookie没带上或者过期了。以前你只能猜，现在直接看一眼就知道了。

还有一些细节我觉得挺加分的。

比如它用的是WebView层注入的方式，而不是普通的脚本注入。这两者有什么区别呢？

区别大了。

如果你用过一些浏览器的「开发者模式」或者油猴脚本注入JS，你会发现很多网站是不生效的。特别是GitHub这种安全等级比较高的站点，它有CSP策略，直接拒绝内联脚本执行。你注入的JS代码会被浏览器安全机制拦下来，控制台里全是红字报错。

但跨时空是在WebView层面做注入，绕过了CSP的限制。这意味着你在GitHub上也能正常调试，在那些安全策略严格的页面上也不受影响。

这个点我觉得是它跟其他类似方案拉开差距的地方。

而且它不只是支持vConsole，还能注入Eruda。

玩过移动端调试的应该都知道Eruda，它比vConsole多了Elements面板和Resources面板，更接近完整版Chrome DevTools的体验。如果你觉得vConsole不够用，可以直接切换到Eruda，功能更全面。

更骚的是，它还支持自定义JS库的注入。

也就是说你甚至可以往网页里注入你自己写的脚本。这一下玩法就多了。调试是一方面，另一方面你可以做一些页面增强、自动化操作之类的事情。

想想就觉得有点兴奋。

坦白说，这类工具市面上不是没有。vConsole、Eruda都是开源的，你完全可以自己把它们接到项目里。但问题是，你只能调试自己的项目。别人的网页，你改不了源码，就注入不了。

跨时空的思路不一样。它是在浏览器底层做的注入，跟网页本身没关系。所以你可以用它去调试任何一个网页，别人的项目、线上的活动页、第三方的H5，统统可以。

高能提示，你可以用它在手机上调试别人写的网页。

我不是说要拿去干坏事啊。但你想想看，作为一个前端，你的同事跟你说”线上这个页面在iPhone上显示有问题”，以前你得让他截图、录屏、对着DevTools复现。现在你直接掏出手机，打开页面，看一眼DOM结构和网络请求，三十秒定位问题。

这效率差距不是一星半点。

我自己用下来，觉得它最适合的几个场景：

线上H5问题排查，不用开电脑，手机直接看请求和报错。调试微信内嵌页面，在微信浏览器里打开网页后开启注入，比用微信开发者工具方便太多。还有就是帮别人排查问题，对方说”我这页面打不开”，你让他装一个跨时空，直接远程看数据。

回到最开始那个地铁上的场景。

如果当时我装了这个App，大概一分钟就能看出来那个按钮的点击事件压根没绑定成功，Network里对应的接口请求也没发出去。不用等到回家开电脑，直接在手机上就能给朋友一个靠谱的回复。

工具不大，但切的痛点很准。

做移动端开发和测试的朋友，可以试试。下载地址放这了：

https://kainy.cn/app/

不保证适合所有人，但如果你跟我一样经常需要在手机上排查网页问题，这玩意大概率能帮你省不少时间。

反正我是已经离不开了。

如有疑问或建议可微信联系 SyncMein～
谢谢你看完了我的文章，我们下次再见吧