文档章节

Chrome 开发工具之Elements

_野兽
 _野兽
发布于 2016/06/19 11:34
字数 1188
阅读 4
收藏 0

友情提示:全文图片高能,如使用手机阅读,请确保在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,做图比写字麻烦好多哦~ 欢迎各位小伙伴交流讨论技术...

© 著作权归作者所有

_野兽
粉丝 3
博文 68
码字总数 93670
作品 0
衢州
程序员
私信 提问
【译】你不知道的 Chrome 调试工具技巧 第十五天:Twitter day!

特别声明 本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列。据作者透露一共有 24 篇,一直更新到 12 月 24 日 版权归原作者所有。 作者在Twitter上推荐我们的中文翻译啦,截图在最后...

dendoink
2018/12/20
0
0
Introduction to Chrome Developer Tools——阅读笔记

最近对Chrome开发者工具十分关注,因此学习了不少相关文章。这里是HTML5ROCKS上的文章Introduction to Chrome Developer Tools的阅读笔记。注:下面的内容不是一对一地翻译,而是摘录和个人学...

小微
2013/01/16
342
0
【译】你不知道的 Chrome 调试工具技巧 第二十四天:最后一天,元旦牛逼

特别声明 本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列。据作者透露一共有 24 篇,一直更新到 12 月 24 日 版权归原作者所有。 作者在 Twitter 上推荐我们的中文翻译啦,截图在最...

dendoink
2018/12/29
0
0
作为Web开发人员,我为什么喜欢Google Chrome浏览器

在Google Chrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因为FireFox有强大的Firebug,对于前端开发可谓神器。 在Chrome出来的时候,我就喜欢上它的简洁、快速,无...

紫地瓜
2012/09/17
432
2
作为Web开发人员 我为什么喜欢 Chrome

在Google Chrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因为FireFox有强大的Firebug,对于前端开发可谓神器。 在Chrome出来的时候,我就喜欢上它的简洁、快速,无...

红薯
2011/08/30
13.9K
19

没有更多内容

加载失败,请刷新页面

加载更多

rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0
简述TCP的流量控制与拥塞控制

1. TCP流量控制 流量控制就是让发送方的发送速率不要太快,要让接收方来的及接收。 原理是通过确认报文中窗口字段来控制发送方的发送速率,发送方的发送窗口大小不能超过接收方给出窗口大小。...

鏡花水月
今天
9
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
959
11
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部