站長分享前端2個(gè)調(diào)試技巧

同事分享的2個(gè)前端調(diào)試技巧，知道后極大的方便了B/S開發(fā)調(diào)試，本文只對谷歌瀏覽器進(jìn)行講解，其他瀏覽器用的不多。

1. 網(wǎng)頁刷新

常用的網(wǎng)頁刷新快捷方式：

F5：普通網(wǎng)頁刷新

F5刷新時(shí)大部分資源的狀態(tài)碼都是304，也就是重定向，大部分都是使用緩存資源。

Ctrl + F5：強(qiáng)制刷新

簡單的理解就是讓瀏覽器重新訪問網(wǎng)頁，就像第一次那樣，一切都是全新呈現(xiàn)，打開速度也會稍慢一些。

Ctrl+F5刷新時(shí)所有資源狀態(tài)碼都是200，都是重新從服務(wù)器下載了資源。這實(shí)際上是瀏覽器的“智能化”表現(xiàn)，為了盡可能提高網(wǎng)頁打開速度，減少等待時(shí)間，瀏覽器會自動(dòng)緩存網(wǎng)頁靜態(tài)資源以備再次使用，如圖片、樣式、腳本等文件。

什么情況下需要使用Ctrl+F5刷新網(wǎng)頁？

網(wǎng)頁修改過圖片、樣式、腳本等靜態(tài)文件后，F(xiàn)5普通刷新看不到實(shí)時(shí)效果，經(jīng)常折騰前端修改的朋友很有必要掌握此技能，做為一種習(xí)慣也不會錯(cuò)。另外，每次修改網(wǎng)頁前端代碼時(shí)，為靜態(tài)文件加載語句加上不同版本號參數(shù)，如src="main.js?t=201903182557"這樣，也能避免緩存情況。

順便科普一下，網(wǎng)站使用第三方CDN加速時(shí)，采用的是網(wǎng)絡(luò)節(jié)點(diǎn)緩存技術(shù)，這種情況使用Ctrl+F5刷新網(wǎng)頁無法更新網(wǎng)絡(luò)節(jié)點(diǎn)上的緩存文件，更新緩存文件需要在加速平臺進(jìn)行操作。

本節(jié)重點(diǎn)來啦

有些網(wǎng)頁，使用Ctrl + F5強(qiáng)制刷新并不能真正的起作用，站長推薦：打開需要刷新的網(wǎng)頁，F12調(diào)出調(diào)試界面，鼠標(biāo)焦點(diǎn)放在瀏覽器地址欄左側(cè)刷新按鈕，鼠標(biāo)右鍵彈出刷新菜單，點(diǎn)擊清空緩存并硬性重新加載菜單即可，記住按F12哦，正常情況是刷新按鈕是無法彈出菜單的。

2. 登錄一個(gè)網(wǎng)站后，想注銷換個(gè)賬號登錄，發(fā)現(xiàn)沒有注銷入口...

正常情況下一個(gè)網(wǎng)站即有登錄入口也有注銷入口，但也有例外，如果你正在開發(fā)一個(gè)網(wǎng)站，注銷功能還未實(shí)現(xiàn)，想調(diào)試功能權(quán)限....

想換個(gè)其他角色的賬號，只能使用手動(dòng)輸入登錄URL地址的方式嗎？

其實(shí)不然，還是和第1個(gè)技巧一樣，按下F12，刪除登錄的token，再刷新網(wǎng)頁即可。

3. Over

以上只是平時(shí)開發(fā)時(shí)站長使用的技巧，相信有人沒用過，對專業(yè)前端小伙伴這多半是小case了，你還有其他什么技巧嗎？歡迎下方留言分享。

參考文章：

• 使用神奇的Ctrl+F5按鍵刷新網(wǎng)頁的好處