赞
踩
大家好,文接上上回谷歌浏览器 | Chrome DevTools系统学习篇-概述,和上文谷歌浏览器 | Chrome DevTools系统学习篇-Device Mode。所谓“工欲善其事,必先利其器”,我们进一步来熟悉谷歌开发者工具。今天分享的是Elements元素,帮助您深入了解和调试网页的 HTML、CSS 和 JavaScript。
目录
Chrome DevTools 的 Elements 面板是一个非常强大的工具,可帮助您深入了解和调试网页的 HTML、CSS 和 JavaScript。以下是一些使用说明:
Elements面板中包括左边的html部分还有下方的层级结构,右边的css样式变、计算样式、布局、时间监听器、dom断点、属性。无障碍功能等。
在html中右键,可以做下面这些操作:
Add attribute 添加属性
Edit attribute 修改属性
Edit as HTML 以html格式修改
Duplicate Element 复制粘贴元素
Delete Element 删除元素
Cut 剪切
Copy 复制
复制元素
复制outerHTML
复制selector
复制JS路径
复制样式
复制XPath
复制完整的XPath
Paste 粘贴
Hide Element 隐藏元素
Force state 强制执行状态
:active
:hover
:focus
:visited
:focus-within
:focus-visible
Break on 发生中断条件
子树修改
属性修改
移除节点
Expand recursively递归展开
Collapse Children 收起子集
Captrue node screenshot 截图节点内容
Scroll into view 滚动到视图范围内
Focus 聚焦
标志设置
Store as global variable 存储为全局变量
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。