起因

以往我们在移动端做调试的时候,总是喜欢调试手机和当前电脑联入同一个局域网,然后通过 if config 找到当前 ip, 然后在当前手机中将 localhost 替换成找到的 ip 地址就行了。
但是今天我在做移动端调试的时候发现一个问题,无论我怎么样都不能让调试手机进入到当前 react 项目进行调试,包括拍拍重启换一台等方法。为此我探索了各种方法,终于找到了解决方案。

探索

寻找正确的调试工具

当我按照以往的方法做移动端调试的时候(因为自用的是 iOS 系统, 所以主要还是用 iOS 做测试)。通过 ip 地址进入时,一直展示是白屏,但是可以看到 react 项目的 logo, 初步判断是由于系统报错的问题,但是很诡异的是在 PC 端可以正常打开,在 Android 上也可以,在 iOS 手机端却不行,这就很神奇了。我首先想到的是移动端浏览器的问题, 然后换了 Safari 浏览器,同样还是白屏。最后锁定了有可能是 iOS 系统的问题。遇到这种办法,我首先想到的是应该想办法做移动端的调试,能看到报错信息就好了。然后我在网上找各种调试工具,包括探索 Ngrok 等方式,可以看以下这篇 blog:

Debugging React applications in Mobile Devices

通过调试工具的探索,我最后锁定了以下调试方法:

如何用手机测试自己写的 web 页面?

通过 Safari 浏览器打开了报错的控制台然后看到了报错信息(在连接 Safari 浏览器进行调试的时候也会遇到很多系统的连接问题,不过重启可以解决大部分问题,如果一直配置不上,可以试试重启)

查看具体报错信息

费劲千辛万苦,终于看到了报错信息,发现我在加载的时候在 Safari 浏览器的控制台弹出以下报错信息: Invalid regular expression: invalid group specifier name,网上关于此报错信息的解释有各种解释,但究其原因其实只有一种,就是当前浏览器不知道这样的表达式,我再继续查阅资料发现,这是因为当前的 IOS 系统不支持 零宽断言 , 能够查看到具体的报错信息之后,我启动当前 react 项目的 dev 模式,成功 debug 到具体报错的那一行,然后将 零宽断言的正则表达式修改之后,项目就能够成功的在 iOS 移动端跑起来了。

结论

每次遇到莫名其妙的问题的时候,我的第一反应可能是低级错误,比如语法错误,或者字打错了,这样能解决掉大部分问题。但是每当遇到找不到问题的解决方案时,可以试试换个思路,做一些 AB Test,将无关的因素排除掉,直到最终锁定问题。