作為一個(gè)前端開(kāi)發(fā)者，我們每時(shí)每刻都跟瀏覽器打交道，在開(kāi)發(fā)的過(guò)程中，我們需要不斷的在瀏覽器中查看編寫(xiě)的成果，合理使用瀏覽器的控制臺(tái)功能，將有助我們快速開(kāi)發(fā)，節(jié)約時(shí)間以獲得 Work Life Balance 的體驗(yàn)。下面我們提一下幾點(diǎn)調(diào)試的技巧。

小技巧的快捷鍵，僅基于 mac 上的谷歌瀏覽器進(jìn)行介紹，其他平臺(tái)的系統(tǒng)大同小異

截圖反饋

在與設(shè)計(jì)同學(xué)，產(chǎn)品同學(xué)，測(cè)試同學(xué)，開(kāi)發(fā)同學(xué)等等對(duì)接的時(shí)候，有時(shí)候你需要對(duì)產(chǎn)品發(fā)送截圖信息，你是不是還在使用某微自帶的截圖功能，或者下載專門(mén)的截圖軟件進(jìn)行截取呢？

我們可以拋棄工具，直接使用瀏覽器自定的功能。

打開(kāi)控制臺(tái)，然后按選 command + shift + p，你就可以看到輸入面板，輸入 command 關(guān)鍵字，你可以看到下面的需要截圖的方式。

調(diào)試接口數(shù)據(jù)

在跟后端同學(xué)聯(lián)調(diào)的時(shí)候，你是否還在用 console.log 和 return 來(lái)查看你接口傳遞的數(shù)據(jù)呢？我們可以通過(guò)網(wǎng)絡(luò)的接口進(jìn)行驗(yàn)證。

打開(kāi)控制臺(tái)，選中 Network 的面板，勾選網(wǎng)絡(luò)為 offline 狀態(tài)，然后你就可以發(fā)起請(qǐng)求，而不必?fù)?dān)心觸發(fā)接口更改了。這里我以 點(diǎn)贊 接口為例：

保留接口請(qǐng)求

在頁(yè)面切換的時(shí)候，下一個(gè)頁(yè)面的數(shù)據(jù)依賴上一個(gè)頁(yè)面的接口的數(shù)據(jù)，這個(gè)時(shí)候，我們需要查看上一個(gè)頁(yè)面的接口的，瀏覽器默認(rèn)是移除的，我們可以開(kāi)啟 Preserve log 模式。

postman 演示接口

在調(diào)試接口的時(shí)候，我們已經(jīng)登陸了系統(tǒng)，然后你發(fā)現(xiàn)了錯(cuò)誤的接口內(nèi)容，然而你的協(xié)調(diào)者不再同一片區(qū)域辦公，你需要演示給他看。那么你會(huì)怎么做呢？錄制操作視頻，進(jìn)行講解展示？或者大量截圖，配合文字說(shuō)明呢？

我們大可不必像上面那樣。我們可以復(fù)制鏈接請(qǐng)求，如下我們鼠標(biāo)右擊，按照下面操作，復(fù)制了點(diǎn)贊的接口：

將復(fù)制到的信息，發(fā)送給協(xié)作者，他在 postman 上粘貼調(diào)試即可。復(fù)制的鏈接已經(jīng)是帶上了你的相關(guān)憑證，他可以站在你的角度體驗(yàn)問(wèn)題。這個(gè)小技巧筆者很是喜歡，yyds～

可別告訴我，后端開(kāi)發(fā)者沒(méi)安裝 postman 工具

其他的調(diào)試技巧相信大家還是蠻熟悉的，這里就不展開(kāi)說(shuō)了，比如 filter 的過(guò)濾，HTML 元素的定位修改，cache 的清除添加等。

【完】?