如何测试html5网页打开速度

方法/步骤

先去XAMPP官网下载适合自己的XAMPP版本，支持Mac、Windows、Linux。

自行百度XAMPP，到官网下载即可，链接贴不上来。

下载完成后，双击安装XAMPP到PC上，一路next即可，不懂英文也没事。

安装过程中，有一个路径的选择，建议把XAMPP的根目录，定义到D盘或者E盘等，默认是C盘的根目标下。

安装完成后，打开XAMPP，有一个Apache的功能，后面会有一个start，点击start等待3~5秒后即可，其他功能不需开启。

然后将在PC上制作的html5或手机页面文件夹，放到XAMPP文件夹中的htdocs文件夹中。

查看本机的局域网IP地址，如：192.168.1.100，然后手机连接到与PC同一个路由器中，在手机的浏览器中打开 IP/example(您的项目目录)/index.html 即可进行调试。

使用完毕，直接点XAMPP控制台中的Stop，关闭Apache服务即可。

您好，答题测试的H5作为不少商家活动的首选类型，需求自然就很大。大家需要知道的是，答题测试按功能层面又分为根据趣味测试、问卷调查两大类型。

趣味测试H5：根据得分获得不同结果，用户活动营销

问卷调查H5：统计答题人的选项/得分，用于数据收集

本期教程主要是向大家介绍一种简单的【趣味测试H5】的教程，教程里用到的主要的组件是 图片按钮组件、测试题组件 和 参数变量组件。希望学员们通过本篇教程都能掌握这几个组件使用方法并能独立制作出来。

测试题组件作用：与图片按钮组合完成用户选中时单选的状态

图片按钮组件作用：与测试题组件组合完成用户选中时单选的状态

参数变量组件作用：统计用户每题的得分并求和，可作不同得分显示不同元素的触发

1.第一页是一个输入用户姓名的页面，我们新建一个页面，添加高级组件-高级表单里的“输入框组件”，再添加一个全局变量和开始测试的图片按钮，将全局变量命名为“姓名变量”，调整类型为“文本”，图片按钮上设置点击时“设置参数值”和“跳转页面”，设置参数值为全局变量=输入框，跳转页面为下一页，；

注：第二页是答题页分为5个步骤讲解（2-6步）

2.第二页为答题页，我们在左侧页面面板处右击再新建一个空白页面，需要添加图片按钮，我们选中按钮的时候可以使用键盘上control+C+V的方式复制其余的三个按钮，点选图片按钮右侧面板上传替换自己的选中和未选中的图片；

3.图片按钮的初始状态和激活状态图片替换好后，我们在工具栏上的高级组件-交互组件下面添加测试题组件，接着我们可以添加“题目图片”和“确定按钮图片”到画布上；

4.我们点选左侧逻辑小面板的“测试题组件”，在右侧面板添加四个图片按钮为选项并设置为每个选项设置分值（比如选项C是对的，我们给选项C为1，其余设置为0），接着设置其中一个为“正确答案”，触发器上设置选择结束后触发“显示元素”，这里显示的是 下面那个“确定”图片元素（它需要初始隐藏，第六步有说明）；

5.我们点击左上角的页面层级，切换到 Masterpge 里，在上方工具栏高级组件-逻辑组件里面找到“参数变量”，选择添加到画布上，给这个变量命名为“总分”，并设置为等待触发，点击小“+”号，添加三个触发条件，我这里添加的是总分≤2，3≥总分≥4，总分≥5三个触发条件；

6.我们点击左上角的页面层级，切换到 页面 里，点选 “确定”图片元素，右侧面板勾选“初始隐藏”，触发器上设置点击“设置参数值”和“跳转页面”（注意顺序，跳转页面一定要在最后一步执行，上面的触发事件才不会失效），设置参数值和跳转页面的详细设置面板见下图；

7.我们按照第二步到第六步的方法，接着制作剩下的四个页面

8.新建一页作为结果页，我们把成绩单图片元素添加到画布上，接着添加一个段落文本组件，命名为姓名。在这页的页面触发器上设置切换到当前页时设置参数值和执行参数判断，把姓名的全局变量赋值给用来显示姓名的段落文本，执行参数判断上执行的是 Masterpage 上总分的判断；

9.测试题案例大体上做好了，我们可以预览下看看。

当然，这里只是一种思路。有的项目不同得分不同结果的视觉上相差很大，这样的话我们可以采用多个结果页，比如总分参数≤2时跳转结果1页面，3≤总分参数≤4跳转结果2页面，总分参数≥5时跳转跳转结果3页面这样的逻辑方式实现，另外，执行参数判断的触发也不应该在结果页触发，而是应该在上一页的“确定按钮”上去设置。

如有问题，也可到意派官网，加入交流群询问，希望对楼主有帮助。

1、打开手机web检查器。

通过【设置】>【Safari】>【高级】>【Web检查器】打开。见下图（点击查看大图），并且你会看到该选项下面对电脑 *** 作的相应描述，照做就好。

2、链接电脑（Mac）

2.1 先在手机Safari中打开你想调试的网页，并用数据线连接到电脑（我这里是Mac）

2.2 再在电脑上打开Safari点击【Develop】菜单，就会看到如下图所示（点击查看大图）：

2.3 点击2.2中的网站名就会在电脑上打开Safari的控制台，如下图（点击查看大图）：

3.调试网页

此时你可以查看手机网页的DOM结构，并且和电脑端网页调试无异，当鼠标滑过这些DOM节点的时候手机上的相应布局也会高亮起来，如下图（点击查看大图）：

---