前端手机调试技巧

前言

最近一年主要工作转向前端，此前火暴一时的iOS渐渐被各中小公司冷落，所以跟随公司步伐开始从事前端开发，本文主要总结一下前端开发中各种情况下怎么让页面进入调试状态，各位有宝贵意见希望在评论中多多留言。

Nginx

毫无疑问，nginx是前端开发必备工具，在手机真机调试页面时都会用到。
安装

$brew install nginx  

完成之后可以直接终端输入nginx开启服务，浏览器输入http://localhost:8080 或本地ip即可进入nginx页面，要修改nginx配置可进入以下路径修改/usr/local/etc/nginx/nginx.conf,主要要修改的就是端口号和root路径对应的地址

修改完之后保存，在终端中输入 nginx -s reload重启nginx服务，设置好之后就可用手机进入链接http://本机ip:端口/路径/index.html 访问对应的开发页面进行真机调试了

Charles（Fiddler）使用

由于没怎么使用过fidder，功能都是一样的。使用频率最高的有

• 查看网络请求的参数、响应数据
• 远程文map
• 本地文件map
• 断点修改请求参数或者返回数据
  想要看详细的charles使用教程看这里

上线后手机端调试

开发时候可以随便修改本地的代码来随时查看，如果把代码布到测试环境或者已经上到正式环境想要查看和调试对应的bug就不那么容易了

安卓webview：chrome调试

详见官方文档
缺点:

• 1、需要手机安装chrome
• 2、应用程序需要设置允许远程调试(4.4之前的机器不支持)

iOS：safari调试模式

手机：设置 → Safari → 高级 → Web 检查器 → 打开
mac：Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单。

mac上打开Safari 之后，连上 iOS 设备，启动 Safari，进入对应的页面，然后电脑safari的开发菜单中可看到iOS设备浏览的各页面，点击进入调试模式。

缺点:只能看safari和一些自己开发的webview，其它应用程序调试不了

其它

chrome浏览器、UC浏览器调试工具等，由于种类太多，不可能每个浏览器都用不过的方法调试，所以没有去使用

通用：weinre大法好

weinre作为一个通用的远程调试工具，主要用来远程调试手机端的页面，界面和功能和chrome调试时类似，它没有其它限制条件，只需要引入一个监听的js文件就可以实时查看和调试页面了。
安装
npm install -g weinre
启动
weinre --httpPort 8081 --boundHost 192.168.9.124
此时已经打开监听功能，在pc浏览器上访问http://192.168.9.124:8081 ，就可进入weiner主页面

在这个页面有介绍怎么监听自己的页面，还有相应的demo,进入 http://192.168.9.124:8081/client/#anonymous 就可以打开调试页面，如果有监听到页面调用了Targets里面有对应的页面地址，显示绿色的为当前选中页面，就可以实时查看html结构，修改css样式，查看console了。

Tips:好多人不使用weinre是觉得需要加入指定的js文件比较麻烦，不过使用Charles可以简单解决这个问题，把线上的js文件或者html直接map到本地的文件，然后在本地文件进行添加weinre需要的js文件，这个不管是什么手机，不管是什么页面，我们都能在PC上进行调试了。同时把远程的文件map到本地进行修改和验证bug也是经常使用的