移动端页面快速调试

本文试图探讨一些移动端页面的快速调试方法，如果你有更好的方案，不妨留言告诉我。

快速打开指定url

最开始我的方法是使用二维码，但是这种方案流程过于繁琐，要生成url，打开浏览器，然后打开扫码工具对准图片扫码打开。后来的办法是 imessage 发送 url 到手机上再点击链接打开，这种办法会快一点，但还是没有办法支持webview。

我最后想到的方案是用node做一个跳转的服务，代码很简单

#! /usr/bin/env node

var http = require('http');
var exec = require('child_process').exec;

var url = process.argv[2];
var port = process.argv[3]|| 3000;


http.createServer(function (req, res) {
  exec('ifconfig | grep 192.168 | awk \'{print $2}\'', function(err, stdout) {
    if (err) throw err;
    var ip = stdout.replace('\n', '');
    url = url.replace('localhost', ip);
    res.setHeader('Location', url);
    res.statusCode = 302;
    res.end();
  })
}).listen(port);

//console.log('server started at ' + port);

保存为 redirect 然后执行 redirect http://localhost... 启动服务。这样做的好处就是可以把移动端需要请求的url固定（当然本机的ip最好是固定的），调试移动端只需要访问固定的url http://192.168.xx.xx:3000，webview里面可以把这个url写死，每次变更调试的url也只需要重新启动服务，然后刷新客户端。

页面自动刷新

因为 webview 不像浏览器有刷新按钮，所以一开始我们的办法是在让原生的客户端加个refresh的按钮，二来每次要点击刷新也是比较耗时的。最后办法是使用 tiny-lr ，我在之前的文章有过介绍，其使用方法分三步

1 启动 tiny-lr 服务，命令 tiny-lr (-h 参看帮助)

2.html页面嵌入与后端通讯的代码

    <!-- livereload snippet -->
    <script>
    document.write('<script src="http://'
      + (location.host || 'localhost').split(':')[0]
      + ':35729/livereload.js?snipver=1"><\/script>')
     </script>

3.发送h ttp 请求到 tiny-lr 刷新浏览器

 curl -X POST http://localhost:35729/changed -d '{ "files": "build.css" }'

这种方式不仅方便，而且也不会限制你的后台语言或者代码构建方式。

样式调试和控制台

我使用的工具是weinre, 执行命令

    npm install -g weinre

即可安装，使用方法也是3步，

1.启动 weinre 服务

   weinre --httpPort 8081 --boundHost `ifconfig | grep 192.168.199 | awk '{print $2}'`

(boundHost 参数执行了一个获取本机 ip 的子任务，我也不知这玩意为啥要绑定 ip 才能用)
建议将此命令写个alias到你的 shell profile .zshrc或者 .profile 之类的文件内简化调用

2.页面内嵌入 weinre 服务通讯的前端代码

<script>
var host = location.host || '';
if (/192\.168/.test(host)) {
document.write('<script src="http://'
+ host.split(':')[0]
+ ':8081/target/target-script.js"><\/script>');
}
</script>

判断了一下host，这样就算不小心提交到线上也不可能会报错。

3.浏览器打开http://192.168.199.88:8081/client/#anonymous（换成你的本机ip），就可以查看样式以及console输出了。