前提
Mobile device 和 computer 在同一个网络下。
问题描述
- 发现有些bug只能在真机上能够复现，因此尝试电脑上启动本地服务器，服务server在8080端口
- 将手机的网络调至和电脑一个网络中
- 使用
ifconfig找出电脑的IP地址 - 使用手机访问
http://IP:8080/path
发现看到了一个纯HTML页面
解决思路
为什么只能看到纯HTML页面
在我之前的认知里,如果只看到了HTML页面，并且还是一个填充了data的HTML页面，就说明只有ssr起作用了，browser side rendering（bsr）挂了.. so 我就一直反复的想为啥bsr没有生效呢。。。当别人告诉我这只是css文件没加载出来。。我还一直沉迷在bsr的漩涡中（感觉自己贼蠢）
实践告诉我们，只想不做是没有办法解决问题的，so：
第一步就是疯狂的找有用的log信息
mobile出错但是moblie看不到log，浏览器总能看到。尝试使用浏览器访问和mobile相同的路由,惊现相同的问题。
只要出现问题，请打开控制台看一下先
发现css和js的请求失败了,好吧你们说的对是因为css文件请求失败，log信息中还有请求的url。
为啥只有css和JS会失败，HTML咋不失败？
贴两张图直接表明原因：
-
第一张： 前后端分离的情况
image.png
-
第二张：服务器端渲染
image.png
从上图中可以看出了：
- 请求8080端口只是拿回来了HTML页面（带数据因为ssr）
- 不论你是ssr还是bsr都需要再次单独的访问css和js文件，webpack通常会帮助我们将css文件JS文件分别打包，因此在HTML中使用`link/script` tag引用url
因此，只出现HTML的原因是： css和Js的请求挂掉了。
第二步：请求挂了，找到请求的URL，以及返回的状态码
一看到请求的url，就瞬间明白了, 路径是这样的： http://localhost:8000/assets/client.css
呵呵呵，这种请求，不晓得手机的localhost会不会疯掉，我的项目启动了8000端口启动静态服务器，储存css以及js文件。
为了解决这个问题：需要分成两个步骤：
- 修改代码里请求的URL将host改为
your IP - 修改启动在8000端口的服务器的host改为
your IP
那么还需要将8080的host改成your IP吗？
-
首先你请求8080端口成功的拿到了HTML说明你是可以访问这个服务器的
补充一下，我的8080是express服务器，express 默认的host是0.0.0.0因此这里通过访问IP也可以访问到我的服务器。
第三步 服务器重启，OK可以访问到了
总结
- 想要debug mobile，mobile只能通过访问你的IP address
- 如果有请求需要访问IP address，那么必须要保证你的服务器可以监听到IP Host的请求（coz： 大多数的服务器默认启动在localhost，是不能监听到IP address的请求的）
- 只能看到HTML页面，说明css以及JS文件请求失败
