HTML5 APP开发之浏览器调试页面

用HTML5开发APP,遇到的第一个问题,便是页面调试问题。总不可能开发一个页面,就打包软件,然后,在手机上安装查看效果吧(因为太花时间了)。 所以,为了解决HTML5页面的调试效率,通常有两种方案。第一种,采用chrome浏览器调试;第二种,采用伪发布方式调试。 本章节,将介绍如何采用chrome浏览器调试方案。

运行HBuilder软件,然后,打开APP项目,接着,双击需要调试的页面。(如果不知如何创建HTML5 APP项目,请查看《HTML5 APP开发之创建APP项目》章节。搜索引擎大全
在这里插入图片描述
在这里插入图片描述

点击菜单栏“运行”-“Chrome”选项,用浏览器打开页面。

在这里插入图片描述
打开页面后,按F12,进入调试模式。调试模式,分成三块:1、显示页面(可以调成手机屏幕大小);2、HTML5页面代码显示区;3、HTML5页面样式显示区。
在这里插入图片描述

到了第三步,就已经可以查看页面效果了。但是,如果发现样式不对或不美观,需要修改时。可直接在Chrome浏览器上修改,而不用回到软件修改后,再次运行。
在这里插入图片描述

修改完成后,点击回车,便可直接修改后的效果。

在这里插入图片描述
确定效果没有问题后,关闭浏览器。返回到软件原来的页面上,进行最后的修改。
在这里插入图片描述

在编写代码时,需要注意所写的样式是否对所有的浏览器都适用。

在这里插入图片描述

发布了20 篇原创文章 · 获赞 44 · 访问量 9万+

猜你喜欢

转载自blog.csdn.net/weixin_44400506/article/details/89532303