不常見但是有用的 Chrome 調試技巧
dom
添加選中dom節點為全局變量方便需要調試多個dom的場景
適用對dom有多次操作的場景
添加選中dom節點為全局變量.png
force node state (觸發)狀態
調試dom的某個狀態
force 節點 state (觸發)狀態.png
copy element
拷貝選中dom的信息
copy element.png
style/class
給選中元素添加一個 class 名
快速給元素添加class
給選中元素添加一個 class 名.png
修改元素的盒模型大小
快速修改元素的盒模型大小(margin/padding/width/height等)
快速修改元素的盒模型大小.png
network
block specific request
block特定的請求
快捷鍵:command + shift + p -> show request blocking
block 指定的請求.png
改變請求的 user agent
修改請求的user agent
快捷鍵:command + shift + p -> network conditions 切換 user agent
改變請求的 user agent.png
javascript
斷點,斷瀏覽器的行為(比如 click、mouse 等等)
攔截瀏覽器的行為
斷瀏覽器的行為(比如 click、mouse 等等).png
快速改變攔截的變量的值
雙擊改變攔截變量的值
雙擊改變攔截的變量的值.png
添加 watch 表達式
添加watch表達式
添加 watch 表達式.png
條件斷點
設置斷點的條件
條件斷點.png
快速調試代碼片段
Snippet(片段)代碼調試,不需要創建特定的頁面
片段代碼調試.png