美文网首页
HTML5 APP开发之浏览器调试页面

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

作者: 03ngnntds | 来源:发表于2019-04-26 10:36 被阅读0次

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

运行HBuilder软件,然后,打开APP项目,接着,双击需要调试的页面。(如果不知如何创建HTML5 APP项目,请查看《HTML5 APP开发之创建APP项目》章节。

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

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

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

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

确定效果没有问题后,关闭浏览器。返回到软件原来的页面上,进行最后的修改。

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

文章来源:搜索引擎大全http://www.iis7.com/b/ssyqdq/

相关文章

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

    用HTML5开发APP,遇到的第一个问题,便是页面调试问题。总不可能开发一个页面,就打包软件,然后,在手机上安装查...

  • 混合APP开发MUI框架书目录

    MUI框架 HTML5 APP开发之创建APP项目 HTML5 APP开发之软件打包 HTML5 APP开发之全量...

  • 开启Android手机WebView调试:inspect+Ste

    前言 开发html5页面用浏览器的调试模式就非常的方便,在浏览器里按F12键就可以立即调试,找出布局的问题,deb...

  • 关于手机web页面的调试

    开发手机页面的调试 在开发手机页面时,由于手机浏览器通常没有开发者工具,应该如何来调试呢? 巧用window.al...

  • 8.如何调试

    一、浏览器调试 - 开发初期 项目开发初期,可以使用浏览器预览、快速查看页面UI效果。 或者开启Hbuider 变...

  • 关于使用IONIC开发移动端应用的分析

    微信里面应用页面的开发,本质上就是开发一个前端页面,而微信就相当于一个浏览器。 对于移动端HTML5页面的开发,随...

  • 移动端开发增加debug调试--vconsole

    公司开发的app是使用ionic开发的,在手机端开发调试的时候一些接口问题调试需要连接浏览器苹果手机使用safar...

  • HTML笔记

    HTML文档声明 HTML文档声明,告诉浏览器当前页面是HTML5页面,让浏览器用HTML5的标准去解析识别HTM...

  • app中用Safari对webview进行调试

    在app开发中,经常会用到webview页面,怎么能够在app内直接查看调试页面样式、请求头等进行联调?就要用Sa...

  • fiddler抓包工具

    前言: H5页面内嵌app的时候 ,出了bug ,调试的时候就需要抓包,需要把地址获取到,在浏览器打开 以便调试 ...

网友评论

      本文标题:HTML5 APP开发之浏览器调试页面

      本文链接:https://www.haomeiwen.com/subject/zpffnqtx.html