教你玩转Chrome控制面板

  作者：zhanhailiang 日期：2013-04-27

首先，使用F12打开Chrome控制面板，注意Chrome默认提供多个Panels，其中：

• Elements用于查看当前页面DOM结构，样式等；
• Resources用于查看当前页面加载的所有资源，Cookie，Application Cache等；
• Network用于记录所有的资源请求，方便分析网络请求参数等；
• Sources用于调试代码；
• Timeline，Profiles，Audits用于查看页面性能，优化等；
• Console用于记录日志，执行相关js单条命令（可能暂不支持多行模式，可能通过安装jsshell之类的扩展来实现）

接下来介绍Chrome控制台的快捷键（注：以下有解释的是用的频率较高的快捷键）

All Panels<Ctrl>+[/<Ctrl>+]:Go to the panel to the left/right（向左、向右切换面板）<Ctrl>+<Alt>+[/<Ctrl>+<Alt>+]:Go back/forward in panel history（切换上一个、下一个面板）<Esc>:Toggle console（切换Console面板）<Ctrl>+F:Search（搜索当前面板，请在Chrome控制台下右下角设置->General->开启源码搜索Source -> Search in content scripts）<Ctrl>+<Shift>+F:Search across all sources（全局搜索）<Ctrl>+O:Go to source（通过指定源文件名来查看源码）<Ctrl>+G:Go to line（跳转行）Console（先切换到Console面板）<Ctrl>+L:Clear console（清屏）<Tab>:Autocomplete common prefix（自动补全）<Right>:Accept suggestion（接受当前建议）<Down>/<Up>:Next/previous line（切换历史命令）<Enter>:Execute command（执行js命令）Elements Panel<Up>/<Down>:Navigate elements（切换兄弟结点）<Right>/<Left>:Expand/collapse（展开，闭合子结点）<Enter>:Edit attribute（编辑当前结点属性）H:Hide element（隐藏当前结点元素）F2:Toggle edit as HTML（以HTML编辑当前结点元素）Styles Pane<Tab>/<Shift>+<Tab>:Next/previous property<Up>:Increment value<Down>:Decrement value<PageUp> or <Shift>+<Up>:Increment by 10<PageDown> or <Shift>+<Down>:Decrement by 10<Shift>+<PageUp>:Increment by 100<Shift>+<PageDown>:Decrement by 100<Alt>+<PageUp>:Increment by 0.1<Alt>+<PageDown>:Decrement by 0.1Sources Panel（源码面板调试快捷键）F8or<Ctrl>+/:Pause/ContinueF10or<Ctrl>+':Step overF11or<Ctrl>+;:Step into<Shift>+F11 or <Ctrl>+<Shift>+;:Step out<Ctrl>+./<Ctrl>+,:Next/previous call frame<Ctrl>+<Shift>+E:Evaluate selection in console<Ctrl>+<Shift>+O:Go to member<Ctrl>+B:Toggle breakpointTimeline Panel（时间轴面板，记录相关性能）<Ctrl>+E:Start/stop recording<Ctrl>+S:Save timeline data<Ctrl>+O:Load timeline data

附：

• 推荐安装PageSpeed Insights (by Google)扩展（用于参数调优，优化页面性能）
• 可通过查看Chrome控制台右下角的设置按钮定制相关的参数，如时下前端开发较热门的功能[Enable source maps]，[Show FPS meter]；还可以通过Override配置模拟多终端，多浏览器的访问；也可以通过Shortcuts查看所有的控制台快捷键