手机访问本地项目实现远程调试的几种办法

一、在服务器环境下通过IP访问

1. 首先搭建一个服务器环境或者下载现成的程序集成包（比如phpstudy、jspstudy等）。

2. 确保服务器和手机连接在同一网段。如果是笔记本的话，手机和笔记本直接连接在同一wifi下，如果是台式机，则需要插入无线网卡或者其他的无线措施确保两个在同一网段下。

3. 通过本机IP+端口访问需要测试的项目。
   ###二、liveStyle

4. liveStyle是个提供“样式实时预览”插件，在编辑器和控制台能够单向/双向实现样式修改的同步，而且对移动页面的远程调试也是非常方便。

5. 在sublimeText通过package安装liveStyle，在chrome安装扩展liveStyle插件。

6. 点击chrome浏览器右上角的liveStyle图标选择同步方式，添加需要修改的css,然后打开编辑器修改对应样式或者在控制台修改样式即可实现双向同步。

7. 移动设备的远程调试
   在liveStyle（http://livestyle.io/）官网下载Emmet LiveStyle APP。安装成功之后打开APP，执行上面的三步，然后完成下图操作后在手机打开生成的网址即可访问本地的项目。

###三、Browser-sync（https://www.browsersync.io/#install）

1. 安装 Node.js （http://blog.csdn.net/frontender_way/article/details/51497343）
   Browsersync依赖node，所以需要先安装node.js

2. 安装 Browsersync
   在命令行里通过npm安装：npm install -g browser-sync

3. 启动Browsersync

//静态项目：
// 监听css文件 
browser-sync start --server --files "css/*.css"
// 监听css和html文件 files为静态文件地址
browser-sync start --server --files "css/*.css, *.html"

//动态项目
// myproject.dev可以是ip或域名
// 监听css文件
browser-sync start --proxy "myproject.dev" --files "css/*.css"
// 监听css和html文件
browser-sync start --proxy "myproject.dev" --files "css/*.css, *.html"

然后在移动设备上通过ip+端口访问，这样就搞定了手机访问本地项目的问题。当然也可以和gulp等自动构建工具结合使用，https://www.browsersync.io/docs/gulp。

###四、使用charles代理（https://www.charlesproxy.com/latest-release/download.do）
具体可查看http://www.cnblogs.com/wonyun/p/charles_proxy.html?tdsourcetag=s_pctim_aiomsg 这篇文章的介绍