不常見(jiàn)但是有用的 Chrome 調(diào)試技巧
點(diǎn)擊上方 前端Q，關(guān)注公眾號(hào)
回復(fù)加群，加入前端Q技術(shù)交流群
來(lái)源：前端大全
dom
添加選中dom節(jié)點(diǎn)為全局變量方便需要調(diào)試多個(gè)dom的場(chǎng)景
適用對(duì)dom有多次操作的場(chǎng)景
force node state (觸發(fā))狀態(tài)
調(diào)試dom的某個(gè)狀態(tài)
copy element
拷貝選中dom的信息
style/class
給選中元素添加一個(gè) class 名
快速給元素添加class
修改元素的盒模型大小
快速修改元素的盒模型大小(margin/padding/width/height等)
network
block specific request
block特定的請(qǐng)求
快捷鍵：command + shift + p -> show request blocking
改變請(qǐng)求的 user agent
修改請(qǐng)求的user agent
快捷鍵：command + shift + p -> network conditions 切換 user agent
javascript
斷點(diǎn)，斷瀏覽器的行為(比如 click、mouse 等等)
攔截瀏覽器的行為
快速改變攔截的變量的值
雙擊改變攔截變量的值
添加 watch 表達(dá)式
添加watch表達(dá)式
條件斷點(diǎn)
設(shè)置斷點(diǎn)的條件
快速調(diào)試代碼片段
Snippet(片段)代碼調(diào)試，不需要?jiǎng)?chuàng)建特定的頁(yè)面
參考文檔
https://developer.chrome.com/docs/devtools/
內(nèi)推社群
我組建了一個(gè)氛圍特別好的騰訊內(nèi)推社群，如果你對(duì)加入騰訊感興趣的話（后續(xù)有計(jì)劃也可以），我們可以一起進(jìn)行面試相關(guān)的答疑、聊聊面試的故事、并且在你準(zhǔn)備好的時(shí)候隨時(shí)幫你內(nèi)推。下方加 winty 好友回復(fù)「面試」即可。
評(píng)論
圖片
表情