前端开发是相对比较灵活的。同一个功能，会有多种不同的方式来实现。在稍微大点的系统开发中，如果是多人参与，由于每个人的编码风格不同，所以就有可能会形成不同页面的写法“五花八门”的情况的出现。在系统运行过程中，由于某些未知因素，或者编码人员疏忽、经验的欠缺等等原因，出现问题也是很正常的事情。
问题的排查也是很有意思的事情。如果恰好出现问题的页面是自己写的，那排查会更容易，因为程序是你自己写的，哪哪都很了解，在着手排查之前就会有一个大概的判断。
本文总结一下，在不了解页面代码结构的情况下，排查问题的方式。
前端问题的排查，主要利用浏览器的开发者工具，可以在浏览器中右击，选择“检查”，或者按F12，如下图：
假如页面样式出现了问题，比如布局错乱，字体颜色、字号不对，再或者某个块过大、过小等，都可以通过浏览器的开发者工具来进行调试。
本例以凤凰网出现的横向滚动条为例来说明。
正常情况下，凤凰网的首页是没有横向滚动条的，但是当屏幕变窄的时候，就出现了，如下图：
这是页面设计的问题，我们可以定位到是“哪段代码”出现的问题。
在页面空白处右击，选择：“检查”，或者按“F12”，打开开发者调试工具，如下图：
在“元素（Elements）”视窗中，鼠标移动到某个div上方，在页面中就会有相应的显示（会有一个浅蓝色的背景），如图：
这样方便我们对页面元素进行定位。然后此时右边窗口就显示当前选定元素的css样式表：
通过右侧的css样式表，可以大概看出是什么问题。以上例子中我们看到是给选定的div设置了一个宽度，此宽度比body的宽度要大，所以出现了横向滚动条。可以通过编辑右侧的css样式表来实时查看页面变化，基于这个功能，可以快速的定位并解决问题。
js错误引起的页面问题
这种问题比较多，表现形式也是多种多样，也可以通过浏览器控制台来对问题进行定位。比如，我们有一个页面出现了空白，什么元素也没有，怎么办呢？还是打开浏览器控制台，看看是不是有什么js错误，如下图：
通过控制台可以很清晰的定位到是哪个文件、哪行代码出了问题。
此外，可以在开发阶段进行调试（或在代码中相应位置添加debugger，或在调试工具中设置断点调试），如下图：
后台服务类引起的问题
这种问题多是由于访问后台接口的时候报错引起的，如果在写页面的时候没有考虑到服务错误，而对异常数据进行处理，那么就有可能出现问题。这种情况下，首先需要定位出哪个服务出的问题，然后再到相应的页面代码中进行错误的处理。
如下图，在开发者工具中选择“网络”选项卡，可以看到页面中所有的请求，请求中选择“Fetch/XHR”类别，即服务请求，如下图：
其中红色字体的即为报错的服务，点开可以查看详细信息。
以上只列出了前端问题中的一部分，大家在开发过程中遇到什么问题有兴趣一起探讨的话可以留言。
