Chrome調試折騰記_(1)調試控制中心快捷鍵詳解!!!
阿新 • • 發佈:2017-08-30
相同 展示 移動 匹配 tails detail 快速 常用 不同 轉載:http://blog.csdn.net/crper/article/details/48098625
-
大多瀏覽器的調試功能的啟用快捷鍵都一致…按下F12;還是熟悉的味道;
或者直接
Ctrl> + Shift + J: 直接進入console面板
點擊第一張截圖圈圈那個進入,看到Shortcuts這個就是了….快捷鍵大全
快捷鍵大全
快捷鍵有這麽以下幾大類..且看我一一道來~~~註:All pane是全局快捷鍵
Console()
- Ctrl + L : 清除控制臺消息
- Tab : 自動完成通用常綴
- →: 接受建議
- Ctrl + U: 清除console的提示!!(實操查看源代碼!!)
- ↓ / ↑ :選中下一行/上一行
- Enter: 執行代碼或者命令
Debugger(調試面板)
- F8 or Ctrl + \: 暫停/繼續
- F10 or Ctrl + ‘: 單步執行
- F11 or Ctrl +;: 單步進入
- Shift + F11 or Ctrl + Shift+;: 單步退出
- Ctrl +./Ctrl+, : 上一幀/下一幀(譯為框架怪怪的)
- Ctrl +Shift+E: 被選中代碼在控制臺中打印出console信息(非常實用)
- Ctrl + Shift + A: 添加到debugger的watch裏面,可以關註你選中內容的變化
- Ctrl + B: 打斷點/取消斷點(很實用)
Text Editor(文本編輯器)
- Ctrl + Shift+P : 跳轉到某個成員(不知鳥用)
- Ctrl + Space: 自動完成
- Ctrl + G : 跳轉到某行
- Ctrl + Shift + E
- Alt + -: 跳轉到之前的編輯位置
- Alt + +: 跳轉到下一個編輯的位置
- Ctrl + /: 快捷鍵註釋
- Alt + ↑: 調整CSS度量單位,每次增加一個單元
- Alt + ↓: 調整CSS度量單位,每次減少一個單元
- Alt + PageUp: 調整CSS度量單位,每次**增加**10個單元
- Alt + PageDown: 調整CSS度量單位,每次**減少**10個單元
- Ctrl + D
- Ctrl + U: 軟撤銷
- Ctrl + M: 進入匹配的括號
- Alt + W: 關閉編輯便簽
- Alt + O: 切換相同名字的或者不同後綴的文件
All Panels(所有面板)
- Ctrl + [ / Ctrl + ]:切換面板(向左向右)
- Ctrl + Shift + [ / Ctrl + Shift+] : 返回之前之後的面板狀態
- Ctrl + Tilde[~]:顯示Console
- Esc: 小菜單彈出隱藏
- Ctrl + Shift + M: 進入仿真設備模式(移動平板屏幕)
- Ctrl + Shift + D: 切換調試面板在底部還是側邊欄展示
- Ctrl + F: 搜索內容
- Ctrl + Shift + F: 在所有代碼中搜索(跨域),很實用
- Ctrl + Shift + C: 選擇頁面節點並且查看代碼,最常用!!
- Ctrl + P: 快速切換源碼文件,很常用!
Style Pane(風格面板)
- Tab / Shift + Tab: 下一個/上一個屬性
- ↑: 增加CSS度量單位->1單元
- ↓:減少CSS度量單位->1單元
- PageUporShift + ↑:增加CSS度量單位->10單元
- PageDownorShift + ↓:減少CSS度量單位->10單元
- Shift + PageUp:增加CSS度量單位->100單元
- Shift + PageDown:減少CSS度量單位->100單元
- Alt + ↑:增加CSS度量單位->0.1單元
- Alt + ↓:減少CSS度量單位->0.1單元
Timeline Panel(時間軸面板)
- Ctrl + E:開始
- Ctrl + S:保存時間軸數據
- Ctrl + O:加載時間軸數據
總結
Chrome 的debugger和style pane的快捷鍵和Firefox下的firebug大同小異; 就是chrome的豐富些;
寫完這篇文章…沒必要所有都去記憶,常用的就那麽八九個;其他的鼠標點點就好了…當然,能記下來最好,
畢竟快捷鍵還是比鼠標高效的~~~ 翻譯不容易,且記且珍惜!!
Chrome調試折騰記_(1)調試控制中心快捷鍵詳解!!!