来源于:https://developers.google.com/web/tools/chrome-devtools/inspect-styles/edit-dom

The DOM tree view in the Chrome DevTools Elements panel displays the DOM structure of the current web page. Live-edit the content and structure of your page through DOM updates.

TL;DR

  • The DOM defines your page structure. Each DOM node is a page element, for example, a header node, paragraph node.
  • Live-edit the content and structure of your pages through the rendered DOM.
  • But remember, you can't modify source files through DOM changes in the Elements panel. Reloading the page erases any DOM tree modifications.
  • Watch for changes to the DOM using DOM breakpoints.

Inspect an element

Use the Elements panel to inspect all elements in your page in one DOM tree. Select any element and inspect the styles applied to it.

There are several ways to inspect an element:

Right-click any element on the page and select Inspect.

Press Ctrl + Shift + C (Windows) or Cmd + Shift + C (Mac) to open DevTools in Inspect Element mode, then hover over an element. DevTools automatically highlights the element that you are hovering over in the Elements panel. Click on the element to exit inspect mode while keeping the element highlighted within the Elements panel.

Click the Inspect Element button  to go into Inspect Element Mode, then click on an element.

Use the inspect method in the console, such as inspect(document.body).

Navigate the DOM

Navigate through the DOM structure using your mouse or keyboard.

A collapsed node has an arrow next to it pointing right: 

An expanded node has an arrow next to it pointing down: 

Using your mouse:

  • Click once to highlight a node.
  • To expand a node, double-click anywhere on it or click on the arrow next
    to it.
  • To collapse a node, click on the arrow next to it.

Using your keyboard:

  • Press the Up Arrow key to select the node above the current one.
  • Press the Down Arrow to select the node below the current one.
  • Press the Right Arrow key to expand a collapsed node. Press it again to move to the first child of the (now-expanded) node. You can use this technique to quickly navigate deeply-nested nodes.

Navigate the breadcrumb trail

At the bottom of the Elements panel is a breadcrumb trail.

The currently selected node is highlighted in blue. The node to the left is the current node's parent. And to the left of that is the parent's parent. And so on, all the way up the tree.

Navigating back up the structure moves the highlight:

DevTools displays as many items as possible in the trail. If the entire trail doesn't fit in the status bar, an ellipsis (...) shows where the trail has been truncated. Click the ellipsis to show the hidden elements:

Edit DOM nodes and attributes

To edit a DOM node name or attribute:

  • Double-click directly on the node name or attribute.
  • Highlight the node, press Enter, and then press Tab until the name or attribute is selected.
  • Open the more actions menu and select Add Attribute or Edit AttributeEdit Attribute is context-sensitive; the portion you click on determines what gets edited.

The closing tag is automatically updated when you're finished.

Edit DOM node and its children as HTML

To edit a DOM node and its children as HTML:

  • Open the more actions menu and select Edit as HTML.
  • Press F2 (Windows / Linux) or Fn+F2 (Mac).
  • Press Ctrl+Enter (Windows / Linux) or Cmd+Enter (Mac) to save your changes.
  • Press Esc to exit the editor without saving.

Move DOM node

Click, hold, and drag a node to move it.

Delete DOM node

To delete a DOM node:

  • Open the more actions menu and select Delete Node.
  • Select the node and press the Delete key.

Note: If you delete a node by accident, Ctrl + Z (or Cmd + Z on Mac) to undo your last action.

Show more actions menu

The more actions menu lets you interact with a DOM node in a variety of ways. To view the menu, right-click on a node, or select a node and then press the more actions button ()). The button is only displayed on the currently selected element.

Scroll into view

When you hover over or select a DOM node, the rendered node is highlighted in the viewport. If the node is scrolled offscreen, you'll see a tooltip at the top of the viewport if the node is above the current viewport, and a tooltip at the bottom if the node is below the current viewport. For example, in the screenshot below DevTools is indicating that the currently selected element in the Elements panel is below the viewport.

To scroll the page so the node appears in the viewport, Right-click the node and select Scroll into View.

Set DOM breakpoints

Set DOM breakpoints to debug complex JavaScript applications. For example, if your JavaScript is changing the styling of a DOM element, set a DOM breakpoint to fire when the element's attributes are modified. Trigger a breakpoint on one of the following DOM changes: subtree change, attribute change, node removal.

Subtree Modifications

A subtree modification breakpoint is triggered when a child element is added, removed, or moved. For example, if you set a subtree modification breakpoint on the main-content element, the following code triggers the breakpoint:

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

Attribute Modifications

An attribute modification occurs when the attribute of an element (class, id, name) is changed dynamically:

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

Node Removal

A node removal modification is triggered when the node in question is removed from the DOM:

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

Interact with DOM breakpoints

The Elements and Sources panels both include a pane for managing your DOM breakpoints.

Each breakpoint is listed with an element identifier and the breakpoint type.

Interact with each listed breakpoint in any of the following ways:

  • Hover over the element identifier to show the element's corresponding position on the page (similar to hovering over nodes in the Elements panel).
  • Click an element to select it in the Elements panel.
  • Toggle the checkbox to enable or disable the breakpoint.

When you trigger a DOM breakpoint, the breakpoint is highlighted in the DOM Breakpoints pane. The Call Stack pane displays the reason for a debugger pause:

View element event listeners

View JavaScript event listeners associated with a DOM node in the Event Listeners pane.

The top-level items in the Event Listeners pane show the event types that have registered listeners.

Click the arrow next to the event type (for example click) to see a list of registered event handlers. Each handler is identified by a CSS selector-like element identifier, such as document orbutton#call-to-action. If more than one handler is registered for the same element, the element is listed repeatedly.

Click the expander arrow next to an element identifier to see the properties of the event handler. The Event Listeners pane lists the following properties for each listener:

Event Listener Properties & Description
handler Contains a callback function. Right-click on the function and select Show Function Definition to view where the function is defined (if source code is available).
useCapture A boolean value stating whether the useCapture flag on addEventListenerwas set.

Note: Many Chrome extensions add their own event listeners onto the DOM. If you see a number of event listeners that aren't set by your code, you may want to reopen your page in an Incognito window. Incognito windows prevent extensions from running by default.

View ancestor event listeners

When the Ancestors checkbox is enabled, the event listeners for the ancestors of the currently selected node are displayed, in addition to the currently selected node's event listeners.

When the checkbox is disabled, only the event listeners for the currently selected node are displayed.

View framework listeners

Some JavaScript frameworks and libraries wrap native DOM events into their custom event APIs. In the past this made it hard to inspect the event listeners with DevTools, because the function definition would just reference back to the framework or library code. The Framework listeners feature solves this problem.

When the Framework listeners checkbox is enabled, DevTools automatically resolves the framework or library wrapping portion of the event code, and then tells you where you actually bound the event in your own code.

When the Framework listeners checkbox is disabled, the event listener code will probably resolve somewhere in the framework or library code.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

chrome编辑DOM的更多相关文章

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

    Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦. 我们可以使用Element面板来查看源代码,它不 ...

  2. Chrome编辑了样式或者JS之后自动同步回本地工程

    比如我用HBuilder进行调试,在Chrome上修改了几个样式,我们通常的做法是,拷贝修改后的地方,然后再进行覆盖. 现在有了全自动的操作,在Chrome上修改了样式之后,通过Sources的Sav ...

  3. 从Chrome源码看浏览器如何构建DOM树

    .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } p { font-size: 1 ...

  4. Chrome开发者工具详解(1)-Elements、Console、Sources面板

    Chrome开发者工具详解(1)-Elements.Console.Sources面板 Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Netwo ...

  5. Chrome开发者工具详解(1)

    Chrome开发者工具面板 面板上包含了Elements.Console.Sources.Network.Timeline.Profiles.Application.Security.Audits这些 ...

  6. Chrome 开发工具指南

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

  7. Chrome开发者工具详解(1):Elements、Console、Sources面板

    Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Se ...

  8. 详解Google Chrome浏览器(操作篇)(一)

    开篇概述 在上篇博客中详解Google Chrome浏览器(理论篇)一文中,主要讲解了Chrome 搜索引擎使用.Chrome安装和基本操作.Chrome 基本架构.多线程等原理性问题,这篇将重点讲解 ...

  9. Chrome DevTools 调研笔记

    1  说明 此篇文章针对Chrome DevTools常用功能进行调研分析.描述了每个功能点能实现的功能.应用场景和详细操作. 2  Elements 2.1  功能 检查和实时更新页面的HTML与C ...

随机推荐

  1. STM32 DMA USART ADC

    转载自:http://www.cnblogs.com/UQYT/articles/2949794.html 这是一个综合的例子,演示了ADC模块.DMA模块和USART模块的基本使用. 我们在这里设置 ...

  2. Log4Net根据不同的Logger名称,生成日志文件到不同的地方。

    1.定义日志记录类 1: public class Log4NetLogger : ISystemLogger 2: { 3: static log4net.ILog securityLogger = ...

  3. C++类成员函数的重载、覆盖和隐藏区别?

    C++类成员函数的重载.覆盖和隐藏区别? a.成员函数被重载的特征:(1)相同的范围(在同一个类中):(2)函数名字相同:(3)参数不同:(4)virtual 关键字可有可无.b.覆盖是指派生类函数覆 ...

  4. 我要好offer之 二叉树大总结

    一. 二叉树定义 二叉树具有天然的递归特性,凡是二叉树相关题,首先应该联想到递归 struct BinTreeNode { BinTreeNode* left; BinTreeNode* right; ...

  5. NYOJ-取石子(二)

    取石子(二) 时间限制:3000 ms  |  内存限制:65535 KB 难度:5 描述 小王喜欢与同事玩一些小游戏,今天他们选择了玩取石子. 游戏规则如下:共有N堆石子,已知每堆中石子的数量,并且 ...

  6. u3d_Shader_effects笔记2 自定义surfaceDiffuseLight

    1.前面的心情 今晚7点半睡着后,9点半左右被吵醒.醒来后非常失落,感觉人生到底在追求什么,我又在追求什么.昨晚梦到妈妈了.最近不时会想到爷爷的去世.人世的险恶,良心的缺失.不过一切总要向前看,至少我 ...

  7. 父元素与子元素之间的margin-top问题

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码: <div c ...

  8. 怎样使用nat和桥接方式解决虚拟机联网问题

    对于很多的linux初学者来说,最开始学习linux时通常是在虚拟机上进行的,然而对于新手来说虚拟机联网会对他们来说是比较困难的.这里我根据自己的经验写了一篇文档分享给大家.下面对几种连接方式进行简单 ...

  9. 如何在Eclipse和Tomcat的Debug过程中启用热部署

    参考的地址是 http://blog.redfin.com/devblog/2009/09/how_to_set_up_hot_code_replacement_with_tomcat_and_ecl ...

  10. How to regress out unwanted vectors

    Source: http://stats.stackexchange.com/questions/117840/how-to-regress-out-some-variables Answer in ...