常规
截图:
- 页面截图: 点击截图按钮 (
;需要在工具箱激活)。 - 视窗截图: 在响应式设计视图模式下点击截图按钮 () 。
- 节点截图: 在查看器中右击节点并点击 "节点截图"。
- 通过 Developer Toolbar command:
screenshot [filename] [options].
设置:
页面查看器
在 标签视图中:
- 选择节点并按下 H 键来隐藏/显示该节点。
- 选择节点并按下 Backspace 或 Del 键来删除该节点。
- 按住 Alt 键并点击该节点来展开该节点及其所有子节点。
- 点击最后一个 面包屑导航按钮来使查看器页面滚动到该节点.
- 点击节点后面的“ev”图标 来查看所以绑定在该节点上的事件监听器。
- 选择节点并按下 S 键来在页面中查看该节点 (也可以用过右击该节点并点击 "画面滚动到节点")。
- 右击节点并点击 "在控制台中使用" 来把该节点作为
tempN变量在 命令行 中使用。
在 选择元素时:
- 按住 Shift 并点击元素来选择节点并保持选择模式 (拾取模式不会取消).
- 使用 ←/→ 键来选择它的父/子元素 (如果它们很难被选择).
在 规则视图中:
- 点击选择器后的查看按钮 (
)来使所有匹配的元素高亮显示。 - 点击
element{}规则后的查看按钮()来锁定当前元素的高亮显示。 - 右击任意属性并选择 "Show MDN Docs" 来 在MDN 文档中查看这个属性。
- 点击被覆盖属性后的筛选按钮 (
)来 查找其他覆盖它的属性。 - 右击属性的名称，值或者规则来复制该属性的名称，值，声明或者整个规则。
网页控制台
在所有面板:
- 按 Esc 键打开 split console; 用以调试页面以及审查节点。
命令行:
$0指令代表当前选择的节点。$()是document.querySelector()的简写形式。$$()是document.querySelectorAll()的简写形式。copy()复制所有属性作为文本。- 右击节点并点击 "在控制台中使用" 来把这个节点作为
tempN变量在命令行中使用. cd()切换JavaScript执行域到该页面的一个不同的iframe子页面。console.table()将表格数据作为表格输出（此句翻译需要校对）.help()打开Web控制台帮助页面
控制台输出:
- 点击输出元素后面的查看按钮 () 来在查看器中选中该元素 。
- 点击勾选 "持续日志" 选项来使输出的信息在进入及离开网页后不被清除。
- 在设置面板点击勾选 "显示时间戳" 选项来在输出信息前面显示时间戳。
调试
- 点击黑箱按钮 (
)来在调试中跳过JavaScript库。 - 按下Ctrl+Alt+F 组合键来在所有脚本搜索。
- 按下Ctrl+D 组合键来搜索函数的定义。
- 按下 Ctrl+L 组合键跳转到具体的行。
样式编辑器
- 点击样式表前的黑箱按钮 () 来切换可见度。
- 在 响应式设计模式下点击 @media 规则来切换模式。
- 点击导入按钮 (
)来导出样式表或者点击创建按钮(
)创建一个新的样式表。 - 点击设置按钮并勾选 "显示原始来源" 来显示css预处理文件.
网络
- 点击启动性能分析按钮来 比较初次缓存与没有缓存的页面加载 。
- 选择一个请求并点击 "编辑与重发"按钮来修改该请求的先洗头并重新发送该请求。
- 点击勾选 "持续日志" 选项来使输出的信息在进入及离开网页后不被清除。
- 点击 "原因列表中的js图标 来追踪这个请求的堆栈。
- 点击勾选 "禁用缓存" 选项来在调试时禁止网页缓存。
存储
- 右击列表头打开下拉菜单来显示或隐藏列。
- 右击任意条目，点击“删除名字”来删除该条目或点击“删除全部”来删除全部条目。
- 选择一个条目并在侧边栏中查看解析的值。
开发者工具条
- 按下 Shift + F2 来打开 Developer Toolbar (GCLI)，使用命令来控制页面，开发者工具，浏览器以及其他。
help弹出所有可用的指令的清单。security csp显示 Content Security Policy（内容安全政策） 指定的安全特性 。pref show,pref setandpref reset显示，设置和重置浏览器偏好。folder openprofile在文件管理器中显示当前的配置文件目录。media emulate media type模拟指定的媒体类型。