前端面試題：頁面出現(xiàn)空白，怎么排查定位問題？

1. 打開控制臺(tái)查看靜態(tài)資源是否加載失?。ㄙY源加載順序也需關(guān)注下）
2. 打開控制臺(tái)查看請(qǐng)求是否異常（網(wǎng)絡(luò)狀況也需關(guān)注下）

總之，打開控制臺(tái)查看報(bào)錯(cuò)，見招拆招~

也可能是服務(wù)器模板指向錯(cuò)誤...

1、先確保網(wǎng)絡(luò)連接通暢。
2、查看網(wǎng)絡(luò)url地址是否輸入有誤。
3、打開控制臺(tái)查看報(bào)錯(cuò)信息。
4、查看接口訪問是否有請(qǐng)求。
5、查看路由是否有path或者name的錯(cuò)誤，導(dǎo)致加載了不存在的頁面。
一般這幾個(gè)步驟走完，基本能夠定位問題了

低頭在腦子里模擬1分鐘，然后抬頭跟面試官說，白屏問題已經(jīng)解決完了

平時(shí)遇到白屏的情況幾乎都是第一次打開發(fā)現(xiàn)的，原來，又不小心路徑寫錯(cuò)了。

應(yīng)聘的就是一個(gè)干活的職位，面試不會(huì)太考你的想法，只想知道你到底會(huì)不會(huì)，有沒有經(jīng)驗(yàn)，不用想那么多，會(huì)啥就是啥；
白屏問題：

99%語法錯(cuò)誤，f12打開，看看js有沒有報(bào)錯(cuò)，看看頁面上有沒有元素，是不是被隱藏了；
0%網(wǎng)絡(luò)不通,先刷新下試試，網(wǎng)絡(luò)問題不會(huì)白屏，瀏覽器會(huì)告訴你網(wǎng)絡(luò)不通；
1%服務(wù)器炸了，部分資源加載不進(jìn)來，也是有可能的；

我覺得一般這種情況先看下控制臺(tái)是不是前端的錯(cuò)誤導(dǎo)致的頁面加載失敗，如果有相關(guān)的錯(cuò)誤的話，排查錯(cuò)誤原因；如果完全沒有錯(cuò)誤信息的話，估計(jì)就得找后端開發(fā)者一起來排查一下問題了，是不是后端的配置或者后端錯(cuò)誤導(dǎo)致的頁面顯示失敗

我遇到一次是本地更新到線上，后端的地址忘記改了，導(dǎo)致驗(yàn)證不了白屏，還有就是網(wǎng)址指向的頁面是不是有內(nèi)容，看看是不是路由配置有問題，最重要的還是要打開調(diào)試瀏覽器調(diào)試看看程序有沒有報(bào)錯(cuò)，報(bào)的什么錯(cuò)

請(qǐng)注意，面試官想通過這個(gè)問題考察你思考問題的條理性，如果只憑過去經(jīng)驗(yàn)積累或者網(wǎng)上看到別人給羅列的幾種可能性隨便舉出幾個(gè)，及格。 高分的人會(huì)將自己的思考過程講給面試官，這時(shí)再講每個(gè)過程需要用到工具，期望的結(jié)果。
最終面試的目的是找到一個(gè)會(huì)思考，能獨(dú)立解決未來不確定問題的人。當(dāng)然了，那些純粹為了找“碼農(nóng)”的面試官不這么想，他們要的是老黃牛。 如果有機(jī)會(huì)，請(qǐng)盡量選擇做了一個(gè)獨(dú)立思考的人，去一個(gè)重視鼓勵(lì)獨(dú)立思考的公司。

這個(gè)時(shí)候當(dāng)然是打開你的chrome console，打log直接看在dom元素上到底發(fā)生了什么。

這個(gè)問題很有意思，就經(jīng)驗(yàn)來說，如果頁面完全一片空白。極有可能是后端出現(xiàn)問題，并且禁用了錯(cuò)誤輸出。比如apache2，后端配置無錯(cuò)誤輸出，并且服務(wù)狀態(tài)500，這個(gè)時(shí)候頁面就是一片空白。
如果是前端導(dǎo)致的，那么極有可能是單頁應(yīng)用異常，因?yàn)槠胀ǖ膆tml輸出，哪怕出了一些錯(cuò)誤，也不太可能一片空白。
排查步驟如下：
1、打開能看到源碼和request、response的瀏覽器，如chrome，查看源碼輸出，如果做不到，那么使用局域網(wǎng)數(shù)據(jù)監(jiān)控軟件查看頁面輸出。查看源碼是否有異常，http狀態(tài)等，本步驟用于檢查具體是后端還是前端問題，還是網(wǎng)絡(luò)問題。
2、如果是后端問題，那么后端查看accesslog、程序日志，看看是否有問題
3、如果是前端問題，那么根據(jù)給出的js異常之類的排查

這個(gè)是開放性問題，主要考察經(jīng)驗(yàn)、解決問題的能力。