Chrome开发工具Elements面板(编辑DOM和CSS样式)详解

时间：2022-09-18 21:57:10

Element 译为“元素”，Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表，并且立即生效，避免了频繁切换浏览器和编辑器的麻烦。

我们可以使用Element面板来查看源代码，它不但可以很好的格式化DOM节点，清晰的展现HTML文档，还可以查看JavaScript创建的DOM节点和iframe中的DOM节点，比在当前网页中右击鼠标选择“查看网页源代码”强大很多。

总之，Element面板可以让我们很透彻的了解DOM和CSS的底层结构。

我们将以下面的HTML代码为例来详细了解Element面板：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5. <style type="text/css">
  6. h1{
  7. color: blue;
  8. }
  9. p{
  10. padding: 10px;
  11. border: 1px solid #ccc;
  12. }
  13. </style>
  14. <title>Chrome开发者工具演示</title>
  15. </head>
  16. <body>
  17. <div>
  18. <h1>JavaScript中文网</h1>
  19. <p>http://www.itxueyuan.org/javascript/</p>
  20. </div>
  21. </body>
  22. </html>

复制该代码，保存为demo.html并在Chrome浏览器中打开，按 Ctrl+Shift+C（Mac系统为Cmd+Shift+C）打开开发者工具并进入元素审查模式。

查看DOM树

打开Element面板，可以查看所有DOM节点，包括CSS和JavaScript，如下图所示，左侧为DOM树，右侧为CSS样式。

Chrome开发工具Elements面板(编辑DOM和CSS样式)详解
图 2.1  Element面板示例

图标说明：

  • 点击“图标1”，可以在新窗口中打开开发者工具，再次点击回到当前网页；
  • 点击“图标2”，可以调出控制台，可以在控制台里输入并执行JavaScript代码，查看当前网页的错误和日志等；
  • 点击“图标3”，可以选取当前页面的HTML元素。

选取DOM节点

点击“图标3”（由黑色变为蓝色），将鼠标移到网页中的某元素上面，该元素会发生变化如下图所示：

Chrome开发工具Elements面板(编辑DOM和CSS样式)详解
图 2.2  鼠标移动到网页中的元素

点击该元素，即可选中。这时，会发现Element面板中的DOM树发生了变化，如下图所示：

Chrome开发工具Elements面板(编辑DOM和CSS样式)详解
图 2.3  DOM树发生变化

选中的<p>节点在DOM树中被精确定位（蓝色背景），可以看到<p>节点的DOM层次（红色方框），在面板右侧，是<p>节点的CSS样式。

当然，也可以在Element面板的DOM树中选取DOM节点。将鼠标放到相应的DOM节点上，会发现网页中相应的节点也发生了变化（同图2.2），点击该节点，即可选中。

增加、删除和修改DOM节点

在Element面板中，选择DOM节点，在文本处右击鼠标，会弹出一个菜单，如下图所示：

Chrome开发工具Elements面板(编辑DOM和CSS样式)详解
图 2.4  DOM编辑菜单

菜单说明：

  • Edit text（编辑文本）：编辑该节点中的文本。也可以在文本处双击进行编辑。
  • Edit as HTML（编辑HTML）：编辑该节点及其子节点的所有HTML元素（包括节点中的文本）。
  • Copy as HTML（复制HTML）：复制该节点及其子节点的所有HTML元素（HTML文档）。
  • Copy XPath（复制XPath路径）：复制该节点的XPath路径，即DOM层次路径。例如，<p>节点的XPath路径为 /html/body/div/p 。
  • Delete node（删除节点）：删除该节点及其子节点的所有HTML元素。也可以使用 Backspace 和 Delete 键删除。
  • Inspect DOM properties（审查DOM属性）：在控制台中显示该节点的所有标准属性（如果有的话）。
  • Word wrap（自动换行）：HTML代码是否自动换行。

对 Inspect DOM properties（审查DOM属性）的说明：
为<p>节点添加id属性，如下：

  1. <p id="demo">http://www.itxueyuan.org/javascript/</p>

会在控制台输出p#demo；再向<p>节点添加class属性和name属性，如下：

  1. <p id="demo" class="demo" data="demo">http://www.itxueyuan.org/javascript/</p>

会在控制台输出p#demo.demo。

可见，控制台只会输出符合W3C标准的属性，不支持自定义属性。不过，实际开发中很少用到该功能。

另外，我们也可以通过拖动节点来改变节点的顺序，双击属性节点来改变它的值。

查看CSS样式

CSS样式审查面板是一个非常有用的面板，实际开发中，有时候CSS样式表会非常复杂，甚至连我们自己都不知道当前节点应用了哪些样式。使用CSS样式审查面板，可以让我们清楚地知道当前节点使用了哪些样式，分别来自哪些文件，哪些样式是被覆盖的，哪些样式是最终样式，哪些样式是无效的，等等。

如图2.3所示，选中节点，Element面板右侧的CSS样式审查面板会展示出该节点的CSS样式。

在CSS样式审查面板中，我们可以添加、删除和修改CSS样式。

另外，CSS审查面板中有几个子面板，如下图所示：

Chrome开发工具Elements面板(编辑DOM和CSS样式)详解
图 2.5  CSS样式审查面板的子面板

子面板说明：

  • Style（样式）：当前节点的样式；
  • Computed（计算）：查看当前节点经过计算后的样式以及盒模型数据；
  • Event Listeners（事件监听）：查看为当前节点绑定的事件和事件监听函数；
  • DOM Breakpoints（DOM断点）：查看为当前节点设置的DOM断点；
  • Properties（属性）：当前节点（对象）的所有属性。

【小技巧】使用键盘方向键改变数值
查看<p>节点的样式，如【图2.3】所示，选中 padding 的值，按下键盘方向键（<- 和 ->）数值会跟着改变，页面上<p>节点的样式也立刻改变。实际开发中，会经常使用该方法来微调元素的外边距、内补白和大小等，非常方便。

【小技巧】颜色拾取器
查看<p>节点的样式，如【图2.3】所示，选中 background-color 后边的小图标Chrome开发工具Elements面板(编辑DOM和CSS样式)详解，会弹出颜色拾取器，能够很方便的改变背景颜色，如下图所示：

Chrome开发工具Elements面板(编辑DOM和CSS样式)详解
图 2.6  颜色拾取器

实际开发中，会经常使用该方法来微调节点的颜色。

REFERENCE FROM : http://www.itxueyuan.org/view/6708.html

Chrome开发工具Elements面板(编辑DOM和CSS样式)详解的更多相关文章

  1. Chrome 开发工具之Console

    前段时间看git的相关,记的笔记也大致写到了博客上,还有些因为运用不熟,或者还有一些疑惑点,暂时也不做过多纠缠,之后在实践中多运用得出结论再整理分享吧. 工欲善其事,必先利其器.要想做好前端的工作,也 ...

  2. Chrome 开发工具指南

    Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 Ja ...

  3. Chrome 开发工具之Sources

    Sources面板主要用于查看web站点的资源列表及javascript代码的debug 熟悉面板 了解完面板之后,下面来试试这些功能都是如何使用的. 文件列表 展示当前页面内所引用资源的列表,和平常 ...

  4. chrome开发工具指南（六）

    检查和编辑页面与样式 使用 Chrome DevTools 的 Elements 面板检查和实时编辑页面的 HTML 与 CSS. 在 Elements 面板中检查和实时编辑 DOM 树中的任何元素. ...

  5. Chrome 开发工具之Timeline

    之前有说到Element,Console,Sources大多运用于debug,Network可用于debug和查看性能,今天的主角Timeline更多的是用在性能优化方面,它的作用就是记录与分析应用程 ...

  6. chrome开发工具指南（八）

    编辑 DOM Chrome DevTools 的 Elements 面板中的 DOM 树视图可以显示当前网页的 DOM 结构.通过 DOM 更新实时修改页面的内容和结构. DOM 定义您的页面结构.每 ...

  7. Chrome 开发工具之Timeline&sol;Performance

    之前有说到Element,Console,Sources大多运用于debug,Network可用于debug和查看性能,今天的主角Timeline(现已更名Performance)更多的是用在性能优化 ...

  8. Chrome 开发工具之 Memory

    开发过程中难免会遇到内存问题,emmm... 本文主要记录一下Chrome排查内存问题的面板,官网也有,但有些说明和例子跟不上新的版本了,也不够详细...   !!! 多图预警!!!    简单的内存 ...

  9. Chrome开发工具之Console

    Chrome开发工具-Console 看了别人的博客,才发现在百度主页用开发工具“Console”可以看到百度的招聘信息 前端调试工具可以按F12打开,谷歌的开发工具中的Console面板可以查看错误 ...

随机推荐

  1. HDU 5637 Transform 单源最短路

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5637 题意: http://bestcoder.hdu.edu.cn/contests/contes ...

  2. C&num;之回到了最初的起点----解决方案、项目、程序集、命名空间

    C#之回到了最初的起点----解决方案.项目.程序集.命名空间 ——Percy 初学者很容易把这些概念搞混淆.先说说项目(Project),通俗的说,一个项目可以就是你开发的一个软件.在.Net下,一 ...

  3. JS之正则表达式

    一.正则表达的目标: 1.使用表单事件和脚本函数实现表单验证 2.使用String对象和文本框控件常用属性和方法实现客户端验证 二.什么需要表单验证: 1.表单元素是否为空 2.用户名和密码 3.E- ...

  4. php 数组对象之间的转换

    在之前我写过php返回json数据简单实例 从5.2版本开始,PHP原生提供json_encode()和json_decode()函数,前者用于编码,后者用于解码. 一.json_encode() 1 ...

  5. Win32 CMD批处理命令

    1. win32批处理下,另开一个console执行进程X 使用start [/K|/C],示例: //------------------------------------------------ ...

  6. 20155228 实验四 Android开发基础

    20155228 实验四 Android开发基础 实验内容 1.基于Android Studio开发简单的Android应用并部署测试; 2.了解Android.组件.布局管理器的使用: 3．掌握An ...

  7. idea下maven项目打包

    近使用idea运行maven需要打包上传tomcat服务器.但是网上一直零零碎碎的....自己记录一下.以防后面忘记 1.idea中.file →Project Structure(快捷键Ctrl+S ...

  8. docker搭建私有registry

    搭建docker的私有registry 1.   registry简介 Docker在2015年推出了distribution项目,即Docker Registry 2.相比于old registry ...

  9. rails中常用的插件

    config.gem "acts-as-taggable-on", :version => '1.0.19' # tag类 config.gem "papercli ...

  10. SpringBoot无法启动，Process finished with exit code 0

    1.排查yml和properties文件是否配置错误 2.排查POM引入的包

相关文章