移动端真机调试

手机真机调试

谷歌浏览器真机调试：

1. 电脑先翻墙
2. 然后在PC端打开chrome浏览器，在地址栏输入: chrome://inspect. 勾选”discovery usb device”。手机用usb线链接电脑，要开usb调试模式。
3. 然后在手机端的chrome浏览器浏览网页。
4. chrome://inspect页面点击inspect，进行调试。


可以在电脑上动态修改样式，手机上回同步更新。和电脑的控制台一模一样。可以断点，可以改样式，可以看console,可以看netWork,cookies
 

weinre 真机调试

weinre安装
全局安装: npm install weinre –g


启动: weinre --boundHost [hostname | ip address |-all-]  --httpPort [port] 
weinre --boundHost 10.109.40.7  --httpPort 8087 -–readTimeout10 --debug true


局限性：
1.注意端口不要被占用。
2.调试前把页面所有的console.log都去掉，留下重要的console.log,否则太多打印它会蹦掉。
3.只能在手机和电脑在同一局域网内(链同一个wifi)才能访问调试，手机连4G网络就调试不了。

4.不能断点调试。

页面通过10.109.40.7:8090 访问weinre的服务页面。
复制Target Script中的script标签，粘贴到需要调试的页面上。这样手机或电脑访问该页面时，debug client user interface里面就可以调试该页面。
weinew启动参数说明: 
1. –httpPort: 设置Wninre使用的端口号，默认是8080 
2. –boundHost: [hostname | Ip | -all-]: 默认是 ‘localhost’. 
3. –debug [true | false] : 这个选项与–verbose类似， 会输出更多的信息。默认为false。 
4. –readTimeout [seconds] : Server发送信息到Target/Client的超时时间， 默认为5s。 
5. –deathTimeout [seconds] : 默认为3倍的readTimeout， 如果页面超过这个时间都没有任何响应， 那么就会断开连接。

1. spy-debugger真机调试

全局安装:npm install spy-debugger -g‘


然后直接在命令行运行spy-debugger 即可
手机wifi设置代理 ， 
代理设置为手动，主机名设置为电脑的ip，端口设置为spy-debugger的启动端口(默认端口：9888)。
然后用第三方浏览器下载证书，安装，如无法安装，可以在wifi->高级设置->安装证书
手机访问页面即可抓包和看看DOM和console
可以抓包，可以调试页面。
和weinre的区别：
1. 和weinre一样要在同一个局域网才能使用代理。
2. 和weinre的局限性一样，只是多了一个抓包功能。
3. 把加一句代码的操作变为通过端口拦截。

[官方文档](https://www.npmjs.com/package/spy-debugger)