错误描述
- 新做的
widget在IE11上出不来 - 在其他的浏览器上都可以正常显示
- 使用前后端分离的开发方式
- 前端：
webpack-dev-server启动服务 - 后端：ruby on rails
- 前端：
问题解答
如何在虚拟机中debug？
问题转化为：In Parallels VM, How to access the server setup on localhost ?
-
在虚拟机中访问
localhost会得到什么结果？- 虚拟机理解成另外一个操作系统，network都是独立的，因此你访问的
localhost必然是虚拟的，并不能访问到宿主机，因此在宿主机启动localhost启动的服务不可能被访问
- 虚拟机理解成另外一个操作系统，network都是独立的，因此你访问的
-
对于虚拟机而言如何才能access宿主机呢？
- 对于虚拟机而言可以通过访问宿主机在局域网中的IP
-
假设此时在宿主机上的
3002端口启动服务器，宿主机在局域网中的IP是10.205.20.20,虚拟机可以通过10.205.20.20:3002获取服务吗？- 不可以！原因：
- 服务默认会启动（监听）在localhost(127.0.0.1)的3002端口
- 而虚拟机访问的是10.205.20.20:3002
- 很明显IP不同，因此必须将服务器启动（监听）虚拟机访问的IP上才行
- ruby： rails s -b IP
- webpack-dev-server: 将webpack-dev-server的express服务启动监听在IP上： 因此需要对devServer做host的配置
- 不可以！原因：
-
那么将服务启动（监听）在宿主机的IP上导致在宿主机上无法使用
localhost进行服务的请求，该怎么办？0.0.0.0指的是本机上的所有IPV4地址，如果一个主机有两个IP地址，
10.205.20.20局域网IP和127.0.0.1，并且该主机上的一个服务监听的地址是0.0.0.0,那么通过两个ip地址都能够访问该服务。因此我们需要将服务器监听的端口改成
0.0.0.0
此时就可以正常的在虚拟机中通过本机在局域网中的IP访问宿主机上的所有服务器
此时环境准备就绪从哪里开始debug？
-
S1: 找
ERROR,定位错误位置- 打开
devTool面板- 查看console面板是否报错
- 根据错误定位代码位置
- 查看network面板是否出现请求错误（filter出XHR请求）
- 查看console面板是否报错
- 打开
-
S2: 如何fix由于请求挂了出现的bug
- copy请求的url，单独使用浏览器或者
postman发送请求。获取请求结果： -
没有状态码
image.png
- copy请求的url，单独使用浏览器或者
ERR_CONNECTION_REFUSED: 说明此时请求并没有被发送到服务器，
- 可以去check一下请求发送的url是否正确
- 服务器是否没有启用
- 有状态码
**只要有状态码就说明此时请求必然已经发送到服务器，那么如果出现>=400的状态码那么就可以直接去服务器debug，因为这个状态码必然是服务器发送过来的**
- 因此可以根据状态码查看该状态吗对应的错误原因
- [状态码对照表](http://www.cnblogs.com/shanyou/archive/2012/05/06/2486134.html)
- 单独发送请求看看服务器的log
- 然后根据log定位服务器出错位置修复
- 举个例子：
我的widget内容请求返回的状态码是400,然后查看了状态码意义
> 400 （错误请求） 服务器不理解请求的语法。
说明我的请求中出现了语法错误，然后查看了服务器的报错信息
`Puma::HttpParserError: Invalid HTTP format, parsing fails.`说明我的url中出现了错误,导致服务器没有办法`parse`。
- S3：如何思考不同浏览器中对同一个请求会返回不同的状态码？
方法：从不同浏览器的network面板copy出请求的
url以及request head进行对比-
结论：
URL中的特殊字符（
"; / ? : @ & = + $ , #"）需要被转换成ASCII码才能发送到服务器，通常浏览器会帮助我们check URL中是否包含这些特殊字符，如果包含就默默的帮助我们转码，但是不同的浏览器对特殊字符以及中文字符转码的策略又不同，因此可能会导致不同的浏览器请求结果不同。因此我们可以在发送请求之前，做一次统一对URL的编码
encodeURI()然后再发送请求，就不需要浏览器为我们编码再出现差异
