浅谈Google Chrome浏览器（操作篇）（上）

开篇概述

在上篇博客中详解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">http://www.itxueyuan.org/javascript/</p>

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

<pid="demo"class="demo"data="demo">http://www.itxueyuan.org/javascript/</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.

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

You can inspect HTML nodes and JavaScript objects in more detail by using the console commands listed in Table 5-1. Type the command-line APIs interactively within the console.
If your scripts share the same function name as a Command-Line API function, the function in your scripts takes precedence.

The functions listed in Table 5-1 are regular JavaScript functions that are part of the Web Inspector environment. That means you can use them as you would any JavaScript function. For example, you can assign a chain of Console API commands to a variable to create a useful shorthand. Listing 5-1 shows how you can quickly see all event types attached to the selected node.

After defining this function, inspect the magnifying glass in the top-right corner of this webpage, and type evs() in the console. An array containing the string “click” is returned, because there is a click event listener attached to that element.
Of course, these functions shouldn’t be included in your website’s JavaScript files because they are not available in the browser environment. Only use these functions in the Web Inspector console. Console functions you can include in your scripts are described in Console API.

Console API

详解

1、console.assert(expression, object)

定义：Writes an error to the console when the evaluated expression is false.

译文：当计算表达式为假时，向控制台输出错误信息。

示例1：

function greaterThan(a,b) {
  console.assert(a > b, {"message":"a is not greater than b","a":a,"b":b});
}
greaterThan(5,6);

result:

示例2：

var isFalse=false;
console.assert(isFalse,"Output Info when evaluated expression is false");

result:

2、console.clear()

定义：Clears the console.If the Preserve log checkbox is enabled, console.clear() is disabled. However, pressing the clear console button () or typing the shortcut Ctrl+L while the Console is in focus still works.See Clearing the console for more information.

译文：清楚控制台信息。如果保护日志复选框被启用，则console.clear()被禁用。然而,当控制台的焦点仍在工作时，按明确的控制台按钮(明确控制台按钮)或输入快捷键Ctrl + L。

3、console.count(label)

定义：Writes the the number of times that count() has been invoked at the same line and with the same label.

译文：输出被调用相同的行和相同的标签的总次数。

示例1：

function login(name) {
  console.count(name + ' logged in');
}

result:

4、console.debug(object [, object, ...])

定义：Identical to console.log().

译文：与console.log()一样;

小结：功能与console.log()一样。

5、console.dir(object)

定义：Prints a JavaScript representation of the specified object. If the object being logged is an HTML element, then the properties of its DOM representation are printed.

译文：打印具体对象的JavaScript表示。如果被记录的对象是一个HTML元素,然后打印DOM表示的属性。

示例1：

console.dir(document)

result:

6、console.dirxml(object)

定义：Prints an XML representation of the descendant elements of object if possible, or the JavaScript representation if not. Calling console.dirxml() on HTML and XML elements is equivalent to calling console.log().

译文：如果可能，打印对象的后代元素的XML表示，如果不可能，则打印javaScript表示。对于html和xml元素，调用console.dirxml()相当于调用console.log();

示例1：

console.dirxml(obj)

result:

示例2：

console.dir(document)；

result:

示例3：

console.log(document)；

rersult:

7、console.error(object [, object, ...])

定义：Prints a message similar to console.log(), styles the message like an error, and includes a stack trace from where the method was called.

译文：打印一条类似于console.log()打印的消息,错误样式和包括堆栈跟踪。

示例1：

function logName(obj){
    if(obj.name==undefined){
      console.error('name is undefined')
  }
}

logName({});

result:

示例2：

console.error('print error Information');

result:

8、console.group(object[, object, ...])

定义：Starts a new logging group with an optional title. All console output that occurs after console.group() and before console.groupEnd() is visually grouped together.

译文：开始一个带有可选标题的日志组。所有控制台输出的内容被包含在以console.group()开始和以consol.groupEnd()结束之间。

示例1：

function name(obj) {
  console.group('name');
  console.log('first: ', obj.first);
  console.log('middle: ', obj.middle);
  console.log('last: ', obj.last);
  console.groupEnd();
}

name({"first":"Wile","middle":"E","last":"Coyote"});

result:

示例2：

function name(obj) {
  console.group('name');
  console.log('first: ', obj.first);
  console.log('middle: ', obj.middle);
  console.log('last: ', obj.last);
  console.groupEnd();
}

function doStuff() {
  console.group('doStuff()');
  name({"first":"Wile","middle":"E","last":"coyote"});
  console.groupEnd();
}

doStuff();

result:

9、console.groupCollapsed(object[, object, ...])

定义：Creates a new logging group that is initially collapsed instead of open.

译文：创建一个新的初始化倒塌而不是开放的日志组。

示例：

console.groupCollapsed('status');
console.log("peekaboo, you can't see me");
console.groupEnd();

result:

10、console.groupEnd()

定义：Closes a logging group. See console.group for an example.

译文：创建日志组。以console.group()作为例子。

11、console.info(object [, object, ...])

定义：Prints a message like console.log() but also shows an icon (blue circle with white "i") next to the output.

译文：不仅打印一条像console.log()一样的消息，而且也显示了一个紧挨着输出结果的图标(带有"i"的蓝色圈)。

示例：

console.info('带有"i"的蓝色圈')

result:

12、console.log(object [, object, ...])

定义：Displays a message in the console. Pass one or more objects to this method.Each object is evaluated and concatenated into a space-delimited string.

译文：将消息显示在控制台。将一个或多个对象传递给这个方法。每个队对象被计算成和连接成一个空格分隔字符串。

示例：

console.log('Hello, Logs!');

result:

13、console.marktimeline()

已经被弃用，已被console.timeStamp替换。

示例：

console.markTimeline();

result:

14、console.profile([label])

定义：Starts a JavaScript CPU profile with an optional label. To complete the profile, call console.profileEnd(). Each profile is added to the Profiles panel.

译文：开始一个带有可选标签的JavaScript CPU性能分析。以console.profileEnd()作为整个性能分析结束的标记。每次性能分析结果被附加到性能分析面板。

示例：

function processPixels() {
  console.profile("processPixels()");
  // later, after processing pixels
  console.profileEnd();
}

processPixels();

result:

15、console.profileEnd()

定义：Stops the current JavaScript CPU profiling session if one is in progress and prints the report to the Profiles panel.See console.profile() for an example.

译文：如果性能分析进行中和把分析报告打印到性能分析面板，停止当前的JavaScript CPU性能分析会话 。以console.profile作为一个例子。

16、console.table()

定义：displays  the data in a table form.The data argument may be an array or an object.

译文：将数据以表格形式打印出。数据参数可能为一个数组，也可能为一个对象。

示例1：

// an array of strings

console.table(["apples", "oranges", "bananas"]);

result:

示例2：

// an object whose properties are strings

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var me = new Person("John", "Smith");

console.table(me);

result:

示例3：

// an array of arrays

var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
console.table(people);

result:

示例4：

// an array of objects

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");

console.table([john, jane, emily]);

result:

示例5：

// an object whose properties are objects

var family = {};

family.mother = new Person("Jane", "Smith");
family.father = new Person("John", "Smith");
family.daughter = new Person("Emily", "Smith");

console.table(family);

result:

示例6：

// an array of objects, logging only firstName

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");

console.table([john, jane, emily], ["firstName"]);

result:

17、console.time([label])

定义：Starts a new timer. Call console.timeEnd() to stop the timer and print the elapsed time to the Console.

译文：开始一个新的定时器。调用console.timeEnd()停止定时器,把已记时的时间打印到控制台。

示例1：

console.time();
var arr = new Array(10000);
for (var i = 0; i < arr.length; i++) {
  arr[i] = new Object();
}
console.timeEnd();

result:

示例2：

console.time('total');
var arr = new Array(10000);
for (var i = 0; i < arr.length; i++) {
  arr[i] = new Object();
}
console.timeEnd('total');

result:

示例3：

console.time('total');
console.time('init arr');
var arr = new Array(10000);
console.timeEnd('init arr');
for (var i = 0; i < arr.length; i++) {
  arr[i] = new Object();
}
console.timeEnd('total');

result:

18、console.timeEnd([label])

定义：Stops a timer. See console.time() for examples.

译文：停止计时器。以console.time()作为一个例子。

19、console.timeStamp([label])

定义：Adds an event to the Timeline during a recording session.

译文：在一个记录会话期间，添加一个事件到时间表。

示例：

console.timeStamp('check out this custom timestamp thanks to console.timeStamp()!');

result：

20、console.trace(object)

定义：Prints a stack trace from the point where the method was called.

译文：打印一个堆栈跟踪的方法。

示例：

function add(num){
    if(num>0){
      //you can pass lables and objects to trace,too.
      console.trace('recursion is fun:',num);
      return num+add(num-1);
    }else{
      return 0;
    }
}

add(3);

result:

21、console.warn(object [, object, ...])

定义： Prints a message like console.log(), but also displays a yellow warning icon next to the logged message.

译文：不仅打印像console.log()的消息，而且也显示一个紧挨着输出消息的黄色图标。

示例：

console.warn('user limit reached!');

result:

小结：

大致介绍了Chrome console内置函数，其中，console.log(),console.info(),console.error(),console.warn()需要区别一下。

三、Sources面板

概述

Sources面板通过设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器。在上一篇博文本篇博客详解Google Chrome浏览器（理论篇）中概述了Sources面板的主要功能，即断点调试、调试混淆的代码和使用开发者工具工作区进行持久化保存，本篇文章将结合Sources面板的主要功能，且从Source面板三个组成部分来叙述，下图红色字体标记。

详解

第一部份：它的功能类似于Resources面板，主要用来显示网页加载脚本文件，如css，js等资源文件，但不包括cookie,img等静态资源文件。

该部分由三个Tab组成，它们都存在不同域名和环境下的js和css文件。

a、Sources：包含该项目的静态文件，如项目资源文件css和js。双击选中文件，该内容会在第二部分显示（若选择JS文件，则可以在第二部分进行断点调试）

b、Content scripts:主要是第三方插件和Chrome浏览器资源问件等

c、Snippets:js片段，允许用户自设定JS，主要用来测试JS文件、记住调试片段、单元测试、少了功能代码编写等

第二部分

这部分，主要有两个功能：查看第一部分选择的页面和js调试。主要讲解js调试。

a、设置和取消断点。选择想要设置断点的js具体行，点击行号，就设置了断点，再次点击，就取消已设置的断点。

b、快捷键：F10单步执行，但当遇到方法，不进入方法，直接方法外的下一行代码。F11单步调试，且遇方法体，需要经过。CTR+F 快速查找匹配资源。CTR+G 快速定位文件具体行。

c、第二部分底部，“{}”表示格式化代码。

d、第二部分底部，紧挨{}处右侧，表示当前光标行号和列号。

第三部分

a、顶部图标说明

b、Watch:为当前断点添加表达式。注：程序每执行一行代码，都会执行自定义添加的表达式，某些时候，会严重影响程序性能。

c、Scope监视环境变量，私有变量、公有变量、全局变量等。

总结

本想在本篇博文就将Chrome讲完的，但写到这，感觉篇幅比较长了，经过认真考虑，还是分为两篇博文来写。

本篇博文主要写了Chrome DevTool 前三面板：Elements，Console和Sources，在接下来的另一篇博文中，将接着写剩下的部分：Network,Timeline,Profiles,Application,Security,Audits面板。

当然了，我写博客的目的，不仅仅是为了与广大博友分享知识，更希望能从读者朋友们的反馈中，学到知识，以求达到共同学习，共同进步的目的。因此，广大读者朋友们，若对本篇博文有任何高见和建议，欢迎指出，如此，非常感谢！！！

参考

【1】http://web.jobbole.com/82562/

【2】https://developer.chrome.com/devtools

【3】http://zhangzhaoaaa.iteye.com/blog/2247890

【4】http://www.cr173.com/gonglue/62840_1.html

【5】https://segmentfault.com/a/1190000002511877

【6】https://segmentfault.com/a/1190000004123527

【7】http://www.cnblogs.com/zhongxinWang/p/4121111.html

【8】https://developers.google.com/web/tools/chrome-devtools/

【9】https://developer.mozilla.org/zh-CN/docs/Web/API/Console/table

【10】http://jingyan.baidu.com/article/2f9b480db6cde741ca6cc246.html

【11】https://developers.google.com/web/tools/chrome-devtools/console/console-write

【12】https://developers.google.com/web/tools/chrome-devtools/console/console-reference

【13】https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_

Developer_Guide/Console/Console.html

【14】https://developers.google.com/web/tools/chrome-devtools/inspect-styles/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3

• 感谢您的阅读，若有不足之处，欢迎指教，共同学习、共同进步。
• 博主网址：http://www.cnblogs.com/wangjiming/。
• 极少部分文章利用读书、参考、引用、抄袭、复制和粘贴等多种方式整合而成的，大部分为原创。
• 如您喜欢，麻烦推荐一下；如您有新想法，欢迎提出，邮箱：2016177728@qq.com。
• 可以转载该博客，但必须著名博客来源。