前端开发离不开 Web Developer Tools,提升效率之一是熟悉最常用的操作功能快捷键,这里汇集一下,随时更新;
Developer Tools(DT) 相关
功能 | Win | Mac |
---|---|---|
Toggle Developer Tools | Ctrl+Shift+I(F12) | Cmd+Opt+I |
打开直接定位到 console | Ctrl+Shift+J | Cmd+Opt+J |
清空 console log (Focus on DT) | Ctrl+L, Alt+D | Cmd+K(Opt+L) |
Highlights the URL (Focus on Page) | Ctrl+L | Cmd+L |
Toggle Bookmarks bar on and off | Ctrl+Shift+B | Cmd+Shift+B |
刷新页面 | Ctrl+R | Cmd+R |
打开一个新 Tab | Ctrl+T | Cmd+T |
恢复关闭的 Tab | Ctrl+Shift+T | Cmd+Shift+T |
How to switch between Page and Developer Tools
Press F6.
F6 loops the focus in this order:
Page -> DevTools -> Address bar -> Bookmarks;
- 51版的 Chrome 没有提供工具 Hide address bar and toolbar;
More Tools
Mac 下 Browsers(Safari | Chrome | Firefox) 快捷键
- Google Chrome Keyboard Shortcuts - Mac
- ⌘W:Close Tab(多 Tab 时,则 ⇧⌘W 关闭所有窗口,退出应用;Closes Window/Instance);
- ⌘Q:Quit 应用(closes the application/process)
- Command ⌘ + Click:will open a link in a new a tab behind the current one;
- Command ⌘ + Shift ⇧ + Click:will open the new tab & bring it to the front.
- Command + 1,...,Command + 8 直接定位到指定位置的 Tab,Command + 9 则到最后一个 Tab(从左到右排序)
删除缓存
- Ctrl+Shift+Del More tools > Clear browsing data
- 安装 Chrome 扩展 - Clear Cache Shortcut offered by Paul Yuan;
- Ctrl+Shift+D 一键清空;