如何进行真机调试

一、手机如何访问到本地主机页面（真机访问）

webpack 的配置文件中设置本地服务器的域名为 0.0.0.0，可参考下面配置：

devServer :{
    disableHostCheck: true,
    host: '0.0.0.0',
    port: 9095
}

此时，本地主机可使用多种方式访问页面，好比：localhost:909五、ip地址:9095

手机也能够经过访问主机 ip地址+端口号 来访问页面，主机ip地址经过命令行 ipconfig 查看，好比：http://192.168.43.20:9095

 

1.一、本地服务器配置不一样域名时访问地址

webpack的配置文件中设置的本地服务器为：

devServer :{
    disableHostCheck: true,
    host: '0.0.0.0',
    port: 9095
}

时，本地访问localhost、127.0.0.一、和以本地ip地址开头的域名好比：http://192.168.43.20:9095时，就能够访问到，可是访问0.0.0.0:9095就访问不到

当配置为：

devServer :{
    disableHostCheck: true,
    host: '127.0.0.1',
    port: 9095
}

时，本地访问localhost、127.0.0.1能够访问到，可是ip地址、0.0.0.0:9095就访问不到

 （手机能访问的前提是手机跟主机在同一局域网内，且主机配置页面服务器地址为 0.0.0.0 ，由此手机可经过主机的ip地址访问到页面）

 

二、手机端出错如何查看调试信息（真机调试）

代码配置好webpack后，手机能够经过主机 ip 地址来访问页面，但当页面出错时如何查看出错信息，如何进行调试呢？

（1）USB数据线链接手机，手机开启调试模式

（2）手机经过访问主机 ip 地址+端口号 来访问页面，或者打开其余页面也行，任何页面均可以在主机上进行调试

（3）主机chrome浏览器地址栏输入：chrome://inspect/#devices ，会看到相似于下图的状况

（能够看到所链接的设备的名称和信息，下面就是当前设备上能够用于在电脑上调试的页面的一下信息。若是没有显示链接的设备信息，则表示没有链接好，能够插拔手机或关闭调试模式重开一下）

手机USB链接后，可能会出现并不显示链接设备的状况，此时就是仍未链接成功，能够经过 adb 来进行链接

（4）在某一页面的下面点击 inspect 按钮便可，接着就能够进行一系列的调试了

参考：https://www.jianshu.com/p/4d6fbdddad5c

2.一、如何经过 adb 来链接手机

adb 只是一个命令行窗口，并不能直接运行，下载完成后是一个 exe 文件，直接双击可能并不能运行。

下载完 adb 后，手机USB链接电脑，在电脑谷歌浏览器输入chrome://inspect/#devices 可能看不到链接设备信息，这种状况就是仍未链接成功。

这时候在 adb 的可运行程序即 exe 文件目录下执行 cmd，而后再运行adb devices，手机端应该就会弹出显示框，选择后就能进行相应调试，电脑谷歌浏览器也能看到链接设备的信息。

这时候若是还没出现链接设备信息，有多是手机未打开USB调试选项，打开便可

adb 下载地址：https://www.jianshu.com/p/4d6fbdddad5c

 

三、点击 inspect 按钮后出现HTTP/1.1 404 Not Found

 在链接设备出现后，并且页面也显示出来了，可是点击按钮 inspect 可能会出现HTTP/1.1 404 Not Found的状况，我当时就是这样，而后由于这个问题而找了很久解决方法。

这个问题的出现是由于谷歌浏览器的版本问题，电脑上的谷歌版本太新，在网上看到说是由于手机上的谷歌浏览器版本比电脑上的高。（应该是由于电脑上的谷歌浏览器版本过高，67.x版本就能够）

由此我下降了谷歌浏览器的版本，并且是只能卸载新的版本才能安装旧的版本。手机端我使用的是 Chrome 67.0.3396.87 版本、电脑上我使用的是 67.0.3396.79（正式版本），这两个版本配合使用能够进行调试。

经过点击 inspect 按钮可能会比较慢，并且可能会出现问题，咱们应该经过点击 inspect fallback 按钮进行调试，固然，只有版本正确并且链接成功时才会出现这个按钮

 参考：https://stackoverflow.com/questions/51519636/google-chrome-developer-tools-android-debugging-returns-http-1-1-404-not-found

 

四、在手机端访问本地后台可能出现的问题

在手机端访问本地后台服务器可能会出现问题，以前在本地页面访问本地后台服务器使用的是 localhost 来进行访问，可是当在手机端时，即便手机和主机使用的是同一局域网，若是接口地址不改，仍然使用 localhost 来访问，此时就会报错，访问不到。

应该把接口的域名改成主机的 ip 地址，这样手机端就是经过主机的 ip 地址来访问接口，此时电脑端页面也能够访问接口。