不常见但是有用的 Chrome 调试技巧
生活随笔
收集整理的這篇文章主要介紹了
不常见但是有用的 Chrome 调试技巧
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
dom
添加選中dom節點為全局變量方便需要調試多個dom的場景
適用對dom有多次操作的場景
添加選中dom節點為全局變量.pngforce node state (觸發)狀態
調試dom的某個狀態
force 節點 state (觸發)狀態.pngcopy element
拷貝選中dom的信息
copy element.pngstyle/class
給選中元素添加一個 class 名
快速給元素添加class
給選中元素添加一個 class 名.png修改元素的盒模型大小
快速修改元素的盒模型大小(margin/padding/width/height等)
快速修改元素的盒模型大小.pngnetwork
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.pngjavascript
斷點,斷瀏覽器的行為(比如 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 调试技巧的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: ssh-keygen -t rsa执行后
- 下一篇: request用法_虚拟语气用法总结