✨Chrome DevTools 使用指☞北 - 元素面板之DOM（查看和更改 DOM） 🔔

Anita_Sun
308 阅读5分钟

在网页开发的神秘宇宙里，Chrome DevTools 的元素面板犹如一艘功能强大的星际探索飞船，而 DOM（Document Object Model，文档对象模型）则是这个宇宙中各个星球（网页元素）的组织结构蓝图。让我们开启一场深入其中的奇妙之旅吧。

打开元素（Elements）面板 🌈

  • 默认打开开发者工具，元素面板会自动打开。还可以在页面任意位置上检查节点，让系统自动打开 Elements 面板

  • 使用命令菜单打开 Elements 面板

    • macOS：Command + Shift + P
    • Windows、Linux、ChromeOS：Ctrl + Shift + P

    image.png

查看 DOM 节点 🌈

检查节点 🐾

  • 右键你想要的 DOM 节点，选择检查（Inspect），系统将打开开发者工具的 Elements 面板，并自动定位到该元素

    image.png

    image.png

  • 也可以先打开开发者工具（F12），之后点击左上角的 Inspect 图标，然后选中你想要的元素

    image.png

    image.png

使用键盘浏览 DOM 树 🐾

  • 按 向上、向下 箭头，可以上下节点中来回移动

    image.png

  • 左箭头 可以收起列表

    image.png

  • 右箭头 可以展开列表

    image.png

滚动到视图中 🐾

  • 查看 DOM 树时，如果对某个不在视口内的节点感兴趣，右键这个节点，选择 Scroll into view

    image.png

显示标尺 🐾

  • 方法：

    • 按 Ctrl+Shift+P 或 Command+Shift+P (Mac) 打开命令菜单，输入 Show rulers on hover，然后按 Enter
    • 设置 > 偏好设置 > Elements > 悬停时显示标尺

    image.png

  • 在 Elements 面板中将鼠标悬停在某个元素上时，可以测量该元素的宽度和高度，标尺的尺寸单位是像素

    image.png

搜索节点 🐾

  • 按 Ctrl + F 或 Command + F (Mac)。 搜索栏会在 DOM 树底部打开，输入你想要的内容，按下 Enter 键就可以进行搜索啦，Elements 面板会选择 DOM 树中的第一个匹配结果，并将其滚动至视口的视图中，继续按下 Enter 键，滚动到下一个匹配的内容。and 搜索栏还支持 CSS 和 XPath 选择器。

    image.png

修改 DOM 🌈

  • 您可以即时修改 DOM，并查看这些更改对页面的影响

修改内容 🐾

  • 右键你想要修改的节点，然后选择检查。在 DOM 树中，双击你想要修改的内容，可以看到文本变为蓝色，表示已选中

    image.png

  • 将选中的内容修改为你想要的内容，然后按下 Enter 键确认更改

    image.png

修改属性 🐾

  • 选中你想要的节点，然后选择检查 image.png

  • 双击 h2，这些文字会突出显示，表示节点。输入 style="background-color:gold"，然后按 Enter 键，该节点的背景颜色会变成金色。 image.png

  • 还可以右键点击你想要的节点，然后选择 Edit attribute

    image.png

修改节点类型 🐾

  • 选择你想修改的节点，右键点击 检查

    image.png

  • 双击 h2，修改为 div，然后按下 Enter 键。<h2> 节点会更改为 <div> 节点。

    image.png

以 HTML 格式修改 🐾

  • 选择你想修改的节点，右键点击 检查。右击你要修改的节点，选择 Edit as HTML

    image.png

  • 输入你想要的内容，然后按 Ctrl / Command + Enter 即可应用更改

    image.png

复制节点 🐾

  • 选择你想修改的节点，右键点击 检查

    image.png

  • 右击你要修改的节点，选择 Duplicate element

    image.png

  • 返回该页面，列表项已立即复制

    image.png

  • 您也可以使用键盘快捷键：Shift + Alt + 向下键（Windows 和 Linux）和 Shift + Option + 向下键 (MacOS)

截取节点屏幕截图 🐾

  • 您可以使用捕获节点屏幕截图来对 DOM 树中的任何单个节点进行屏幕截图

    1. 右键点击此页面上的任意元素，然后选择 检查。

    2. 在 Elements 面板中，右键点击该元素，然后从下拉菜单中选择 Capture node screenshot

      image.png

对 DOM 节点重新排序 🐾

  • 右键点击此页面上的任意元素，然后选择 检查。拖动你想要移动的元素到合适的位置。

    image.png

  • 发现元素已经被移动了

    image.png

强制状态 🐾

  • 右键点击你想要的任意元素，然后选择 检查。右键点击此元素，选择 Force State，然后选择 :hover image.png

  • 会发现此元素处于 hover 状态 image.png

隐藏节点 🐾

  • 选择你想隐藏的元素，然后点击 H 键，会发现元素隐藏了，再次按下 H 键，发现元素又展现出来了

    image.png

    image.png

  • 也可以右键点击节点并使用隐藏元素选项

    image.png

删除一个节点 🐾

  • 按下 Delete 键可以删除节点。按 Ctrl + Z 或 Command + Z (Mac)，最后一个操作将撤消，节点会重新出现
  • 也可以右键点击节点，然后使用 Delete element 选项

在控制台中访问节点 🌈

  • DevTools 提供了一些快捷方式，以便您从控制台访问 DOM 节点，或获取 JavaScript 引用

使用 $0 引用当前选定的节点 🐾

  • 右键你想要的元素，选择检查。按下 ESC 键打开控制台抽屉式导航栏。输入 $0，然后按 Enter 键，打印出了当前的节点

    image.png

存储为全局变量 🐾

  • 如果您需要多次引用某个节点，请将其存储为全局变量。右键点击 DOM 树中你想要的元素，然后选择 Store as global variable

    image.png

  • 在控制台中输入 temp1，然后按 Enter 键。表达式的结果 表示该变量的求值结果是该节点

    image.png

复制 JS 路径 🐾

  • 右键点击你想要的元素，然后选择检查。右键点击 DOM 树中你想要的元素，然后选择 copy -> Copy JS Path，之后这个元素就已经被复制到剪切板了

    image.png

  • 在控制台点击 Ctrl + v，可以看到值就是所选择的元素

    image.png

avatar
文章
阅读
粉丝