前端面试题：页面出现空白，怎么排查定位问题？

Question

如何给出一个让面试官满意的答案？

Answer 1

1、先确保网络连接通畅。
2、查看网络url地址是否输入有误。
3、打开控制台查看报错信息。
4、查看接口访问是否有请求。
5、查看路由是否有path或者name的错误，导致加载了不存在的页面。
一般这几个步骤走完，基本能够定位问题了

Answer 2

这个问题很有意思，就经验来说，如果页面完全一片空白。极有可能是后端出现问题，并且禁用了错误输出。比如apache2，后端配置无错误输出，并且服务状态500，这个时候页面就是一片空白。
如果是前端导致的，那么极有可能是单页应用异常，因为普通的html输出，哪怕出了一些错误，也不太可能一片空白。
排查步骤如下：
1、打开能看到源码和request、response的浏览器，如chrome，查看源码输出，如果做不到，那么使用局域网数据监控软件查看页面输出。查看源码是否有异常，http状态等，本步骤用于检查具体是后端还是前端问题，还是网络问题。
2、如果是后端问题，那么后端查看accesslog、程序日志，看看是否有问题
3、如果是前端问题，那么根据给出的js异常之类的排查

这个是开放性问题，主要考察经验、解决问题的能力。

Answer 3

请注意，面试官想通过这个问题考察你思考问题的条理性，如果只凭过去经验积累或者网上看到别人给罗列的几种可能性随便举出几个，及格。 高分的人会将自己的思考过程讲给面试官，这时再讲每个过程需要用到工具，期望的结果。
最终面试的目的是找到一个会思考，能独立解决未来不确定问题的人。当然了，那些纯粹为了找“码农”的面试官不这么想，他们要的是老黄牛。 如果有机会，请尽量选择做了一个独立思考的人，去一个重视鼓励独立思考的公司。

Answer 4

应聘的就是一个干活的职位，面试不会太考你的想法，只想知道你到底会不会，有没有经验，不用想那么多，会啥就是啥；
白屏问题：

99%语法错误，f12打开，看看js有没有报错，看看页面上有没有元素，是不是被隐藏了；
0%网络不通,先刷新下试试，网络问题不会白屏，浏览器会告诉你网络不通；
1%服务器炸了，部分资源加载不进来，也是有可能的；

Answer 5

低头在脑子里模拟1分钟，然后抬头跟面试官说，白屏问题已经解决完了

Answer 6

我遇到一次是本地更新到线上，后端的地址忘记改了，导致验证不了白屏，还有就是网址指向的页面是不是有内容，看看是不是路由配置有问题，最重要的还是要打开调试浏览器调试看看程序有没有报错，报的什么错

Answer 7

这个时候当然是打开你的chrome console，打log直接看在dom元素上到底发生了什么。

Answer 8

我觉得一般这种情况先看下控制台是不是前端的错误导致的页面加载失败，如果有相关的错误的话，排查错误原因；如果完全没有错误信息的话，估计就得找后端开发者一起来排查一下问题了，是不是后端的配置或者后端错误导致的页面显示失败

Answer 9

1. 打开控制台查看静态资源是否加载失败（资源加载顺序也需关注下）
2. 打开控制台查看请求是否异常（网络状况也需关注下）

总之，打开控制台查看报错，见招拆招~

也可能是服务器模板指向错误...

Answer 10

平时遇到白屏的情况几乎都是第一次打开发现的，原来，又不小心路径写错了。

Answer 11

按照题干思考，这是CSS样式导致的留白问题，上面的老哥们都答错了。
然而我也没找到解决办法，死活出现一块空白。