响应式网站开发跨平台真机调试工具

因为在为官网适配手机等设备,所以希望能让本地的站点不必上传到服务器就可以在手机中预览。网上给出的方案不少,但是真正可用,并且操作简单的并不多。ios的比较好解决,android的可以用BrowerSync,这是个命令行工具,要使用Node.js来安装。这里要介绍的是Adobe家的一套edge cc工具集中提供的两个工具来实现开发中在手机实时预览,因为这套工具同时支持iOS和Android,所以可以支持跨平台。
需要用的工具是:

2. 打开pc端的edge code cc。

edge code cc
edge code cc

code cc 是一款轻量级的开发工具,支持html , css , javascript等语言。code cc的界面简洁,左边是文件树,右边是快捷工具键,上边是菜单,中间一大块区域就是代码编辑区,可以看全整行代码,不用像其他开发工具那样要左右滑动才能看全整行代码。

3. 点击code cc 快捷工具键里的预览工具。

手机图标
手机图标

4. 打开手机端的inspect cc ,连接PC端的code cc 。

在手机端输入IP地址
在手机端输入IP地址

连接成功以后,手机端的inspect cc 就会显示PC端chrome浏览器的页面。

chrome浏览器
chrome浏览器

5. 在手机上预览本地网站。
这时候可以看到手机端的inspect cc 已经可以预览chrome浏览器的网页了,但是在chrome地址栏里输入本地主机的地址,却没办法预览本地的网站。
因为还需要code cc里面配置调试本地网站。在code cc 里面菜单栏File/Open Folder ,打开本地网站。最后点击快捷菜单键最上面的调试键(闪电样式)。
闪电
闪电

然后,当我们再回到手机端inspect cc 里查看的时候,可以看到已经变成本地站点的页面了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容