chrome 調試技巧

chrome 調試技巧

• ctrl + shift + i 快速打開window的devtool
• ctrl + shift + d 快速切換視窗左右位置
• (ctrl + [) or (ctrl + ]) 實現切換面板
• ctrl + 1--9 也能實現跳轉直接數的面板，須要在setting 裏進行設置
• ctrl + shift + p 快速打開命名含一些隱藏的功能
• $$ === Array.from(document.querySelectorAll('div')) 快速選擇dom

調試樣式 --> 上下箭頭遞增遞減

• Alt + 上下箭頭 0.1
• 上下箭頭 1
• Shift + 上下箭頭 10
• Crtl + 上下箭頭 100

copy(data)

利用devtool 提供的copy 實現快速複製。

elements, logs, sources, network 面板下的查找

• 利用ctrl + f 來快速查找
• Aa 點擊能夠實現是否區分大小寫 來匹配

快速截屏

ctrl + shift + p 搜索 screen 下的Capture full size screenshot實現快速截屏。

快速切換黑、白主題

ctrl + shift + p 搜索 theme 相關的選項，實現明亮 & 暗黑兩種主題之間的切換

Dom 元素上的$0 & $1

• $0 是對咱們當前選中的html 節點的引用
• $1 是對上一次咱們選擇的節點的引用
• $2---$4. 更以前的了。

console 默認就被 async 包裹, 因此對異步來講能夠直接在console 中使用await

利用斷點來加日誌 Edit breakPoint 而後添加 .log .time .table

查看日誌的dom 屬性

console.log(li) 會直接渲染成element 元素，使用

• console.dir(li) 就能夠查看他的屬性等
• console.time() -- 開啓一個計時器
• console.timeEnd() -- 結束時間，並將結果打出
• console.log('%c牛逼','font-size: 20px; color: red;') 自定義樣式
• "眼睛" 符號, 定義任何JavaScript表達式

network 下從新發送 XHR 的請求

選中接口，選擇 Replay XHR 便可 從新請求

ccs3 box-shadow Shadow editor 陰影編輯器 sensors(傳感器)

引自小冊