Remote Debugging Devices

时间 2019-11-21

标签 remote debugging devices 繁體版

原文原文链接

作过移动端开发的童鞋相信必定遇到过，页面在本身电脑上模拟各类手机都跑的好好的，但当程序正真在真机上运行时，总会遇到一些问题。php

有了问题就得要解决啊，这时你确定想手机上要是能打开控制台该有多好啊~html

办法固然是有滴。前端

首先，固然是来看看土豪们用的机器 iphone。vue

iOS 系统默认的浏览器是 safari，调试 safari 只需一下简单几步。git

而后就能看到手机上访问的页面内容了

注：若是 safari 菜单栏上没有【开发】，能够经过【偏好设置】>【高级】来设置
vuex

若是是本地调试的话，有一点要注意。iphone 经过 ip 地址访问会连接不上，须要经过用户名.local:端口号的方式访问，我这里就是 david-2.local:8080。chrome

看完 iOS，固然就要看看 Android。

打开 Android 机上的 Chrome 控制台同上面的方法大同小异。

注意：安卓机访问本地服务器，用 ip 地址就能够了，即 192.168.1.4:8080。

Safari 和 Chrome 都了解完了，是否是就结束了？固然不是，别忘了国内一大浏览渠道微信。

要调试微信浏览器，就须要额外下一个软件——微信 web 开发者工具。

安装完成后打开软件，切换到【移动调试】，根据提示操做就能够了。

若是，控制台中出现 weixin://preInjectJSBridge/fail 的错误，多是使用了不兼容的语法，加入相应 polyfill 能够解决。

若是，你觉得到此就结束了，那就图样图森破了。

国内绝大部分安卓机用户都用的不是 chrome，用的都是 UC、QQ 或者自带浏览器之类，水太深啊。

刚刚使用微信开发工具的时候，文档上有提到它是基于 weinre 的，那 weinre 是什么，能帮咱们解决问题么？

weinre was built in an age when there were no remote debuggers available for mobile devices.

它几乎支持各类新老浏览器，并且，安装和使用也很方便，具体安装方法在这篇文章中写得很详细了。

但，再如何方便不还得装么，并且还要修改当前的代码，那能不能有更好的办法？

BrowserSync 或许你们都有所了解，不了解的能够看一下我以前介绍它的文章。

BrowserSync v2.0.0 以后就默认提供了对 weinre 的支持，当你使用 BrowserSync 启动 server 时，能够访问 browsersync 的系统面板来开启 remote debugger。

控制面板的地址在 server 启动后的控制台上看到，默认为当前 server 端口号 +1，即 server 端口是 3000，那么，browsersync 系统面板的端口就是 3001。

这样，既不用修改任何一行代码，又能在任何机器的任何浏览器上使用，是否是很完美？

最后，固然仍是继续安利下本身的 Blog。

在以前将 vue 升级到 vue 2.0 并加入 vuex 以后，现又加入 graphql-js，并将 vue-router 切换到了 history 模式（点击查看源码）。