Web前端页面的浏览器兼容性测试心得(一)搭建测试用本地静态服务器
自从实习以来,我体验了由一个人编程再到多人协作编程的转换。同时也接触了很多新鲜事物,学到了很多东西。工作时,常常需要多个人协同测试一张H5页面(PC、手机、平板等跨设备测试),也会经常把页面给PM或老板看。这种情况下,把网页上传到公司服务器的测试目录是个可行的办法。然而这不是最好的办法,因为前端开发人员往往没有公司服务器的操作权限,每次更改一处都要让别人上传,这肯定很麻烦。这时,在自己机器上开一个在局域网内可访问的本地服务器是最方便的做法。每次修改页面之后,把页面拖到本地服务器的目录下,其他人访问你电脑的IP地址即可预览和测试页面。
那么应该选用什么样的技术方案?Apache和Tomcat是可行的,但在Windows系统下,如果不熟悉这两种服务器的配置方法,就会存在一定的学习成本。最后,我用了一个最简单的方法建立静态服务器——使用几乎每台Windows电脑上都有的IIS。既然用的是Windows系统,那么使用自带的IIS建服务器,无疑是最方便的了。
作为.NET全家桶成员,IIS经常和后端的ASP.NET结合起来建站,但在这里我们不需要配置ASP.NET。只用几个步骤,便可在电脑上开启IIS服务。
以下步骤以我电脑上的Win10系统为例,和Win8、Win7上的操作都是差不多的:
打开控制面板,进入“程序与功能”:
点击“启用或关闭Windows功能”:
参照图中红色圈出部分,勾选需要的组件。需注意:不能只勾选最上一级选项,必须从最底层选项开始勾选,直至所选组件全部显示为“√”,如图中所示。
点击“确定”按钮,Windows开始添加IIS功能,这会持续几分钟,然后就可以使用IIS功能了。
在开始菜单的“Windows管理工具”目录下,找到并打开“Internet Information Services(IIS)管理器”(建议把该快捷方式放到桌面或固定在开始菜单,以后打开会更方便)。
在界面左侧列表找到自己的主机那一项,右键,选择“添加网站”:
这时会弹出“添加网站”的窗口,我们先不要管它。我们打开命令提示符(cmd),输入“ipconfig”并回车,即可查看自己本机在当前局域网内的IP地址(注意是IPv4地址,而且以“192.168”开头)。
回到“添加网站”窗口,如下图所示填写网站名称、设置服务器根目录所在路径(根目录选在哪里看你喜好),并填入本机IP地址作为服务器的访问地址,点击确定。
这时,我们发现网站已经建立并启动了:
接下来我们进入刚刚设置好的服务器根目录下(我的是“C:\server-root”),在这里添加一个测试用的主页。新建一个文本文档,输入“OK!”并保存,把文件名改为“index.html”。
在浏览器中输入你本机的IP地址,看看主页是否成功显示:
你也可以在手机上输入这个地址测试一下,前提是手机和电脑连着同一个WIFI:
看来我们已经成功了!现在就可以把你做好的静态页面放进这个根目录,进行跨设备测试了。你也可以把链接发给其他同事,只要你们连着同一个WIFI,他们就可以访问到。
补充:有时候,你的电脑在局域网内的IP地址会变化,比如当你换了个WIFI,或者重启电脑重新接入WIFI等。如果发现IP地址变化导致原链接无法访问,可以用“ipconfig”命令再次获取当前IP地址,并更新服务器配置。更新配置的入口在管理器界面上的“绑定”:
点击“绑定”,弹出新窗口之后,再点击“编辑”就可以修改IP了。
不得不说,巨硬家的软件的特征之一就是傻瓜式操作,能大大提高工作效率。
在此基础上,在接下来的文章里,我会总结一下如何在高版本的Windows系统下搭建令人头痛的IE8测试环境。
Web前端页面的浏览器兼容性测试心得(一)搭建测试用本地静态服务器的更多相关文章
- Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境
如果你做的页面被老板或PM要求兼容IE8,你就值得同情了.IE8不支持HTML5,在2017年的前端界,开发者不涉及HTML5标准简直寸步难行.然而,有一个可怕的事实客观存在,那就是IE8是Win7系 ...
- Web前端页面的浏览器兼容性测试心得(三)总结一些IE8兼容问题的解决方案
由于IE8不支持HTML5,而它又是Win7的默认浏览器,我们即使讨厌它,在这几年却也拿它没办法. 最近做了个需要兼容IE8的项目,不可避免地用了HTML5+CSS3,甚至canvas和svg,做兼容 ...
- 【web前端开发】浏览器兼容性处理
1.居中问题div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto;2.高度问题两上下排列或嵌套的div,上面的div设置高度(height),如果div里的 ...
- 转:【web前端开发】浏览器兼容性处理大全
解决思路: ①.写代码的时候遵循W3C标准,按照最新稳定版本的IE或WebKit内核浏览器进行编码 ②.遇到部分无法全面解决浏览器兼容的时候,采取CSS的hack手段进行针对性微调.简单的说,CSS ...
- 【web前端开发】浏览器兼容性处理大全
1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果di ...
- web前端页面优化——个人见解
web前端页面优化,我们从JavaScript.css.html这3个方面说下,我的见解,希望大神们能有刚好优化方法,一起探讨. 一. 有关javascript方面 优化见解. 1. 首先举个例子: ...
- Web 前端页面性能监控指标
Web 前端页面性能监控指标 性能监控 / 性能指标 / 性能优化 白屏时间计算 FCP 白屏时间:从浏览器输入地址并回车后到页面开始有内容的时间: 首屏时间计算 FMP 首屏时间:从浏览器输入地址并 ...
- web前端页面项目经验总结
项目时间:2016年4月5日--4月9日项目名称:阿七果子园web前端页面项目内容: 1.HTML5+CSS+JavaScript(banner+timer)+JQuery(small_bann ...
- 基于.net EF6 MVC5+WEB Api 的Web系统框架总结(1)-Web前端页面
本 Web 系统框架基于C# EF6+MVC+WebApi的快速应用开发平台.本节主要介绍Web前端页面设计与实现.Web前端页面主要分为普通列表页面.树状导航列表页面.普通编辑页面.数据导入页面.向 ...
随机推荐
- sqlserver 安全
1.将数据库的用户名和密码加密保存,使用加密传输.2.将数据库里面的用户除了这个用户所有的用户都禁用,把该用户的密码改的很复杂,很难破解那种3.设置数据库的可连接方式(所有的方式的设置).4.删除数据 ...
- 【已解决】Android ADT中增大AVD内存后无法启动:emulator failed to allocate memory
[已解决]Android ADT中增大AVD内存后无法启动:emulator failed to allocate memory 结论是: 当前有个bug: 默认是通过 hw.ramSize=1024 ...
- Linux上查看和修改字符集
author :headsen chen date: 2018-05-14 16:20:30 一·查看字符集 字符集在系统中体现形式是一个环境变量,看当前终端使用字符集的有以下几种方式: 1: 1 ...
- go练习1-翻转字符串
//翻转字符串 func T1_1() { str := "你好helloworld!" fmt.Println("翻转前", str) var ret str ...
- linux如何查看某个pid的进程?
Linux通过PID查看进程完整信息 [root@gsidc-4q-saas23 ~]# netstat -anp|grep 8282tcp 0 0 :::8282 :::* LISTEN 16923 ...
- 01.ZooKeeper安装和介绍
1.ZooKeeper安装和启动 1.下载解压ZooKeeper ZooKeeper官方地址:http://zookeeper.apache.org/ 下载当前稳定版本:zookeeper-3.4.6 ...
- 堪称神器的Windows软件推荐
更多软件使用技巧.破解软件以及硬件选购知识,欢迎加入我的QQ群(701974765)与我们交流!! 先贴上软件列表,详细描述后期更新,可自行百度 TrafficMonitor CPU.内存.网速资源监 ...
- SaltStack之编译安装LNMP环境
使用saltstack编译安装LNMP环境 一,系统版本查看 二,安装salt-master和salt-minion 安装配置过程参考SaltStack概述及安装 三,修改配置文件 /etc/salt ...
- DHCP服务原理
DHCP 工作原理 一.什么是DHCP? DHCP,动态主机配置协议,前身是BOOTP协议,是一个局域网的网络协议,使用UDP协议工作,常用的2个端口:67(DHCP server),68(DHCP ...
- lightoj1132—Summing up Powers (取膜技巧&&组合数应用)
题目链接:https://vjudge.net/problem/LightOJ-1132 题目意思:(1K + 2K + 3K + ... + NK) % 232 矩阵快速幂的题目一般都很短,这道题也 ...