Chrome 开发工具之Elements

简介: 友情提示:全文图片高能,如使用手机阅读,请确保在wifi情况下或者流量充足。图片有点渣,也算辛苦做出来的,请别嫌弃~ Elements面板主要展示当前页面的组织结构,在如今的应用程序中,HTML页面初始化时加载的不一定就是之后看到的DOM树,有一个页面结构的实时调试工具可以很好的帮助开发者调试开发和调试bug,下面开始认识下Elements面板。

友情提示:全文图片高能,如使用手机阅读,请确保在wifi情况下或者流量充足。图片有点渣,也算辛苦做出来的,请别嫌弃~

Elements面板主要展示当前页面的组织结构,在如今的应用程序中,HTML页面初始化时加载的不一定就是之后看到的DOM树,有一个页面结构的实时调试工具可以很好的帮助开发者调试开发和调试bug,下面开始认识下Elements面板。

打开开发工具

1.右键点击页面,点击"检查" (mac && window)

2. control+command+j (mac) 和 f12 (window)

这个面板长什么样

解释下各编号所指的内容:

#1 用于在页面上选择一个元素,并且查看该元素

#2 模拟设备之间的切换,主要是pc/移动端(包括手机,平板)

#3 html元素结构显示及实时编辑

#4 当前选中元素的所在位置(如图中,div.test在html中的body中)

#5 显示当前选中元素的样式,盒模型

#6 显示当前选中元素的盒模型,样式属性计算

#7 显示当前选中元素上所绑定的事件

#8 显示DOM断点列表

#9 显示当前选中元素的属性

下面开始介绍以上9个点的使用方式

#1 元素选择器

点击该图标,然后点击需要选中的元素。

 

#2 设备切换

默认是pc端的显示方式,点击后以移动端格式显示,再次点击便退回到pc端显示格式。

#3 html元素结构显示及实时编辑

先来看看元素结构的显示

html元素属性的添加/修改/删除

操作步骤解释:

1.将第一个div的class属性去掉/修改(这里直接去掉了这个属性)

2.给第一个div重新加上test类(右击元素,选择 Add Attribute,其实也可以双击元素标签)

3.给第一个div加上属性index,值为0(同上)

4.编辑元素内文本内容(右击元素,选择"Edit Text")

5.全面编辑该元素(右击元素,选择"Edit as HTML")

html元素的复制/粘贴和隐藏/删除

操作步骤解释:

1.元素的复制(选择要复制的元素,右击元素,选择"Copy=>Copy element")

2.元素的粘贴(选择要粘贴的位置,右击该元素,选择"Copy=>Paste element")

3.隐藏/删除拷贝过来的元素(右击元素,选择"Hide element"或者"Delete element"。这里做删除操作)

剪切元素同上

#4 当前选中元素的所在位置

注意该位置的变化...

#5 显示当前选中元素的样式,盒模型

#1 选中的元素
#2 选中元素的css样式
#3 该元素的盒模型

css样式编辑

操作步骤解释:

1.添加样式(在样式行的空白处用左键点击)

2.修改样式(点击样式名或者样式值)

3.显示/隐藏该样式(点击样式前面的选择框即可)

4.选取颜色(点击颜色的标识图便可)

#6 显示当前选中元素的盒模型,样式属性计算

如图所示便是盒模型和计算出来的样式属性值。

#7 显示当前选中元素上所绑定的事件

操作步骤解释:

1.跟踪至事件定义处(点击右边显示的文件及行数,或者右击事件handler,选择"Show Function Definition",这里选择前者操作)

2.作为全局变量存储(在全局变量便可以访问这个函数)

#8 显示DOM断点列表

和在Sources面板的断点类似。给DOM加断点,在达到规定条件时触发断点,截断javascript的执行并且定位到断点处。

DOM断点主要有以下条件:

1.Subtree Modefications => 该DOM的子DOM结构发生变化时触发

2.Attributes Modefications => 该DOM的属性发生变化时触发

3.Node Removal => 该DOM从DOM结构中被删除时触发 

操作步骤解释:

1.给div.test的第一个元素添加Subtree Modifications的断点(右击元素,选择"Break on..."=>"Subtree Modefications")

2.给div.test的第二个元素添加Attributes Modefications的断点(右击元素,选择"Break on..."=>"Attributes Modefications")

3.给div.test的第三个元素添加Node Removal的断点(右击元素,选择"Break on..."=>"Node Removal")

4.删除Subtree Modefications的断点

5.删除所有断点

#9 显示当前选中元素的属性

包含该元素的DOM属性。

怪不得不喜欢做gif,做图比写字麻烦好多哦~ 欢迎各位小伙伴交流讨论技术...

相关文章
|
Web App开发 前端开发 JavaScript
前端基本开发工具的浏览器之Chrome
Chrome是一款流行的浏览器,其WebKit引擎为用户提供了出色的性能和安全性。下面就让我们来看看Chrome的特点和优势。
124 0
|
Web App开发 网络协议 开发工具
Chrome浏览器开发工具之scheme入口
chrome://net-internals/#events net-internals是一套工具集合,用于帮助诊断网络请求与访问方面的问题,它通过监听和搜集 DNS,Sockets,SPDY,Caches等事件与数据来向开发者反馈各种网络请求的过程、状态以及可能产生影响的因素。
354 1
|
Web App开发 前端开发 JavaScript
|
Web App开发 JavaScript 前端开发
Chrome 开发工具之Timeline/Performance
之前有说到Element,Console,Sources大多运用于debug,Network可用于debug和查看性能,今天的主角Timeline(现已更名Performance)更多的是用在性能优化方面,它的作用就是记录与分析应用程序运行过程中所产生的活动。
1307 0
|
Web App开发 缓存 JavaScript
Chrome 开发工具之Network
经常会听到比如"为什么我的js代码没执行啊?","我明明发送了请求,为什么反应?","我这个网站怎么加载的这么慢?"这类的问题,那么问题既然存在,就需要去解决它,需要解决它,首先我们得找对导致问题的原因,才能"对症下药"。
1427 0
|
Web App开发 JavaScript 开发工具
Chrome 开发工具之Sources
Sources面板主要用于查看web站点的资源列表及javascript代码的debug 熟悉面板 了解完面板之后,下面来试试这些功能都是如何使用的。 文件列表 展示当前页面内所引用资源的列表,和平常的文件tree一样。
1409 0
|
Web App开发 监控 JavaScript
Chrome 开发工具之Console
前段时间看git的相关,记的笔记也大致写到了博客上,还有些因为运用不熟,或者还有一些疑惑点,暂时也不做过多纠缠,之后在实践中多运用得出结论再整理分享吧。 工欲善其事,必先利其器。要想做好前端的工作,也应该多了解浏览器开发工具的使用,近来几天在看html和css的一些技巧性知识,顺便也把chrome一些懂的地方再熟悉和不懂的地方去学习,把开发工具理解理解,也分享给小伙伴们,今天暂时是console相关的吧(偷个小懒,从用的最熟的面板入手,之后计划整理出chrome开发工具各个面板的使用说明~也需要时间测测,还有两个面板用的不熟呢)。
1153 0
|
Web App开发 前端开发 Go
使用 Chrome 开发工具调试异步 JavaScript(Debugging Asynchronous JavaScript with Chrome DevTools)
使用 Chrome 开发工具调试异步 JavaScript 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循“署名-非商业用途-保持一致”创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。
1919 0
|
3月前
|
Web App开发 数据采集 存储
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
本文探讨了如何利用Chrome DevTools Protocol (CDP) 与 Selenium WebDriver 提升浏览器自动化效率,结合代理IP技术高效采集微博数据。通过CDP,开发者可直接操作浏览器底层功能,如网络拦截、性能分析等,增强控制精度。示例代码展示了如何设置代理IP、cookie及user-agent来模拟真实用户行为,提高数据抓取成功率与稳定性。适用于需要频繁抓取互联网数据的应用场景。
487 3
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率