chrome的調試技巧速覽

強烈推薦谷歌瀏覽器調試技巧的小冊子，一毛錢。如下內容僅僅是根據內容總結速覽的，不推薦直接看~。
提及來，莫名看的很燃的感受，哈哈哈~

copy & saving

• 輸入copy(location)，而後粘貼在任意處，copy特別好用！
• 右擊控制檯輸出的信息，能夠保存爲全局變量
• 右擊控制檯的錯誤信息，能夠將信息導出到文件

經常使用快捷鍵

• command + shift + d切換控制檯的位置
• command + [能夠快速切換控制檯的各個面板
• option + ↑讓數值增長0.1，shift + ↑讓數值增長10，↑讓數值增長1
• 在elements面板裏，command+f支持選擇器查找，驚呆了。logs sources network也能夠查找

command面板

• 控制檯command + shift + p，對，相似vscode的快捷鍵，酷炫！
• 輸入screen能夠選擇對當前網頁full size所有截屏
• 輸入layout能夠將elements面板，豎直分割或者橫向分割
• 輸入theme能夠切換黑白模式
• 輸入time能夠顯示控制檯的打印數據的時間

代碼塊snippets的使用，快速在console執行某些代碼

• command + shift + p打開command面板
• 輸入snippet選擇建立代碼塊
• 刪掉>，輸入!，能夠選擇執行相應的代碼塊

console

• $('h1')能夠直接拿到h1，$$('h1')能夠將元素列表直接變成數組列表，沒有jquery照樣能用，炸裂

• 可直接使用await，輸入response = await fetch('https://jsonplaceholder.typicode.com/todos/1');json = await response.json()

• 輸入queryObjects(Vue)，會展現全部的vue實例，其餘類也是同樣的

• 輸入value=null;console.assert(value,'value是空的')，value是falsy值是就會打印後面的
• 輸入var a=1;var b=2;console.log({a,b});console.table({a,b})，就能將打印的值和變量對應
• 輸入console.table($$('li'),['textContent','className'])，打印json數組的時候，特別方便，第二個參數是隻想顯示的key。固然對象也是沒問題的~~~
• 輸入console.dir($('body'))，dir能夠輕鬆打印節點的具體信息
• 輸入console.time('for');console.timeEnd('for')能夠打印這兩行代碼執行的時間差，這個能夠很方便的測試好比for循環執行了多長時間
• 輸入console.log('%c須要輸出的信息','color:#f69')，%c加style樣式便可花樣log
• 輸入function log(message) { console.log(' '.repeat(new Error().stack.match(/\n/g).length - 2) + message ); };function a(){log('a');b()};function b(){log('b')};a()這時候log基於調用堆棧自動縮進
• console.log能夠直接在回調裏。

source面板的斷點

• 右擊斷點的行號，能夠編輯斷點的執行條件，讓斷點在某種狀況下才是斷點
• 上面的是爲這個功能服務的。既然每次在執行到斷點的時候都執行編輯條件，索性能夠在編輯條件這裏打印想要的東西。而後不要的時候在breakpoints那裏能夠清除掉全部的條件。好處是，不污染代碼，不再用手動註釋或者開始console代碼。

network面板

• 右擊請求在initiator能夠看到請求調用的堆棧
• 右擊Name能夠選擇看請求的哪些數據，好比添加method
• 右擊某條請求，能夠replay xhr從新發送請求

elements面板

• 選中某個節點，按h鍵顯示或隱藏該節點
• 選中某個節點，任意拖拽到任意的位置，視圖將直接變化
• 選中某個節點，按住command，在按上下鍵，也能夠快捷改變節點位置
• 選中某個節點，右擊edit html的時候可使用command+z撤銷
• 選中某個節點，右擊expand recuirsively能夠一次性展開全部子節點
• 選中某個節點，右擊break on能夠給節點打斷點，具體三種形式：子節點，當前節點，當前節點移除
• style裏box-shodow裏能夠直接打開陰影編輯器
• style裏animation的動畫效果，能夠直接編輯貝塞爾曲線
• style裏每一個元素的右下角有能快速編輯元素的color background-color text-shadow box-shadow
• 顏色面板能直接用吸色器，其餘玩法炸裂

Drawer

• 通常只有一個控制檯面板，可是你也能夠像抽屜同樣打開不少控制檯面板，不一樣的控制檯面板顯示不一樣的tab，在必定狀況哎也是很方便調試的。command+ shift+p輸入drawer，選擇玩法
• 能夠模擬你在任何位置！command+ shift+p輸入drawer，選擇sensor就能夠輸入虛擬的位置。選定的值將被 navigator.geolocation.watchPosition（或 .getCurrentPosition ）報告。
• 能夠模擬網速和ua！command+ shift+p輸入drawer，選擇network就能夠隨意了
• 能夠快速看源碼！command+ shift+p輸入drawer，選擇quick source就能夠隨意了
• 能夠快速看多餘的代碼！command+ shift+p輸入drawer，選擇coverage，點擊小圓點開始，而後點擊具體的文件就看到紅色和綠色區域了
• 能夠快速比較修改先後的樣式！command+ shift+p輸入drawer，選擇change

workspace

• 就看懂丟文件了，哈哈哈