开篇概述

在上篇博客中详解Google Chrome浏览器（理论篇）一文中，主要讲解了Chrome 搜索引擎使用、Chrome安装和基本操作、Chrome 基本架构、多线程等原理性问题，这篇将重点讲解Chro-me实操问题，主要结合“Chrome 主调试面板“,对Chrome,Elements,Con-sole,Sources,NetWork,TimeLine,Profiles,Application,Security,Audits进行详解。若对广大读者朋友有所帮助，我将不胜感激。本篇博文主要从 当然了，在阅读本篇文章前，强烈建议大家先阅读详解Google Chrome浏览器（理论篇）一文。如此，对本篇文章的理解，也许会更加容易些。

温故而知新

1、Chrome基本架构图和Chrome主调试面板

 2、Chrome DevTools 调试面板简要介绍

正文

一、Elements面板

概述

定义： Inspect and Edit Pages and Styles by Elements panel，but also effective immediately.

译文：通过Elements 面板，不仅仅可以查看和编辑页面和样式，而且所做的改变立即生效。

详解

第一部份：操作DOM

1、查看DOM树

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

 

2、选取DOM节点

将鼠标移到网页中的某元素上面，该元素会发生变化如下图所示：

 

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

注释：

选中的p节点在DOM树中被精确定位（蓝色背景），可以看到p节点的DOM层次（红色方框），在面板右侧，是p节点的CSS样式。当然，也可以在Element面板的DOM树中选取DOM节点。将鼠标放到相应的DOM节点上，会发现网页中相应的节点也发生了变化,点击该节点，即可选中。

4、增加、删除和修改DOM节点

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

 注释

 a、Edit text：编辑该节点中的文本。也可以在文本处双击进行编辑。

 b、Edit as HTML：编辑该节点及其子节点的所有HTML元素（包括节点中的文本）。

 c、Copy：复制 。(比较简单，这里就不论述了)

 (1)Copy outerHTML

 (2)Copy selector

 (3)Copy XPath

 (4)cut element

 (5)Copy element

 (6)Paste element

 d、Hide element:隐藏元素，让其不在页面显示。

 e、Delete element:删除元素。

 f、Expand all:展开指定节点及其所有子节点。

 g、Collapse all:收缩指定节点及其所有子节点。

5、拖动节点，改变节点顺序。

6、为节点添加属性

为<p>节点添加id属性，如下：

<pid="demo"></p>

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

<pid="demo"class="demo"data="demo"></p>

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

7、Inspect and live-edit the HTML and CSS of a page using the Chrome DevTools Elements panel.

 注释

   a、Inspect and edit on the fly any element in the DOM tree in the Elements panel.
   b、 View and change the CSS rules applied to any selected element in the Styles pane.
   c、View and edit a selected element's box model in the Computed pane.
   d、View any changes made to your page locally in the Sources panel.           
8、Live-edit a DOM node
To live-edit a DOM node, simply double-click a selected element and make changes:

注释

The DOM tree view shows the current state of the tree; it may not match the HTML that was originally loaded for different reasons. For example, you can modify the DOM tree using JavaScript; the browser engine can try to correct invalid author markup and produce an unexpected DOM.
9、Live-edit a style
Live-edit style property names and values in the Styles pane. All styles are editable, except the ones that are greyed out (as is the case with user agent stylesheets).
To edit a name or value, click on it, make your changes, and press Tab or Enter to save the change.

 

By default, your CSS modifications are not permanent, changes are lost when you reload the page. Set up persistent authoring if you want to persist your changes between page loads.