1.控制檯中直接訪問頁面元素
在元素面板選擇一個元素,然後在控制檯輸入$0,就會在控制檯中得到剛纔選中的元素
反過來,在控制檯輸出的 DOM 元素上右鍵選擇 Reveal in Elements Panel 來直接在 DOM 樹種查看
2.訪問最近的控制檯結果
$_
3.選擇元素
$() - 返回滿足指定 CSS 規則的第一個元素，此方法爲 document.querySelector()的簡化。
4.使用 console.table
打印複雜信息時嘗試使用 console.table 來替代 console.log 會更加清晰。
打印json對象用這個挺好的
5.使用 console.dir,可簡寫爲 dir
console.dir(object)/dir(object) 命令可以列出參數 object 的所有對象屬性
6.複製 copy
比如先輸入location
Location {href: "https://juejin.im/post/5e0cb3ba5188253ab46da675#heading-6", ancestorOrigins: DOMStringList, origin: "https://juejin.im", protocol: "https:", replace: ƒ, …}
copy($_) 就是複製上一次訪問的控制檯結果，直接在剪切板裏面了
7.獲取對象鍵值 keys(object)/values(object)
8.清空控制檯歷史記錄
console.clear(); 或者手動, esc鍵：調出和關閉控制檯
9. debugger 斷點
有時候我們需要打斷點進行單步調試,一般會選擇在瀏覽器控制檯直接打斷點,但這樣還需要先去 Sources 裏面找到源碼,然後再找到需要打斷點的那行代碼,比較麻煩。
使用 debugger 關鍵詞,我們可以直接在源碼中定義斷點,方便很多。
10:截圖/切換主題色
F12之後,快捷鍵 ctrl+shift+p, 輸入命令screenshot/theme
11.複製 Fetch
在 Network 標籤下的所有的請求,都可以複製爲一個完整的 Fetch 請求的代碼。
12.重寫 Overrides
在 Chrome DevTools 上調試 css 或 JavaScript 時,修改的屬性值在重新刷新頁面時,所有的修改都會被重置。
如果你想把修改的值保存下來,刷新頁面的時候不會被重置,那就看看下面這個特性（Overrides）吧。Overrides 默認是關閉的,需要手動開啓,開啓的步驟如下。
開啓的操作:
打開 Chrome DevTools 的 Sources 標籤頁選擇 Overrides 子標籤選擇 + Select folder for overrides,來爲 Overrides 設置一個保存重寫屬性的目錄,這時在瀏覽器的頁面上會彈一個東西，你允許就行了，之後修改完,ctrl+s就會保存在本地
注：修改css樣式後，確實刷新後不會重置！！！
注：小技巧，在console下輸入document.body.contentEditable='true' , 整個頁面隨便你編輯，還有一個document.designMode='on'; 也是可以做到的(只能改文本)，可以隨意的拖拽，刪除
但重寫 Overrides對這個好像是沒有效果的，但你應該可以保存整個html下下來,
13.滾動到視圖區域 Scroll into view
查看Element時，有時不知道對應頁面的哪裏，這時Scroll into view，就可以找到頁面對應的位置
14.Source--> snippets(片段)
在這裏可以寫js代碼片段，相對於一個編輯器一樣
注: console下面也可以寫js片段,但是不太方便
15.事件監聽斷點（比如點擊事件）
選中一個元素，然後Source --> Event Listener Breakpoints --> 鼠標斷點
參考：
https://juejin.im/post/5e0cb3ba5188253ab46da675#heading-6
https://www.jb51.net/article/147438.htm