1. 谷歌浏览器
[TOC]
开发工具主要有八个选项：
- 元素
- 资源
- 网络
- 源
- 时间表
- 简介
- 审核
- 控制台
- 在开发过程中记录诊断信息。如
console.log()或console.profile()。 - 一个可与文档和工具交互的 shell 提示符。
- 在开发过程中记录诊断信息。如
可以使用Ctrl+[和 Ctrl+] 快捷键在面板之间移动。
Ctrl+o 可以进入 Sources 面板并且提供一个列出所有可检查文件的搜索框。
Ctrl+Shift+o：打开一个对应函数/特定选择器的一个选择框，输入名称，跳到相应文件的相应行。
对于具体的文件，可以按Ctrl+f 快捷键，对文件中的内容进行搜索（搜索框在显示文件的最下方）。
Ctrl+Shift+f：对所有文件的内容进行搜索。会在最下方弹出一个搜索框。同时提供了正则表达式和敏感大小写的搜索方式，可能需要点击搜索框前面的符号开启。
JavaScript 可以直接在 Sources 面板中进行编辑。
对于css，在Element中点击相应的节点，在右边就会出现可以编辑的css格式
自定义 JavaScript 片段：有时候你想能够保存小的脚本，书签和实用的工具好让这些工具可以让你在调试的时候可以用的上。Snippets 是一个新的可以在这个开发流程中使用的开发者工具，它允许你在源面板中创建，存储和执行 JavaScript。在Sources左边一栏。
以下是 Snippets 比较有用的情况：
- 书签 所有你的书签可以作为片段进行存储，特别是那些你可能想编辑的。
- 实用工具 调试工具可以和当前页面进行交互，并且可以保存和调试。一个社区企划的列表已经被提供。
- Debugging Snippets 提供了一个语法高亮显示并且可持续的多行控制台，这样使得调试代码比单行要更加便捷。
- Monkey-patching code 你想要在运行时修复的代码可以通过 Snipptes 来完成，尽管多数时候你可能只是在源面板中实时编辑代码。
要打开抽屉式控制台（就是现实在其他工具栏的下方），你需要在键盘上按下 Esc 键或者点击开发者工具窗口右上角的 Show Drawer 按钮。
要清除控制台历史信息，你需要这么做：
- shell 提示符中输入
clear()命令行 API。 - 在 Javascript 中执行
console.clear()调用控制台 API。 - 使用键盘快捷键
Ctrl + L
console输出：
console.log()console.warn()console.error()
console.assert()方法仅仅只当它的第一个参数为 false 时才显示一个错误信息字符串（它的第二个参数） 一个简单的断言并且如何展示的例子。
console.assert(list.childNodes.length < 500, "Node count is > 500");
| ALL | 显示所有控制台输出 |
|---|---|
| Errors | 只显示 console.error() 输出的信息 |
| Warnings | 只显示 console.warn() 输出的信息 |
| Info | 只显示 console.info() 输出的信息 |
| Logs | 只显示 console.log() 输出的信息 |
| Debug | 只显示 console.timeEnd() 和 console.debug() 输出的信息 |
选择元素：
$()：返回第一个匹配 CSS 选择器的元素。这也是document.quertSelector()的快捷方式。$$()：返回包含所有匹配 CSS 选择器的一个数组。这是document.querySelectorAll()的一个别名。$x()：返回一个匹配特定 XPath 的数组。
Shitf+Enter 允许你从控制台进入多行模式。
格式化 JavaScript，开发者工具支持格式化精简后的 JavaScript 以便阅读。要格式化，你需要：
- 进入 Sources 面板，然后从脚本列表中选择你想要格式化脚本。
- 然后点击在开发者工具底部的格式化按钮
(用大括号来标记) - 你的代码应该已经排版好了