Chrome開發者工具調試小技巧

目錄

• 1.Snippets
• 2.Ajax請求
• 3.打開調試工具面闆
• 4.複制樣式和選擇器
• 5.快速找到元素對應的樣式
• 6.快速調試樣式
• 7.隐藏一個元素
• 8.flex彈性盒布局的調試
• 9.快速定位DOM節點
• 10.檢視元素上的事件

1.Snippets

建立js代碼片段可以儲存在此處,并且可以執行

2.Ajax請求

過濾出所有的Ajax請求,并可重複發送

将此次Ajax請求複制為fetch請求

fetch("https://www.trip.com/mkt-pages-cookie/writecookie", {
	"credentials": "include",
	"headers": {
		"accept": "*/*",
		"accept-language": "zh-CN,zh;q=0.9,en;q=0.8",
		"content-type": "application/x-www-form-urlencoded",
		"sec-fetch-mode": "cors",
		"sec-fetch-site": "cross-site"
	},
	"referrer": "https://www.ctrip.com/?allianceid=1050724&sid=1786019",
	"referrerPolicy": "no-referrer-when-downgrade",
	"body": "Union=OUID%3D%26AllianceID%3D1050724%26SID%3D1786019%26SourceID%3D%26createtime%3D1632148623%26Expires%3D1632753422556&isSec=true&token=100013869",
	"method": "POST",
	"mode": "cors"
});
           

3.打開調試工具面闆

Ctrl + Shift + P

4.複制樣式和選擇器

5.快速找到元素對應的樣式

6.快速調試樣式

我們自己新建立的類會儲存在一個臨時檔案中,可以将此臨時檔案儲存到本地

加入自己的類樣式,删除元素既存的類樣式

7.隐藏一個元素

選中一個DOM元素,然後按下鍵盤上的

H

鍵

按下

H

鍵之後,元素消失,并且占用位置

調試工具多給添加了一個類

8.flex彈性盒布局的調試

flex布局之後,可以虛線的方式标記元素,并且可以快讀進行調試

顯示所有的flex布局,并快速定位到相應的DOM節點

9.快速定位DOM節點

在網頁中的某一個元素上,選擇檢查

Ctrl + F: 快速搜尋,支援選擇器或者XPath進行查找

下圖是按照類選擇器進行查找

10.檢視元素上的事件