10、Examine and edit box model parameters
Examine and edit the current element's box model parameters using the Computed pane. All values in the box model are editable, just click on them.

注释

The concentric rectangles contain the top, bottom, left, right values for the current element's padding, border, and marginproperties.
For non-statically positioned elements, a position rectangle is also displayed, containing the values of the top, right, bottom, and left properties.

For position: fixed and position: absolute elements, the central field contains the actual offsetWidth × offsetHeight pixel dimensions of the selected element. All values can be modified by double-clicking them, like property values in the Styles pane. The changes are not, however, guaranteed to take effect, as this is subject to the concrete element positioning specifics.

 11、View local changes

 

注释

To view a history of live-edits made to your page:
    a、In the Styles pane, click on the file that you modified. DevTools takes you to the Sources panel.
    b、Right-click on the file.
    c、Select Local modifications.
To explore the changes made:
   a、Expand top-level file names to view the time time modification occurred a modification occurred.
   b、 Expand second-level items to view a diff (before and after) corresponding to the modification. A line with a pink background signifies a removal while a line with a green background signifies an addition.
12、查看css样式

CSS样式审查面板是一个非常有用的面板，实际开发中，有时候CSS样式表会非常复杂，甚至连我们自己都不知道当前节点应用了哪些样式。使用CSS样式审查面板，可以让我们清楚地知道当前节点使用了哪些样式，分别来自哪些文件，哪些样式是被覆盖的，哪些样式是最终样式，哪些样式是无效的，等等。
如下图所示，选中节点，Element面板右侧的CSS样式审查面板会展示出该节点的CSS样式。在CSS样式审查面板中，我们可以添加、删除和修改CSS样式。另外，CSS审查面板中有几个子面板，如下图所示：

注释

子面板说明：

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

小结

Element 译为“元素”，Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表，并且立即生效，避免了频繁切换浏览器和编辑器的麻烦。 我们可以使用Element面板来查看源代码，它不但可以很好的格式化DOM节点，清晰的展现HTML文档，还可以查看JavaScript创建的DOM节点和iframe中的DOM节点，比在当前网页中右击鼠标选择“查看网页源代码”强大很多。 总之，Element面板可以让我们很透彻的了解DOM和CSS的底层结构。

二、Console面板

概述

定义：Use the Console API to write information to the console, create JavaScript profiles, and start a debugging session.

译文:使用Console API向控制台输出信息，产生JavaScript文件和启动调试会话。

The Console

The console offers a way to inspect and debug your webpages. Think of it as the Terminal of your web content. The console has access to the DOM and JavaScript of the open page. Use the console as a tool to modify your web content via interactive commands and as a teaching aid to expand your knowledge of JavaScript. Because an object’s methods and properties autocomplete as you type, you can see all available functions that are valid in Safari.For example, open the console and type $$(‘p’)[1]. ($$ is shorthand for document.querySelectorAll—see more shorthand commands in Table 5-1.) Because this paragraph is the second instance of the p element on this page ([1] in a 0-based index), the node represents this paragraph. As you hover over the node, its position on the page is visibly highlighted. You can expand the node to see its contents, and even press Command-C to copy it to your clipboard.

Command-Line API