移动端网页调试

自2019.05.22日离职以来，本身在家浪了两天。而后发现，浪也该浪够了，该收心找下工做了。因而屁颠屁颠的拿起了《在你身边 为你设计》这本书看了一下午，看到移动端调试这里，略有感觉，因而提取了下内容。

还有还有，有哪位大佬推荐下前端开发的工做吗，base广州啊，不胜感激～关于我请戳blog下的resume.png😄

在这个5g到来的时代，移动互联网继续横行，前端的开发工做和移动端更加紧密了，可是移动端调试着实让人尴尬。化解尴尬的方法介绍下下面这几种，有补充的欢迎留言👏

使用Chrome Develop Tool调试

做为一个前端开发工程师，没下载个谷歌浏览器都很差意思说本身是混这行的了。在移动开发的过程当中，咱们是可使用桌面浏览器（推荐谷歌）进行调试的。尽管移动端网页与桌面端网页有诸多差别，可是说到底它仍是一个在浏览器里浏览的HTML网页，因此最经常使用的仍是在桌面借助Chrome调试器。

Chrome自带的Developer Tool对于调试移动端网页来讲很是方便，能够经过调整下表所示的几个属性来调整页面。

属性名	功能
User Agent	设置当前模拟设备的用户代理(UA)
Device metrices	设置页面的大小，默认值是模拟设置的大小
Emulate touch events	模拟触摸屏事件
Fit in window	页面大小是否会根据窗口大小进行适配

优势：无须额外的成本，方便快捷。

缺点：仅仅用来模拟，并不能彻底表明移动设备的真实情况。

使用IOS Safari + Mac OS Safari配合调试

这个方法对用MAC来办公的伙伴就比较友好了～

Apple容许开发者经过数据线链接的方式，在Mac OS的Safari里面调试iOS设备上的网页。可是这种方法在使用前，须要简单设置如下内容：

• 在iOS设备上，打开Safari的Web检查器，选择设置 -> Safari -> 高级 -> Web检查器命令。（用到JavaScript的话，顺便在Web检查器同级上开启吧）
• 在计算机上的Safari启用开发菜单，选择偏好设置 -> 高级 -> 在菜单栏中显示'开发'菜单命令。

当须要调试手机页面的时候，将设备与计算机经过数据线链接后，在Safari菜单开发栏下选择当前手机运行的页面便可。

优势：能够彻底在真机设备上调试网页，不管是HTML和CSS，仍是脚本和请求，都和在桌面浏览器同样，最重要的是当前调试的是在真实环境下的页面。

缺点：必须是iOS + Mac OS的组合，只能调试iOS设备的页面，不适用于Andriod设备。

使用Android Chrome + 桌面Chrome配合调试

嗯～Apple那么强势，我安卓表示不服，也要来本身的一套。

Google Chrome DevTools经过USB数据线直接调试手机上的网页。

只须要准备下面几个步骤：

• 在Andriod"开发者"选项里打开USB调试模式。
• 插上USB数据线。
• 在Chrome菜单里选择"工具"选项，继续选择检查设备选项，便可列出全部链接的设备。

优势：简单、跨平台

缺点：只支持Android 4+

使用Weinre远程调试

Weinre的github仓库地址是github.com/nupthale/we…，在其README.md里面有详细的介绍。

Weinre来源于Web Inspector Remote，是一个远程页面调试工具，功能和Firebug、WebKit Inspector相似，能够帮助咱们在PC端远程调试运行在移动设备浏览器内的Web页面或应用，可以即时调试DOM元素、CSS样式和JavaScript等。

Weinre为了可以同步桌面的调试客户端和移动设备上的调试目的，须要你搭建一个调试服务器(Debug Server)，经过这台调试服务器，能够在调试目标(Debug Target)和桌面调试客户端(Debug Client)之间创建一个同步的链接。详细的搭建见Weinre仓库的README.md介绍。囧，步骤有点多，不想码字了😳

优势：同时支持iOS设备和Android设备，而且能直接对手机上的页面进行调试，无须安装客户端。

缺点：须要对HTML页面有改动的权限，由于是远程链接的缘由，可能网络链接速度会影响调试的响应。

当看到优势是否是很激动，在真机上能够调试iOS和Android设备的网页耶✌️

使用vConsole调试

由腾讯出品的vConsole调试工具，在调试移动端的时候很是有效，并且其使用方法也是简单。

<script src="path/to/vconsole.min.js"></script>
<script>
  // init vConsole
  var vConsole = new VConsole();
  console.log('Hello world');
</script>
复制代码

上面的使用方法介绍了其中一种而已。固然了，引入的vConsole也要看下环境啊，线上环境的时候仍是要判断下的，别等到上线的时候忘记移除vConsole了，被怼就尴尬😅。

优势：使用简单，能方便查看所需调试的面板信息

缺点：不支持UI的调试

后话

嗯，调试工具各有千秋，还有调试工具可是未介绍到的有Charles抓包工具，postman接口调试工具等。

哈哈哈，有哪位大佬推荐下前端开发的岗位吗？base广州，关于我请戳blog下的resume.png。

• 文章首发：github.com/reng99/blog…

• 更多内容：github.com/reng99/blog…

参考

• 《在你身边 为你设计》
• 移动端调试痛点？——送你五款前端开发利器