文档章节

Chrome 开发工具之Elements

_野兽
 _野兽
发布于 2016/06/19 11:34
字数 1188
阅读 3
收藏 0
点赞 0
评论 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
衢州
程序员
作为Web开发人员,我为什么喜欢Google Chrome浏览器

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

紫地瓜
2012/09/17
0
1
Introduction to Chrome Developer Tools——阅读笔记

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

小微
2013/01/16
0
0
【Chorme】前端调试工具之Chorme专篇

【相关来源】 Browser-Sync:响应式Web开发调试利器 开发者调试工具Chrome Workspace Chrome中的 workspace 工具(官方) Chrome调试工具developer tool技巧 【Chrome开发,debug的使用方法。...

呢喃的猫咪
2013/02/27
0
1
利用google浏览器开发者工具调试网页(详)

前端程序员或者在校大学生正在开发网页,如果想要测试或者通过测试优化网页结构,该怎么办呢?这就需要用到一款工具,chrome浏览器的开发者工具?本文写给尚不熟悉这个开发者工具的同学们或者...

开源oschina
2015/01/09
0
0
谷歌浏览器javascript调试教程

怎样打开Chrome的开发者工具? 你可以直接在页面上点击右键,然后选择审查元素: 或者在Chrome的工具中找到: 或者,你直接记住这个快捷方式: Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台...

Sheamus
2015/05/08
0
0
Cordova 3.x 基础(3) -- 调试Debug工具

Cordova 3.x 基础(3) -- 调试Debug工具 (1)Ripple Emulator 是基于Google Chrome的移动应用模拟器,已经捐赠给了ASF。Apache Ripple:http://ripple.incubator.apache.org/ Chrome Webs...

youxizhe
2014/09/29
0
0
Chrome开发者工具中Elements(元素)断点的用途

SAP Engagement Center UI的这个按钮会每秒钟刷新一次,显示页面已经打开了多长时间。 需求:需要找到哪行JavaScript代码不断刷新的按钮文字。 按照经验判断,这个文字肯定是一个JavaScript ...

JerryWang_SAP
04/24
0
0
爬虫必备工具,掌握它就解决了一半的问题

网上爬虫的教程实在太多了,知乎上搜一下,估计能找到不下一百篇。大家乐此不疲地从互联网上抓取着一个又一个网站。但只要对方网站一更新,很可能文章里的方法就不再有效了。 每个网站抓取的...

crossin
07/09
0
0
【翻译】25个浏览器开发工具的秘密

开发 过去几年来,浏览器开发工具一直是 Web 开发者最得力的工具。它能够与Web浏览器和谐相处,允许我们在当前窗口中实时地操作DOM元素、CSS样式和JavaScript,以及获取一些其他的有用信息。...

lg2045
2014/08/25
0
0
Jerry和您聊聊Chrome开发者工具

Chrome开发者工具是Jerry日常工作使用的三大调试器之一。虽然工具名称前面带了个"开发者", 但是它对非开发人员仍然有用。不信? 用Chrome打开我们常用的网站,按F12,在Console标签页里看到这...

jerrywangsap
04/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

idea tomcat 远程调试

tomcat 配置 编辑文件${tomcat_home}/bin/catalina.sh,在文件开头添加如下代码。    CATALINA_OPTS="-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=7829" Idea端配......

qwfys
今天
1
0
遍历目录下的文件每250M打包一个文件

#!/usr/bin/env python # -*- utf-8 -*- # @Time : 2018/7/20 0020 下午 10:16 # @Author : 陈元 # @Email : abcmeabc@163.com # @file : tarFile.py import os import tarfile import thr......

寻爱的小草
今天
1
0
expect同步文件&expect指定host和要同步的文件&构建文件分发系统&批量远程执行命令

20.31 expect脚本同步文件 expect通过与rsync结合,可以在一台机器上把文件自动同步到多台机器上 编写脚本 [root@linux-5 ~]# cd /usr/local/sbin[root@linux-5 sbin]# vim 4.expect#!/...

影夜Linux
今天
1
0
SpringBoot | 第九章:Mybatis-plus的集成和使用

前言 本章节开始介绍数据访问方面的相关知识点。对于后端开发者而言,和数据库打交道是每天都在进行的,所以一个好用的ORM框架是很有必要的。目前,绝大部分公司都选择MyBatis框架作为底层数...

oKong
今天
13
0
win10 上安装解压版mysql

1.效果 2. 下载MySQL 压缩版 下载地址: https://downloads.mysql.com/archives/community/ 3. 配置 3.1 将下载的文件解压到合适的位置 我最终将myql文件 放在:D:\develop\mysql 最终放的位...

Lucky_Me
今天
2
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

问题终结者
今天
2
0
expect脚本同步文件expect脚本指定host和要同步的文件 构建文件分发系统批量远程执行命令

expect脚本同步文件 在一台机器上把文件同步到多台机器上 自动同步文件 vim 4.expect [root@yong-01 sbin]# vim 4.expect#!/usr/bin/expectset passwd "20655739"spawn rsync -av ro...

lyy549745
今天
1
0
36.rsync下 日志 screen

10.32/10.33 rsync通过服务同步 10.34 linux系统日志 10.35 screen工具 10.32/10.33 rsync通过服务同步: rsync还可以通过服务的方式同步。那需要开启一个服务,他的架构是cs架构,客户端服务...

王鑫linux
今天
1
0
matplotlib 保存图片时的参数

简单绘图 import matplotlib.pyplot as pltplt.plot(range(10)) 保存为csv格式,放大后依然很清晰 plt.savefig('t1.svg') 普通保存放大后会有点模糊文件大小20多k plt.savefig('t5.p...

阿豪boy
今天
3
0
java 8 复合Lambda 表达式

comparator 比较器复合 //排序Comparator.comparing(Apple::getWeight);List<Apple> list = Stream.of(new Apple(1, "a"), new Apple(2, "b"), new Apple(3, "c")) .collect(......

Canaan_
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部