chrome devtools使用详解——Console
2018-09-04 本文已影响198人
前往悬崖下寻宝的神三算
本文会忽略一些过于基础的知识和细节
持续更新,欢迎关注~
devtools——前端开发者的福音,进阶高级工程师必须锻造的利器!
先截图瞅瞅devtools

目前新版本有以下菜单:
-
Elements
查看 DOM 树 -
Console
控制台 -
Sources
查看源码以及打断点 -
Network
记录网络请求信息 -
Performance
运行时性能表现(解析 JS、计算样式、重绘等) -
Memory
JS对象和相关联的 DOM 节点的内存分布情况 -
Application
记录资源(存储信息、缓存信息以及页面用到的图片、字体、脚本、样式等信息) -
Security
检测当面页面的安全性 -
Audits
给出提高页面性能的建议
从本篇文章开始逐个捋!
Elements

dom树
如上图中的1区域,相信大家都是成熟的老油条了,简单的不多赘述,挑些不常见但实用的讲讲
1. 右键菜单

-
Hide element
隐藏元素。这个必需说下,相信大家在看到广告或者去掉迅雷种子(#。#正经)的遮罩层的时候一定想起自己的专业技能,那么你是display:none
还是Delete element
?试试Hide element
更好用 -
Force state
Force state
强制状态,其实就是添加伪类。这个功能在调试伪类样式很好用:
Force state > hover
-
Break on
image.png
断点调试,没错html里也可打断点的!
1 .subtree modifications
子节点添加、删除、移动的话,则会触发
2 .attribute modifications
节点属性修改时触发
3 .node removal
subtree modifications 示例
Event Listeners
事件监听器列表

选中一个元素,可以看到经过它的事件列表(冒泡和捕获)。
-
Ancestors All
去掉祖先元素的事件,只看当前元素包含的事件
上图中如果去掉选中,则不会显示div绑定的click事件 -
Framework listeners
去掉框架的事件
Properties
元素包含的属性

如图包含了多个属性分类,点开可以看到的才是具体的属性,这些所有的属性都可以通过dom.xx
调用
注:Accessibility 貌似用来支持h5的视听障碍功能,了解即可