chrome's developer console

时间:2023-03-09 15:45:15
chrome's developer console

原文链接: https://medium.freecodecamp.org/10-tips-to-maximize-your-javascript-debugging-experience-b69a75859329;

一、 选取DOM 元素
1. $(“tagName”/“.class”/“#id”): 返回匹配的第一个元素;
2. $$(“tagName”/“.class”): 以数组形式返回所有匹配的元素($$(“input”)[2]);

二、将浏览器转换为编辑器
1. document.body.contentEditable = true;

三、找出元素对应的事件
1. getEventListeners($(“selector”)): 返回对象数组;
2. getEventListeners($(“selector”)).eventName[0].listener: 返回指定元素的特定事件;
for example: getEventListeners($(“input”)).click[0].listener;

四、监听事件
1. monitorEvents($(“selector”)): 监听指定元素的所有事件;
2. monitorEvents($(“selector”), “eventName”): 监听指定元素的特定事件;
for example: monitorEvents($(“input”), “focus”/ [“click”, “focus”]);
3. unmonitorEvents($(“selector”)): 停止监听;

五、计算某段代码的运行时间
for example:
console.time(‘myTime’);
for (var i = 0; i < 10; i++) {
//do something
}
console.timeEnd(‘myTime’);
会输出该循环的耗时;

六、将变量的值以表格的形式展现
for example:
var arr = [{a: 1, b: 2, c: 3}, {a: 1, b: 4, c: 5, d: 6}, {f: 3, k: 9}];
console.table(arr);
输出:

chrome's developer console

七、检查DOM元素,并跳转到该element所在的位置
1. inspect($(“selector”)) 
for example: inspect($(“a”)[3])将会跳到第四个a元素
2. $0, $1, $2, etc. 将会跳到最近检查的元素上;

八、列出元素属性
1. dir($(“selector”)): 返回包含元素所有属性的对象;

九、获取上一次输出的结果
for example:
3 + 3 + 3;
//the answer is 9;

$_
//9;

十、clear the console and the memory
clear()

相关文章