Browser/Server结构主要是利用了不断成熟的Web浏览器技术:结合浏览器的多种脚本语言和ActiveX技术,用通用浏览器实现原来需要复杂专用软件才能实现的强大功能,同时节约了开发成本。
B/S最大的优点就是可以在任何地方进行操作而不用安装任何专门的软件,只要有一台能上网的电脑就能使用,客户端零安装、零维护。系统的扩展非常容易。

大家在测试过程中经常会遇到例如首次部署后网页无法打开或者样式无法加载等问题,本文给大家简单介绍一点网络问题排查方面的知识。

【HTTP协议及连接的建立】

HTTP( Hyper Text Transfer Protocol超文本传输协议的缩写)是一个客户端和服务器端请求和应答的标准(TCP)。HTTP协议通常承载于TCP协议之上,有时也承载于TLS或SSL协议层之上,这个时候,就成了我们常说的HTTPS。
如下图:

▲一次HTTP操作称为一个事务,其工作过程可分为四步:
1. 首先客户机与服务器需要建立连接。只要单击某个超级链接,HTTP的工作就开始了。
2. 建立连接后,客户机发送一个请求给服务器,请求方式的格式为:统一资源标识符(URL)、协议版本号,后边是MIME信息包括请求修饰符、客户机信息和可能的内容。
3. 服务器接到请求后,给予相应的响应信息,其格式为一个状态行,包括信息的协议版本号、一个成功或错误的代码,后边是MIME信息包括服务器信息、实体信息和可能的内容。
4. 客户端接收服务器所返回的信息通过浏览器显示在用户的显示屏上,然后客户机与服务器断开连接。

▲HTTP连接的建立又可分为如下步骤:
1) 浏览器分析链接的URL
2) 系统查找HOSTS文件,有则根据文件内容获取服务器ip,转到第5步
3) 浏览器向DNS请求解析该URL的ip
4) 域名系统DNS解析出该URL的ip地址为xxx
5) 浏览器与服务器 建立TCP连接 (服务器ip地址是xxx,端口是80)
6) 浏览器发出取文件命令
7) 服务器给出响应,把文件发送给浏览器
8) 释放TCP连接
9) 浏览器显示文本

【页面无法打开问题排查】

页面无法打开这类问题在系统初次部署时经常遇到,我们可以根据上节所介绍的HTTP建立连接的步骤逐步进行排查。

例如某项目打开页面展示如下:

1. URL链接

首先,需要确认URL地址正确。一个完整的URL请求一般包括基本URL包含模式(或称协议)、服务器名称(或IP地址)、路径和文件名。

如某URL地址为http://www.hello.com/demo/helloworld.htm,其中http表示使用的是http协议,www.hello.com为服务器名称,/demo为相对路径,hello.htm为请求的文件名。确认该url地址请求的文件是否存在,我们就可以在工程目录中查找hellworld.htm(或helloworld.vm)文件,看该文件是否存在。

▲实际问题排查
我们在菜单”交易大厅”链接上,点击右键,查看属性如下图:

图中URL指出,这个菜单访问的URL地址为

http://xxxxx.xxxx.xx/delegate//delegate/listing/index_hall.htm

xxxxx.xxxx.xx/delegate为该系统固定域名,delegate/listing/index_hall.htm为文件相对位置。然后,在工程目录下查找该文件。

图中展示文件名与该文件相对位置匹配,可以排除无法访问是由于URL地址中文件不存在导致。

2. HOSTS文件
浏览器在解析URL之后,就会根据URL中的服务器名称建立链接。例如上文的www.hello.com这个服务器名称,浏览器是怎样解析成一个ip地址从而建立链接的呢?
操作系统规定,在进行DNS请求以前,先检查系自己的Hosts文件中是否有这个域名和IP的映射关系。如果有,则直接访问这个IP地址指定的网络位置,如果没有,再向已知的DNS服务器提出域名解析请求。DNS服务器中保存有该网络中所有主机的域名和对应IP地址,并并具有将域名转换为IP地址功能。
所以我们排查的第二个节点就是本机的HOSTS文件。
在Windows NT/2000/XP/Vista/7/8(即微软NT系列操作系统)中,HOSTS文件默认位置为%SystemRoot%\system32\drivers\etc\;在Linux及其他类Unix操作系统中HOSTS文件默认位置为/etc。
HOSTS文件内容格式为:IP+空格+域名,域名可以有多个,中间以空格分隔。需要注意相同域名以首次出现映射规则为准。文件修改保存后生效,但是由于各浏览器存在缓存,所以不一定立即生效。一般重启浏览器后,可以正确跳转。

▲ 实际问题排查
我们测试的程序部署在内网环境,需要进行HOSTS。检查本地HOSTS文件,相关配置如下:


图中标明域名xxxxx.xxxx.xx已映射到IP地址xx.xx.xx.xx.我们再通过命令行进行检查:

可以排除HOSTS文件配置不正确或网络存在问题导致页面无法打开。

3. 网络
如果在上一步最后检查时,提示请求超时,有可能是本机与服务器之间存在网络问题。我们排查的第三个节点就是网络是否正常。
首先,需要排除是否本机与服务器不在同一个网络环境,比如一个在内网,一个在公网这种情况。
另外,可能是服务器IP地址发生了变化。查看服务器IP可在命令行下使用ipconfig(linux为ifconfig,需root用户),如果发现IP发生变化,需要检查IP是否为静态IP。

最后,需要检查防火墙是否关闭或配置是否正确。

4. 监听端口
在排除了网络问题后,我们的URL请求就已经到达了服务器进行处理,下一个排查的节点就是服务是否存在以及端口是否正确打开。
如果服务启动时,提示Socket bind failed:[XXXX],则通常为XXXX端口正在被占用。查看该端口被哪个进程占用,可以在服务器上输入netstat –anp|grep 端口号(windows为在命令行中输入netstat –ano|find “端口号”),如图2、图3

图2

图3

红框内为实际占用程序pid,LISTEN/LISTENING表示为监听端口。获取到pid后,可以考虑关闭该进程或者修改服务使用端口。

▲实际问题排查
我们到55.82服务器上对进程所对应的端口,现在已知应用占用的端口是28080,输入netstat –anp|grep 28080:

得到进程PID为4580,再查看4580进程:

得到进程PID为4580,再查看4580进程:

进程与需要连接的服务匹配,可以排除端口占用导致页面无法打开。

5. 其他
经过上面一系列的排查发现好像各个环节都是正常的,那还有哪些问题可以会导致页面无法打开?
上一步排查过程中,我们可以发现该tomcat使用的端口为28080,在实际访问的URL(http://trade.cfae.cn/delegate//delegate/listing/index_hall.htm)中,我们没有看到指定访问端口为28080的相关内容,这也许就是问题的原因。
在HTTP链接中,如果访问时没有指定访问端口,则通过80端口进行链接,那么整个部署中,肯定存在某个环节将发送到80端口的请求转发到28080端口。因此,下一步我们就来检查下Apache配置,看是否是使用了反向代理机制进行转发并导致页面无法打开。

▲实际问题排查
在55.82服务器上,打开/etc/httpd/conf/httpd.conf文件,发现有如下配置:

这段配置,说明Apache会根据http://xxxxx.xxxx.xx/delegate 中的/delegate的请求转发到xxxxx.xxxx.xx。前面已经说过,xxxxx.xxxx.xx是内网的域名,那么服务器进行请求时,同样要在HOSTS文件中进行配置,那再检查下服务器上的HOSTS文件:

服务器上并没有进行HOSTS配置。下面我们可以通过修改Apache配置或者修改HOSTS文件进行处理。修改Apache配置可以将配置段中xxxxx.xxxx.xx替换为127.0.0.1,保存后重启httpd服务;修改HOSTS文件可以添加127.0.0.1xxxxx.xxxx.xx后保存。

在这里,采用了第二种方法:

然后再进行访问,页面成功打开。

【开发人员工具的使用】

在高版本的IE浏览器中,集成了开发人员工具(F12)。这个工具,可以协助我们进行一些问题的排查。
1. 页面内容长时间无法加载
有一次,某个部署在内网的项目因需要,映射到了外网,但是映射的时候采用的是端口转换的方式,也就是应用实际使用的端口是9040,映射到外网使用的端口是9433。映射之后,发现页面可以打开,但是打开非常缓慢,而且大部分元素、样式等无法显示。
遇到这种情况,我们可以通过开发人员工具中的网络分析进行查看。低版本IE可通过安装HttpWatch插件查看。
按F12打开开发人员工具,选择网络,点击启用网络流量获取。输入域名后回车,此时下面会显示浏览器与服务器之间的数据交互。

如下图:

图中可以看出,大量请求结果显示为已挂起,再检查下这些请求的URL地址,发现请求的端口是内网的端口号,所以导致这些样式无法展示。如果程序是通过配置方式定义的端口号,修改下相应配置,再重启进程就可以避免这种情况。

2. 网页前台校验规则查看
通常,在测试一些页面时,前台会对输入项的内容进行校验,比如注册页面的联系方式、邮箱、地址长度等。我们可以使用开发人员工具,可以方便快捷的查看某些元素的校验规则,从而快速的查找出校验规则是否存在问题。
比如输入框的长度限制,打开开发人员工具,选中DOM资源管理器,通过选择输入元素,对前台输入校验进行检查。

如下图:

可以看到这里对项目名称进行了最大输入长度的限制为40,再根据数据库中相应字段的长度,就能够判断出是否可能存在问题。

再例如检查手机号码的校验

如下图:

图中看到对手机号码校验规则是'^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(14[0-9]{1}))+\\d{8})$'。

当然有是否这些校验是写在script里面,也有时候是在后台校验。

【总结】

B/S架构的项目在首次部署完成后,经常会遇到由于配置问题导致的页面无法打开。遇到这种情况后,大家首先要对HTTP链接及URL访问有一个比较完整的认识。然后,根据项目实际情况梳理出网络拓扑,并对关键节点一一排查。最终,找到导致页面无法打开的真正原因。
在实际的测试过程中,大家也可以多尝试使用下IE浏览器集成的开发人员工具(一些浏览器也有相应功能,如火狐浏览器),有助于提高测试效率,特别是针对一些页面校验问题。

转自:http://rdc.hundsun.com/portal/article/652.html?from=KFZTT&hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

WEB网络问题的排查【转】的更多相关文章

  1. linux 的IP配置和网络问题的排查

    1.6  IP的配制, 首先要会用: ifconfig  和加相关参数如: ifconfig -a, 来查看,自己的电脑网络配制. 再次就必需要知道,默认IP配制文件的地方: cd /etc/sysc ...

  2. Web网络服务介绍

    Web网络服务也叫WWW(World Wide Web),一般是指能够让用户通过浏览器访问到互联网中文档资源服务.目前提供WEB网络服务的程序有Apache .Nginx 和  IIS  等等,Web ...

  3. 百度地图、ECharts整合HT for Web网络拓扑图应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  4. ECharts+BaiduMap+HT for Web网络拓扑图应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  5. web网络协议

    一.OSI七层模型   OSI参考模型是国际标准化组织ISO(International Standards Organization )制定的模型,把计算机与计算机之间的通信分成七个互相连接的协议层 ...

  6. Java普通编程和Web网络编程准备工作

    一.工具下载 链接:https://pan.baidu.com/s/1geOdq3h 密码:pzl5 二.Java普通编程 解压下载的资料,并按readme.txt安装jdk和Eclipse. 三.J ...

  7. Fiddler抓取Intellij Idea中执行的web网络请求

    首先可以打开命令行 输入:ipconfig 找到本机配置的IP地址 这里是: 192.168.97.122 或者打开Fiddler 点击如下图片中的小三角符号:将鼠标放在online的位置,也可以看到 ...

  8. elasticserch-hadoop spak 网络配置异常排查

    elasticserch hadoop 在本地测试写入 elasticsearch:9200时成功 线上环境却报错如下 org.elasticsearch.hadoop.EsHadoopIllegal ...

  9. web网络漏洞扫描器编写

    这两天看了很多web漏洞扫描器编写的文章,比如W12scan以及其前身W8scan,还有猪猪侠的自动化攻击背景下的过去.现在与未来,以及网上很多优秀的扫描器和博客,除了之前写了一部分的静湖ABC段扫描 ...

随机推荐

  1. Objective-C:Objective-C:文件中一些对目录进行操作的函数

    IO文件中,一些对目录进行操作的函数:获取.切分.组合 一些对目录进行操作的函数: 获取用户的姓名:(NSString*)NSUserName() ;    ———>NSString *Str ...

  2. iOS开发-多线程简介

    多线程从概念上理解是指从软件或者硬件上实现多个线程并发执行的技术,简单点理解就是同一时间可以执行多个事情(比如说一边听歌一边码代码),听歌是一个线程,码代码是一个线程,如果是单核CPU的话,上面两个动 ...

  3. DIV焦点事件详解 --【focus和tabIndex】​

    添加 tabindex='-1' 属性: 默认:获取不到焦点事件(blur) 1 <div class="wl-product" id="wl-product&qu ...

  4. 2.Dynamic Programming on Stolen Values【dp】

    Problem: There are  n houses built in a line, each of which contains some value in it. A thief is go ...

  5. Linux Shell处理文本最常用的工具大盘点

    导读 本文将介绍Linux下使用Shell处理文本时最常用的工具:find.grep.xargs.sort.uniq.tr.cut.paste.wc.sed.awk:提供的例子和参数都是最常用和最为实 ...

  6. python数据库访问

    取得rs,使用,报错 sqlite3.Cursor' object has no attribute '__getitem__' 原因:使用时conn已经关闭了. 解决:用fetchall取出传递回来 ...

  7. netdata的安装与使用

    具体的netdata介绍请参照GIT:https://github.com/firehol/netdata/wiki 以下只介绍centos下的netdata的安装与使用: 1.安装Netdata需要 ...

  8. 压缩 MongoDB 的数据文件

    MongoDB采用了磁盘空间预分配的机制,为了避免磁盘碎片以及使用mmap后造成的近一步的内存碎片,但是随着数据的增删除改操作,数据文件不可避免的会产生空洞,造成磁盘空间和内存的浪费.本文说的是这方面 ...

  9. IOS遇到的问题总结

    1.NSString *path = [[NSBundle mainBundle] pathForResource:@"desc" ofType @"plist" ...

  10. STL - 容器 - vector简单应用

    VectorTest.cpp #include <vector> #include <iostream> #include <string> #include &l ...