Chrome谷歌瀏覽器除錯技巧小結

2022-03-25 02:27:41 字數 2317 閱讀 2776

ctrl + shift +d 預設可以將f12呼喚出來的devtools開發者除錯工具切換右邊與底部

但 如果你將它通過滑鼠(下圖)

切換過位置 (預設是 右邊和底部) 你現在切換位置到左邊 那麼使用這個快捷鍵之後

就是 從左邊切到右邊/之前的位置

按下 ctrl + [ 和 ctrl +] 可以從當前面板的分別向左和向右切換面板

按下 ctrl + 1 到 ``ctrl + 9可以直接轉到編號1...9的面板 前提是 開啟了 開發者工具(f12) 不然就是切換頁面視窗了

ctrl + p 調節出列印面板 esc 取消 前提是 不開啟 開發者工具(f12) 不然就是 開啟面板後的功能了

f12(ctrl + shift + i) 開啟devtools開發者除錯面板 按ctrl + shift +p 

之後出現 如下圖

再輸入capture full size screenshot 就可以截這個頁面的整個圖了(如果頁面長就是長圖)

f12(ctrl + shift + i) 開啟devtools開發者除錯面板 按ctrl + shift +p 

之後 輸入 theme 切換到 暗黑 在切一次 就是明亮

進入到 sources 面板,在導航欄裡選中 snippets 這欄,點選 new snippet(新建乙個**塊) ,然後輸入你的**之後儲存,大功告成!現在你可以通過右擊選單或者快捷鍵: [ctrl] + [enter] 來執行它了

控制台 keys(console)

可以列印出console的所有方法屬性

或者直接clear() 同樣可以清空

let demo =[

]console.table(demo) 用**的形式列印出資訊

console.time()  計算程式的執行時間

console.time('計時器');for (var i = 0; i < 1000; i++)

}console.timeend('計時器');

console控制台輸出內容換行和變色

console.log("請將簡歷傳送至 %c [email protected]","color:red")

按一下 'h' 就可以隱藏你在元素面板中選擇的元素。再次按下 'h'可以使它出現。某些的時候這很有用:例如你想截圖,但你想去掉裡面的敏感資訊。

當你想看看頁面的某一部分在 dom 樹的不同位置的顯示效果時,只需要拖動放置它(到指定的位置),就像在機器上的其他任何地方一樣 :-)

如果你只是想移動你當前選中的元素,在 dom 結構中往上挪一點或者往下挪一點,而不是拖動和放置,你同樣可以使用[ctrl] + [⬆] / [ctrl] + [⬇] ([⌘] + [⬆] / [⌘] + [⬇] on mac).

直接esc 進行切換

ctrl+加號放大console面板的字型 減小相反+減號

f1設定(在f12的情況下開啟) 裡面 可以禁用快取 disable cache (

while devtools is

open)

notwork 網路面板

sources 原始碼

chrome瀏覽器除錯

f8 下個斷點 f10 單步執行 f11 單步跳入 shift f11 單步跳出 選中變數,右鍵選擇add to watch,檢視變數值比較方便 有時候我們需要監聽某個 dom 被修改情況 js 比較複雜,找不到 對dom做的改變 那麼我們可以直接在 dom 上設定斷點。如圖所見,在元素審查的 el...

chrome瀏覽器有用的除錯技巧

chrome瀏覽器有用的除錯技巧 重新傳送xmlhttprequest 網路請求 有時候我們除錯網路請求的時候,這個請求需要我們點選頁面很多步驟才能重新傳送這個請求,現在通過下面這種方式,我們可以很方便的重新傳送請求啦 將控制台中的物件資料複製到剪貼簿中 在 chrome 瀏覽器中,有乙個名為cop...

ubuntu安裝chrome谷歌瀏覽器

1 首先到官方 上面的錯誤說的是,依賴關係沒有滿足,導致無法安裝chrome,所以,我們得先解決信賴關係,然後才能繼續安裝 chrome瀏覽器 3 解決信賴關係 繼續輸入sudo apt get f install,此時會將所有需要安裝的信賴關係列出來,並詢問你是否安裝,選擇y,然後系統便會自動安裝...