Chrome控制台调试技巧

220 阅读1分钟

umaar.com/dev-tips/

一、 Console知识点:

1、console.log('%c123', 'color: red'); 改变打印的样式

PS: %s:字符串占位符 %d:整数占位符 %f:浮点数占位符 %o:对象占位符(注意是字母o) %c: CSS样式占位符

// 注意:此API只能通过浏览器控制台获取,无法通过网页脚本来进行访问。

2、$相当于document.querySelector()

3、?相当于document.querySelectorAll(); 返回数组不是类数组

4、$x(path):返回一个与给定XPath表达式匹配的DOM元素数组。 PS: $x('//div[p]')表示返回包含<p>元素的所有<div>元素。

5、$0,$1,$2,$3,$4; 指向你当前在Element中选中的元素,就近原则

6、$_; 记录了最后一次在Console计算的表达式

7、getEventListeners(document); 返回在DOM元素上注册的所有的事件

8、debug(fn); 接收一个函数作为参数,当每次该函数被调用时,Debugger就会在该函数的第一行中断执行。可以与getEventListeners(document)结合使用

9、copy(anything) 工具函数,方便你将任何东西拷贝到系统的粘贴板暂存。

10、await不需要在async函数中使用。在DevTools支持直接使用。

11、使用条件断点在生产环境中注入console.log();

12、console.dir(document.body)和console.log(document.body);可看差异

13、console.table([{ id: 1, name: 'z', age: 12, class: '5班' }, { id: 12, name: 's', age: 23, school: '中国大学' }], ['id', 'name']); PS: 第二个参数可选

14、console.assert(); assert即断言,该方法接收多个参数,其中第一个参数为输入的表达式,只有在该表达式的值为false时,才会将剩余的参数输出到控制台中。

15、console.trace();该方法用于在控制台中显示当前代码在堆栈中的调用路径,通过这个调用路径我们可以很容易地在发生错误时找到原始错误点 PS: function foo(data) { if (data === null) { console.trace(); return []; } return [data.a, data.b]; }

  function bar1(data) {
    return foo(data);
  }

  function bar2(data) {
    return foo(data);
  }

  bar1({a: 1, b: 2}); // -> [1, 2]
  bar2(null);

16、console.count(); 计数器,记录调用次数,一般在循环或多次调用使用

17、console.time() & console.timeEnd(); 跟踪程序执行时间,这两个方法参数要一致,一般是字符串

18、console.group() & console.groupEnd(); 对数据信息进行分组,与time用法类似

19、document.body.contentEditable = true; 浏览器:只读模式 => 编辑模式

20、monitorEvents($('selector'), 'eventName'); 将监视选择器匹配的元素的某个特定的事件,第二个参数也可以为string[]

21、unmonitorEvents($('selector')); 停止监视

22、inspect($('selector')); 将检查与选择器匹配的元素,并且会自动跳转到Chrome Developer Tools的Elements选项卡中

23、Sensors 模拟当前设备的位置和模拟手机水平传感器参数

24、Quick source 边写边生效

二、 Elements知识点

1、Alt + Click dom展开

2、Event Listeners 查看绑定的事件

3、直观查看dom层级

4、直接调试css样式,可查看所在的文件

5、取色

6、查看盒模型

7、快速调节数值

8、Properties 快速查看选中元素的信息

9、CSS阴影图形化编写

10、图形化CSS动画编写

三、 Sources

1、ctrl + p 文件查找, :10:10 定位到当前文件10行10列

2、增加条件断点

3、普通断点

4、watch

5、DOM事件断点

6、

四、 Network

1、请求文件上右键,如复制,不想加载该文件

2、过滤器 lager-than:100k,status-code:200,mime-type:img/gift;不能留空格

五、 Performance

六、 Memory