网页真机调试

移动端调试困难
很多时候，我们在进行移动端开发时，都是先在PC端使用手机模拟器进行调试，没有问题后，我们才会在手机端的浏览器进行测试。这个时候，如果没有出现问题，皆大欢喜。但是一旦出现问题，我们就很难解决，因为缺乏可视化的界面。不似在PC端，我们能直观的去改变样式，或者是进行断点调试。有时，在移动端我们不得不借助于alert来调试，但是这样的调试方法效率极其低下。很多时候，都是靠经验，或者是靠排除法。
甚至，我们不得不归结为是浏览器的实现问题。
那么，有什么什么方法，能够让我们调试移动端的适配的时候，像调试PC端一样直观呢？

一.spy-debugger真机调试

特点:

• 1.页面调试＋抓包
• 2.操作简单
• 3.支持HTTPS。
• 4.spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。
• 5.自动忽略原生App发起的https请求，只拦截webview发起的https请求。对使用了SSL pinning技术的原生+ + 6.App不造成任何影响。
• 7.可以配合其它代理工具一起使用(默认使用AnyProxy)
  安装使用
  全局安装spy-debugger
  npm install –g spy-debugger
  启动
  spy-debugger.cmd
  image.png
  image.png

手机配置
设置手机的HTTP代理：
代理的地址为PC的IP地址，代理的端口为spy-debugger的启动端口(默认端口为：9888)默认端口是 9888。
如果要指定端口： spy-debugger–p8888。
Android设置步骤：设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动。
iOS设置代理步骤：设置 - 无线局域网 - 选中网络 - HTTP代理手动。

二.Browsersync真机调试

• 这个方法也是我经常使用的方法 官网地址---Browsersync
  特点:
• 1.Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。
• 2.有了它，您不用在多个浏览器、多个设备间来回切换，频繁的刷新页面。更神奇的是您在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中，这一切还可以通过可视化界面来控制。
  安装应用
• 1.Browsersync和spy-debugger一样都是基于nodejs的所以先要安装nodejs
• 2.全局安装Browsersync
  npm install -g browser-sync
• 2.启动
  browser-sync.cmd start
  image.png
  image.png
  手机配置
  手机只需要和pc处于同一局域网下就好了,如果你的pc开启了一个服务器,在手机输入pc的ip地址加端口,就能访问到pc上部署的网页了
  这个工具非常强大,能够实时更新.如果你在电脑修改了文件.手机端不需要刷新就能看到最新的效果,也是我最喜欢的一个真机调试工具.
  同步更新到我的个人博客曌明博客