编辑 DOM

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

  • DOM 定义您的页面结构。每一个 DOM 节点都是一个页面元素,例如,标题节点或段落节点。
  • 通过渲染的 DOM 实时编辑页面的内容和结构。
  • 不过请记住,您无法在 Elements 面板中通过 DOM 更改修改源文件。重新加载页面会清空任何 DOM 树修改。
  • 使用 DOM 断点留意 DOM 更改。

检查元素

使用 Elements 面板可以在一个 DOM 树中检查页面中的所有元素。 选择任何元素并检查应用到该元素的样式。

可以通过多种方式检查元素:

右键点击页面上的任何元素并选择 Inspect

按 Ctrl + Shift + C (Windows) 或 Cmd + Shift + C (Mac),在 Inspect Element 模式下打开 DevTools,然后将鼠标悬停到某个元素上。 DevTools 会在 Elements 面板中自动突出显示您悬停的元素。点击元素可以退出检查模式,同时保持元素在 Elements 面板中处于突出显示状态。

点击 Inspect Element 按钮  转到 Inspect Element 模式,然后点击元素。

在控制台中使用 inspect 方法,例如 inspect(document.body)

DOM 导航

使用鼠标:

  • 点击一次可以突出显示节点。
  • 要展开节点,请双击节点上的任何地方,或者点击节点旁边的箭头。
  • 要折叠节点,请点击节点旁边的箭头。

使用键盘:

  • 向上箭头键可以选择当前节点上方的节点。
  • 向下箭头可以选择当前节点下方的节点。
  • 向右箭头键可以展开折叠的节点。再按一次可以移动到(已展开)节点的第一个子级。 您可以使用此方法快速导航到深度嵌套的节点。

面包屑导航记录导航

Elements 面板的底部是面包屑导航记录。

编辑 DOM 节点和属性

要编辑 DOM 节点名称或属性,请执行以下操作:

  • 直接在节点名称或属性上双击。
  • 突出显示节点,按 Enter,然后按 Tab, 直到选中名称或属性。
  • 打开 more actions 菜单 并选择 Add Attribute 或 Edit Attribute。 Edit Attribute 取决于上下文;您点击的部分决定要编辑的内容。

以 HTML 形式编辑 DOM 节点及其子级

要以 HTML 形式编辑 DOM 节点及其子级,请执行以下操作:

  • 打开 more actions 菜单并选择 Edit as HTML
  • 按 F2 (Windows / Linux) 或 Fn+F2 (Mac)。
  • 按 Ctrl+Enter (Windows / Linux) 或 Cmd+Enter (Mac) 保存更改。
  • 按 Esc 可以退出编辑器而不保存。

移动 DOM 节点

点击、按住并拖动节点可将其移动。

删除 DOM 节点

要删除 DOM 节点,请执行以下操作:

注:如果您意外删除了节点,按 Ctrl + Z(Mac 上为 Cmd + Z)可以撤消您的上一步操作。

显示 more actions 菜单

利用 more actions 菜单,您可以通过多种方式与 DOM 节点交互。 要查看该菜单,请右键点击节点,或者选择节点,然后按 more actions 按钮 ())。按钮仅在当前选定的元素上显示。

滚动到视图

悬停或选择 DOM 节点时,渲染的节点将在视口中突出显示。 如果节点滚动到屏幕以外,在节点位于当前视口上方时您将在视口顶部看到提示,而在节点位于当前视口下方时,您将在底部看到提示。例如,在下方的屏幕截图中,DevTools 指出 Elements 面板中当前选定的节点位于视口以下。

要滚动页面使节点在视口中显示,请右键点击节点并选择 Scroll into View

设置 DOM 断点

设置 DOM 断点以调试复杂的 JavaScript 应用。例如,如果您的 JavaScript 正在更改 DOM 元素的样式,请将 DOM 断点设置为在元素属性修改时触发。在发生以下一种 DOM 更改时触发断点:子树更改、属性更改、节点移除。

子树修改

添加、移除或移动子元素时将触发子树修改断点。例如,如果您在 main-content 元素上设置子树修改,以下代码将触发断点:

 
var element = document.getElementById('main-content');
//modify the element's subtree.
var mySpan = document.createElement('span');
element.appendChild( mySpan );

属性修改

动态更改元素的属性 (class, id, name) 时将发生属性修改:

 
var element = document.getElementById('main-content');
// class attribute of element has been modified.
element.className = 'active';

节点移除

从 DOM 中移除有问题的节点时将触发节点移除修改:

 
document.getElementById('main-content').remove();

与 DOM 断点交互

Elements 和 Sources 面板均包含一个用于管理 DOM 断点的窗格。

每个断点都会列出元素标识符和断点类型。

可通过以下方式之一与列出的每一个断点交互:

  • 悬停在元素标识符上可以显示元素在页面上的相应位置(类似于在 Elements 面板中悬停在节点上)。
  • 点击元素可以将其在 Elements 面板中选中。
  • 切换复选框可以启用或停用断点。

触发 DOM 断点时,断点将在 DOM Breakpoints 窗格中突出显示。 Call Stack 窗格将显示调试程序暂停的原因

查看元素事件侦听器

在 Event Listeners 窗格中查看与 DOM 节点关联的 JavaScript 事件侦听器。

Event Listeners 窗格中的顶级项目将显示具有已注册侦听器的事件类型。

点击事件类型(例如 click)旁的箭头可以查看已注册事件处理程序的列表。 每个处理程序都由一个类似于 CSS 选择器的元素标识符标识,例如 document 或 button#call-to-action。如果已为相同元素注册多个处理程序,将重复列示元素。

点击元素标识符旁的展开箭头可以查看事件处理程序的属性。Event Listeners 窗格将列出每个侦听器的以下属性:

事件侦听器属性和说明
handler 包含一个回调函数。右键点击函数并选择 Show Function Definition 可以查看函数的定义位置(如果源代码可用)。
useCapture 指示 addEventListener 上的 useCapture 标志是否设置的布尔值。

注:许多 Chrome 扩展程序都会将其自己的事件侦听器添加到 DOM 上。如果您看到一些不是由您的代码设置的事件侦听器,您可能希望在隐身窗口中重新打开页面。默认情况下,隐身窗口会阻止扩展程序运行。

查看祖先实体事件侦听器

如果启用 Ancestors 复选框,除了当前选定节点的事件侦听器外,还会显示其祖先实体的事件侦听器。

如果停用复选框,将仅显示当前选定节点的事件侦听器。

查看框架侦听器

启用 Framework listeners 复选框时,DevTools 会自动解析事件代码的框架或内容库封装部分,然后告诉您实际将事件绑定到代码中的位置。

如果停用 Framework listeners 复选框,事件侦听器代码很可能会在框架或内容库代码的其他地方解析。

chrome开发工具指南(八)的更多相关文章

  1. Chrome 开发工具指南

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

  2. chrome开发工具指南(一)

    注意:如果你是一个网页开发者同时想要获得最新版本的开发工具,那么你应该使用谷歌浏览器(金丝雀)Canary 版. Chrome 开发者工具 打开Chrome 开发者工具 选择浏览器位于浏览器窗口右上方 ...

  3. chrome开发工具指南(二)

    Application 面板 使用 App Manifest 窗格检查您的网络应用清单和触发 Add to Homescreen 事件. 使用 Service Worker 窗格执行与服务工作线程相关 ...

  4. chrome开发工具指南(十四)

    模拟和测试其他浏览器 您的任务不只局限于确保网站在 Chrome 和 Android 上出色运行.即使 Device Mode 可以模拟 iPhone 等多种其他设备,我们仍鼓励您查看其他浏览器模拟解 ...

  5. chrome开发工具指南(十二)

    使用 Device Mode 模拟移动设备 使用 Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站.了解如何使用 Device Mode 模拟多种设备及其 ...

  6. chrome开发工具指南(七)

    检查动画 使用 Chrome DevTools 动画检查器检查和修改动画. 通过打开动画检查器捕捉动画.检查器会自动检测动画并将它们分类为多个组. 通过慢速播放.重播或查看动画源代码来检查动画. 通过 ...

  7. chrome开发工具指南(六)

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

  8. chrome开发工具指南(十三)

    模拟传感器:地理定位与加速度计 由于大多数桌面设备都没有 GPS 芯片和加速度计,所以测试它们比较困难.Chrome DevTools 的 Sensors 模拟窗格可以通过模拟常见的移动设备传感器来降 ...

  9. chrome开发工具指南(十一)

    检查资源 使用 Application 面板的 Frames 窗格可以按框架组织资源. 您也可以在 Sources 面板中停用 Group by folder 选项,按框架查看资源. 要按网域和文件夹 ...

随机推荐

  1. C#多线程之旅(7)——终止线程

    先交代下背景,写<C#多线程之旅>这个系列文章主要是因为以下几个原因:1.多线程在C/S和B/S架构中用得是非常多的;2.而且多线程的使用是非常复杂的,如果没有用好,容易造成很多问题.   ...

  2. LNMP环境的安装

    一.LNMP的安装 1.准备工作 #清理已经安装包 rpm -e httpd rpm -e mysql rpm -e php yum -y remove httpd yum -y remove mys ...

  3. PHP appserv + ZendStudio12.5.1 + 注册码

    PHP软件安装  百度云盘 安装激活破解ZendStudio12.05(注册码)     Zend Studio 配置 apache server

  4. git分支管理之Feature分支

    软件开发中,总有无穷无尽的新的功能要不断添加进来. 添加一个新功能时,你肯定不希望因为一些实验性质的代码,把主分支搞乱了,所以,每添加一个新功能,最好新建一个feature分支,在上面开发,完成后,合 ...

  5. Git时光机穿梭之版本回退

    现在,你已经学会了修改文件,然后把修改提交到Git版本库,现在,再练习一次,修改readme.txt文件如下: Git is a distributed version control system. ...

  6. ASP.NET Core 源码学习之 Logging[4]:FileProvider

    前面几章介绍了 ASP.NET Core Logging 系统的配置和使用,而对于 Provider ,微软也提供了 Console, Debug, EventSource, TraceSource ...

  7. C++ Socket学习记录 -2

    WinSock TCP 编程流程 TCP通信,就像是固定电话,首先是要安装基站,然后是将电话号绑定到电话,然后拨号,接通之后说事,完事之后还要挂电话(甭管谁先挂). 1.初始化环境 使用函数 int ...

  8. leetcode——262. Trips and Users

    The Trips table holds all taxi trips. Each trip has a unique Id, while Client_Id and Driver_Id are b ...

  9. Javacript的变量和输出

    一.js使用的三种方式 1.在HTML标签中,直接内嵌js(并不提倡使用): >>不符合W3C内容与表现分离的要求!!! 2.在HTML页面中使用<script></sc ...

  10. vue.js实现瀑布流之vue-waterfall-easy

    想必大家应该很多都已经习惯了jquery的DOM操作,jquery的瀑布流实现起来也很容易. 但是,随着时代的发展,随着时代的进步..... 算了算了,扯远了,既然能找到这儿来,肯定是在vue.js上 ...