淺談Google Chrome瀏覽器（操做篇）（上）

時間 2019-11-06

原文原文鏈接

開篇概述javascript

在上篇博客中詳解Google Chrome瀏覽器（理論篇）一文中，主要講解了Chrome 搜索引擎使用、Chrome安裝和基本操做、Chrome 基本架構、多線程等原理性問題，這篇將重點講解Chro-me實操問題，主要結合「Chrome 主調試面板「,對Chrome,Elements,Con-sole,Sources,NetWork,TimeLine,Profiles,Application,Security,Audits進行詳解。若對廣大讀者朋友有所幫助，我將不勝感激。本篇博文主要從固然了，在閱讀本篇文章前，強烈建議你們先閱讀詳解Google Chrome瀏覽器（理論篇）一文。如此，對本篇文章的理解，也許會更加容易些。css

溫故而知新html

一、Chrome基本架構圖和Chrome主調試面板java

二、Chrome DevTools 調試面板簡要介紹node

正文web

1、Elements面板chrome

概述express

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

譯文：經過Elements 面板，不只僅能夠查看和編輯頁面和樣式，並且所作的改變當即生效。數組

詳解

第一部份：操做DOM

一、查看DOM樹

打開Element面板，能夠查看全部DOM節點，包括CSS和JavaScript，以下圖所示，左側爲DOM樹，右側爲CSS樣式。

二、選取DOM節點

將鼠標移到網頁中的某元素上面，該元素會發生變化以下圖所示：

三、點擊DOM樹p節點元素，便可選中。這時，會發現Element面板中的DOM樹發生了變化，以下圖所示：

註釋：

選中的p節點在DOM樹中被精肯定位（藍色背景），能夠看到p節點的DOM層次（紅色方框），在面板右側，是p節點的CSS樣式。固然，也能夠在Element面板的DOM樹中選取DOM節點。將鼠標放到相應的DOM節點上，會發現網頁中相應的節點也發生了變化,點擊該節點，便可選中。

四、增長、刪除和修改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:收縮指定節點及其全部子節點。

五、拖動節點，改變節點順序。

六、爲節點添加屬性

爲<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標準的屬性，不支持自定義屬性。不過，實際開發中不多用到該功能。

七、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.
八、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.
九、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.

十、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.

十一、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.
十二、查看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的底層結構。

2、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

詳解

一、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:

二、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。

三、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:

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

定義：Identical to console.log().

譯文：與console.log()同樣;

小結：功能與console.log()同樣。

五、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:

六、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:

七、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:

八、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:

九、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:

十、console.groupEnd()

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

譯文：建立日誌組。以console.group()做爲例子。

十一、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:

十二、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:

1三、console.marktimeline()

已經被棄用，已被console.timeStamp替換。

示例：

console.markTimeline();

result:

1四、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:

1五、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做爲一個例子。

1六、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:

1七、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:

1八、console.timeEnd([label])

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

譯文：中止計時器。以console.time()做爲一個例子。

1九、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:

2一、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()須要區別一下。

3、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、第二部分底部，緊挨{}處右側，表示當前光標行號和列號。