有用的快捷键
- Ctrl + Shift + C：以检查元素的方式打开控制台并定位 Elements 栏。选中某个元素后可以在控制台输出 $0 ，即可输出该元素。输出的元素右键点击 Reveal in Elements Panel 即可重新定位到 Elements 栏。
- Ctrl + Shift + J：打开控制台并定位到 console 栏
- Ctrl + L：清空控制台
- Ctrl + 点击：选中多个光标同时输入
通过 XPath 表达式查询 DOM
x('//img') 来搜索图片：
var frame = document.getElementsByTagName('iframe')[0].contentWindow.document.body;
$x('//img', frame);
该函数同样能够接受第二个参数，该参数是关于路径上下文的，比如：$x(xpath,context)。这就允许我们选择一个详细的上下文（也就是一个内嵌帧）然后使用 XPath 来查询。
格式化代码
- 进入 Sources 面板，选择需要格式化的文件
- 然后点击在开发者工具底部的格式化按钮
- 格式化完成，是不是好看多了
强制元素处于某种状态时
- 在元素面板中右键元素，并选择 “Force Element State”
- 可以选择其中一个：active，:hover，：focus，：visited 等来强制进入其中一种状态。
控制台命令行 API
- $_：返回最近一次计算过的的表达式的值
- $$()：相当于 querySelectorAll() ，返回匹配的所有元素，可以用 class 和 id 匹配
- $()：相当于 querySelector() ，返回匹配的第一个元素，同样也可以用 class 和 id 匹配
- $0 - $4（没有 $5 ）：$0 返回当前选中的元素，$1 返回前一个选中的元素，以此类推
- $x(path)：返回匹配给定的 XPath 表达式的 DOM 元素的数组
- copy()：复制指定的内容到复制粘贴板
- inspect()：在 ELement 面板打开指定的 DOM元素，或者在 Profiles 面板打开 JS 堆元素
- getEventListeners()：返回注册在指定对象上的事件监听器数组，如 click
- keys()：返回一个数组，包含对象所有属性
- values()：返回一个数组，包含对象的所有属性的值
- monitor(function)：监视函数的调用，返回函数名和函数被调用时传入的参数，必须在调用函数前调用该方法，负责无效
- unmonitor(function)：停止监视函数的调用，与 monitor 一起使用
- monitorEvents(object[, events])：监听某个对象的事件，输出到控制台，可以监听单个事件，到监视器，事件数组，或被映射到通用事件类型中之一，如监听单击事件 click，监听鼠标类型事件 mouse
- unmonitorEvents(object[, events])：停止监视指定的对象和指定事件的事件，与 monitorEvents 一起使用
- profile([name])：使用可用的文件名开始一个 JavaScript CPU 分析会话
- profileEnd([name])：停止当前使用 profile()方法开始的分析会话，并在配置面板上显示结果
- table(data[, columns])：通过用可选用的列标题传进一个数据对象进来，以表格的形式输出对象数据
$$('div.ClassName');
$$('div#IdName');
$('div.ClassName');
$('div#IdName');
$x('//p[a]'); //返回所有包含 a 标签元素的 p 标签元素
inspect(document.body.firstElementChild); //在 ELement 面板打开 document.body 的第一个子元素
getEventListeners(document.body);
copy({ a:1 });
values({a: 1, b: 2}); //["a", "b"]
values({a: 1, b: 2}); //[1, 2]
function sum(x, y) {
return x + y;
}
monitor(sum);
sum(2,3); //function sum called with arguments: 2, 3
sum(1,2);//function sum called with arguments: 1, 2
monitorEvents(window, "resize"); //监视了在window对象中所有的 resize 事件
monitorEvents($("#msg"), "key"); //监视 id 为 msg 的元素所有的按键事件
profile("My profile");
profileEnd("My profile")
profile('A');
profile('B');
profileEnd('A');
profileEnd('B');
var names = {
0: { firstName: "John", lastName: "Smith" },
1: { firstName: "Jane", lastName: "Doe" }
};
table(names); //效果如下
