Chrome谷歌瀏覽器調試技巧小結

1、切換開發者工具的位置（上下左右）

ctrl + shift + D 默承認以將F12呼喚出來的DevTools開發者調試工具切換右邊與底部
但 若是你將它經過鼠標（下圖）

切換過位置 （默認是 右邊和底部） 你如今切換位置到左邊 那麼使用這個快捷鍵以後
就是 從左邊切到右邊/以前的位置

2、切換F12工具面板菜單以及頁面窗口

按下 ctrl + [ 和 ctrl + ] 能夠從當前面板的分別向左和向右切換面板
按下 ctrl + 1 到 ``ctrl + 9能夠直接轉到編號1...9的面板 前提是 開啓了 開發者工具（F12） 否則就是切換頁面窗口了

3、打印

Ctrl + p 調節出打印面板 Esc 取消 前提是 不開啓 開發者工具（F12） 否則就是 打開面板後的功能了

4、截屏

F12(ctrl + shift + i) 打開DevTools開發者調試面板 按ctrl + shift + p 
以後出現 以下圖

再輸入 Capture full size screenshot 就能夠截這個頁面的整個圖了（若是頁面長就是長圖）

五、切換主題

F12(ctrl + shift + i) 打開DevTools開發者調試面板 按ctrl + shift + p 
以後 輸入 theme 切換到 暗黑 在切一次 就是明亮

六、在瀏覽器中你的運行腳本

進入到 Sources 面板，在導航欄裏選中 Snippets 這欄，點擊 New snippet(新建一個代碼塊) ，而後輸入你的代碼以後保存，大功告成！如今你能夠經過右擊菜單或者快捷鍵： [ctrl] + [enter] 來運行它了

 

 

七、console打印操做

控制檯 keys(console)
能夠打印出console的全部方法屬性

Console.log() 最普通的操做

Console.error(12) 用紅色且帶感嘆號的形式打印出信息

console.table() 打印出鍵值對的表格

let demo = [
    {name:'齊軒',sex:'男',age:27}
]
console.table(demo)  用表格的形式打印出信息

console.time() 打印出程序運行時間

console.time()  計算程序的運行時間
console.time('計時器');for (var i = 0; i < 1000; i++) {
      for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('計時器');

console.log() 打印出 帶顏色的信息

 console控制檯輸出內容換行和變色
 console.log("請將簡歷發送至 %c ps_recruiter@baidu.com","color:red")

console.log("一張網頁，要經歷怎樣的過程，才能抵達用戶面前？\n一位新人，要經歷怎樣的成長，才能站在技術之巔？\n探尋這裏的祕密；\n體驗這裏的挑戰；\n成爲這裏的主人；\n加入百度，加入網頁搜索，你，能夠影響世界。\n")

八、Html元素調試

按一下 'h' 就能夠隱藏你在元素面板中選擇的元素。再次按下 'h' 可使它出現。某些的時候這頗有用：例如你想截圖，但你想去掉裏面的敏感信息。

當你想看看頁面的某一部分在 DOM 樹的不一樣位置的顯示效果時，只須要拖動放置它(到指定的位置)，就像在機器上的其餘任何地方同樣 :-)

若是你只是想移動你當前選中的元素，在 DOM 結構中往上挪一點或者往下挪一點，而不是拖動和放置，你一樣可使用[ctrl] + [⬆] / [ctrl] + [⬇] ([⌘] + [⬆] / [⌘] + [⬇] on Mac).

九、其餘面板調起console面板

直接ESC 進行切換

ctrl+加號放大console面板的字體 減少相反+減號

F1設置（在F12的狀況下打開） 裏面 能夠禁用緩存 Disable cache (while DevTools is open) 

notwork 網絡面板

application 程序應用

sources 源碼