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

2018-9-10 13:54| 作者: admin| 查看: 1408| 评论: 0|来自: 蚂蚁部落

一.检查元素:

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

效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/10/140356fygeerx2ka6gsrwk.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/10/140608a0z50c0v4blr5k44.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

要审查"ES2015详细教程",在其上右击,选择弹出菜单中的"检查"。

效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/10/140823dpshxogmjz9mpcu8.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

二.跟踪面包屑:

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

截图演示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/10/135649l5z9wyylxyanq6ay.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

三.编辑DOM节点和属性:

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

a:3:{s:3:\"pic\";s:43:\"portal/201809/10/135656bssimz0555itttwi.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

a:3:{s:3:\"pic\";s:43:\"portal/201809/10/144105q4l700ra4g2f4bob.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

右击当前高亮节点,会弹出一个菜单(点击左侧红框中的三个点可以实现相同的操作)。

点击弹出菜单中的"Edit as HTML"可以实现HTML的编辑功能。

当然此菜单还有很多操作,感兴趣的朋友可以自行操作练习。

四.移动和删除节点:

通过鼠标拖动,可以将一个节点移动到指定位置。

在上面的图片的弹出菜单中选择删除功能,可以删除当前节点。

五.设置DOM断点:

切换到Elements选项卡,截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/10/151734ye1eq3eqz5f3isqe.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面进行断点设置:

a:3:{s:3:\"pic\";s:43:\"portal/201809/10/151942fz3becac35rbj5zt.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

a:3:{s:3:\"pic\";s:43:\"portal/201809/10/152044cqqikkjnhr9cih6q.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

(1).鼠标悬浮于右侧选项卡断点列表的元素标识上,选在左侧显示出此元素对应位置。

(2).点击右侧选项卡断点列表的元素标识上,会在左侧选中对应元素。

(3).选中或者取消选中复选框可以实现断点禁用和启用的切换。

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

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


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部