前端开发必备——将Chrome浏览器做为Web服务器进行移动端开发调试

文章最后更新于2016年9月14日,已经超过3年没有更新,可能有数据不适应或链接失效等问题!

前端开发必备——将Chrome浏览器做为Web服务器进行移动端开发调试

随着移动设备的多元化,网页设计已不像五、六年前那么的单纯了,当将页面制作好后,大部分都可用控制台模拟各种移动设备下的效果,虽然可大概看一下是否有问题,但最终还是得到真实环境下才能确切的知道,例如文字大小是否洽当好阅读,按钮是否好按以及Javascript所写的交互是否能正常的运作。

而这时若要实现,将手机连进电脑,首先就是要先将电脑变成一台WEB服务器,这时不外乎就会使用USBWebserver、Xampp、MAMAP…等,但如果页面只是单纯的HTML,没有使用PHP与MYSQL数据库,此时有个更快速且方便的作法,就是把Chrome浏览器变成Web 服务器,如此一来就能将电脑中所编辑的网页,让手机连进来,并在实机上测试效果,操控相当的简单与方便,身为前端开发人员,赶快来看一下哦!

Step1

前端开发必备——将Chrome浏览器做为Web服务器进行移动端开发调试

进入插件的安装界面后,点右上角的加到CHROME钮,依序即可完成安装。

Step2

前端开发必备——将Chrome浏览器做为Web服务器进行移动端开发调试
比较特别的是,插件安装完成后,并不会出现在网址栏后方的拓展按钮,而是在应用程序页面,这时点一下Web Server图标。

Step3

前端开发必备——将Chrome浏览器做为Web服务器进行移动端开发调试
打开后,点下CHOOSE FOLDER按钮,选择目录。

Step4

前端开发必备——将Chrome浏览器做为Web服务器进行移动端开发调试
接着选择网页文件所在目录

Step5

前端开发必备——将Chrome浏览器做为Web服务器进行移动端开发调试
选择完成后,再网址栏上方输入127.0.0.1:8887,就可看到刚所选择的文件目录中的内容。

Step6

前端开发必备——将Chrome浏览器做为Web服务器进行移动端开发调试
由于127.0.0.1是本机的意思,因此手机是无法连进来的,这时将下方的Accessible to other computers的选项勾起来。

Step7

前端开发必备——将Chrome浏览器做为Web服务器进行移动端开发调试
接着再把上方的开关按钮,关闭再开启一次,这时下方就会出现该电脑由分享器中所配置的一组虚拟ip

Step8

前端开发必备——将Chrome浏览器做为Web服务器进行移动端开发调试
这时将手机与电脑连到同一个路由器上,再开启浏览器,并输入电脑的IP位置,这时就可浏览到电脑中的内容并且可以即时的预览啦!当电脑进行任何修改储存时,手机刷新浏览器,也会随即显示结果画面,这对于在前端开发人员来说,相当的方便,因此如果你是前端开发人员,也赶快来装一下吧!

个人点评

非常方便前端开发调试,特别是在交互方面很容易测试

加入讨论 1 条讨论

发表评论

昵称不能为空
请输入有效的电子邮件地址
评论内容不能为空

有人回复时邮件通知我