记一次虚拟机中debug的流程

错误描述

• 新做的widget在IE11上出不来
• 在其他的浏览器上都可以正常显示
• 使用前后端分离的开发方式
  • 前端：webpack-dev-server启动服务
  • 后端：ruby on rails

问题解答

如何在虚拟机中debug？

问题转化为：In Parallels VM, How to access the server setup on localhost ?

• 在虚拟机中访问localhost会得到什么结果？

  • 虚拟机理解成另外一个操作系统，network都是独立的，因此你访问的localhost必然是虚拟的，并不能访问到宿主机，因此在宿主机启动localhost启动的服务不可能被访问

• 对于虚拟机而言如何才能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请求）

• S2: 如何fix由于请求挂了出现的bug

  • copy请求的url，单独使用浏览器或者postman发送请求。获取请求结果：

  • 没有状态码

    
    image.png

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()然后再发送请求，就不需要浏览器为我们编码再出现差异