传智博客
快捷导航
蚂蚁部落 网站首页 前端教程 谷歌工具 查看内容

栏目导航

谷歌浏览器审查编辑DOM元素

2017-8-11 16:02| 发布者: admin| 查看: 188| 评论: 0|来自: 蚂蚁部落

传智播客

一.检查元素:

打开谷歌开发者工具Elements面板,下面会显示对应网页的DOM结构:

a:3:{s:3:\"pic\";s:43:\"portal/201708/11/160437szdjzrxdm4ed3jm7.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

点击箭头可以展开折叠的节点,并且我们可以对诸多元素进行编辑,以观察网页的效果。

上面是针对整个网页的元素,如果要专注于页面中的某一个元素,可以使用谷歌开发者工具的检查功能:

a:3:{s:3:\"pic\";s:43:\"portal/201708/11/160827bo9cctmbyj9j61ky.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

我们要审查第三个链接a元素,那就可以在其上右击,选择弹出菜单中的"检查":

a:3:{s:3:\"pic\";s:43:\"portal/201708/11/161034l1fa0rqsxzfh10hg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

面板高亮定位于对应的链接a元素之处。

二.跟踪面包屑:

在Elements面板的底部,有一个具有层级的面包屑跟踪功能:

a:3:{s:3:\"pic\";s:43:\"portal/201708/11/161721dovttpuh9y7hi4tq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

当前定语于li元素,那么在底部,li会处于高亮状态,点击不同的节点,可以实现定位功能。

三.编辑DOM节点和属性:

点击节点或者属性名称,可以实现对节点的编辑功能:

a:3:{s:3:\"pic\";s:43:\"portal/201708/11/162125ya2qbke0ck8p3qp7.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上图div这个节点处于可编辑状态,编辑后,点击回车即可保存。

a:3:{s:3:\"pic\";s:43:\"portal/201708/11/162607ci947ki8bi9ylb9y.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

右击当前高亮节点,会弹出一个菜单(点击左侧三个点效果一样),可以有更多的操作。

操作非常简单,大家可以自行测试一下。

四.移动和删除节点:

拖动一个节点可以实现移动效果,在上图菜单中选择删除功能,可以删除当前节点。

五.设置DOM断点:

关于设置断点的更多操作可以参阅谷歌浏览器设置断点一章节。

下面介绍一下谷歌浏览器设置断点一章节没有涉及到操作。

Elements面板右侧有管理关于DOM断点的选项卡窗口:

a:3:{s:3:\"pic\";s:43:\"portal/201708/11/163828vec9bvww390ezabm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

右侧断点列表和DOM元素可以如下简单交互:

(1).将鼠标悬停在元素标识符上以显示元素在页面上的相应位置。

(2).单击元素以在Elements面板中选择它。

(3).切换复选框以启用或禁用断点。

当断点触发时,对应断点在DOM Breakpoints选项卡窗口突出显示,Call Stack显示调试器暂停原因。

六.元素事件监听器:

可以给元素注册事件处理函数,谷歌开发者工具能够对这些事件进行监听。

a:3:{s:3:\"pic\";s:43:\"portal/201708/11/164724uijugjjnur30lull.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

Event Listeners选项卡顶级选项显示已注册的事件类型。

点击事件类型旁边的箭头,可以看到已注册的事件处理程序的列表。每个处理程序由类似CSS选择器的元素标识符标识,例如document或button#call-to-action。如果同一个元素注册了多个处理程序,元素会被重复列出。

点击元素标识符旁边箭头查看事件处理程序的属性,Event Listeners选项卡窗口为每个侦听器列出以下属性:

(1).handler:包含一个回调函数。右键单击该函数并选择Show Function Definition(显示函数定义)以查看函数被定义在哪里(如果源代码可用)。

(2).useCapture:一个布尔值,说明是否在addEventListener上设置了useCapture标志。

七.查看祖先的事件监听器:

a:3:{s:3:\"pic\";s:43:\"portal/201708/11/165501eqm49rrmm3u2023s.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

选中Ancestors All复选框,除了当前选中节点的事件侦听器,还会显示当前选中节点的祖先元素的事件侦听器。

八.JavaScript框架监听器:

当前有很多JavaScript框架,例如jQuery会将DOM事件封装到自定义事件API中。

框架监听器可以很便利帮助我们定位事件处理函数实际绑定的位置:

a:3:{s:3:\"pic\";s:43:\"portal/201708/11/165938u9ho64bvpe4mh3pl.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

当取消勾选,事件侦听器代码可能会解析框架或库代码中的某处:

a:3:{s:3:\"pic\";s:43:\"portal/201708/11/170052xiafakk8al6iahjs.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-12-13 05:40 , Processed in 0.065757 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部