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

參考文檔

https://developer.chrome.com/docs/devtools/

IT技術分享社區

個人博客網站：https://programmerblog.xyz

文章推薦程序員效率：畫流程圖常用的工具程序員效率：整理常用的在線筆記軟件遠程辦公：常用的遠程協助軟件，你都知道嗎？51單片機程序下載、ISP及串口基礎知識硬件：斷路器、接觸器、繼電器基礎知識

總結

以上是生活随笔為你收集整理的不常见但是有用的 Chrome 调试技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。