2011年12月26日 星期一

各主要瀏覽器的開發者工具( Developer Tool ) Part.4 - WebKit


經過前篇介紹Firefox, IE, Opera瀏覽器的開發者工具後，接下來的這一篇將要一起介紹兩個瀏覽器：

Google Chrome, Safari

為什麼要把這兩個瀏覽器給擺在同一篇來做介紹呢？一定有人會有這樣的疑問，

簡單說，這兩種瀏覽器的核心都是用同一種引擎「WebKit」，雖然都是用同一種引擎但還是有不同的地方。

image

Safari（以下引用自Wiki）：

Safari使用蘋果自家的WebKit來進行網頁排版及執行JavaScript。WebKit內含WebCore排版引擎及JavaScriptCore引擎，分別由KDE的KHTML及KJS引擎衍生而來。WebCore及JavaScriptCore與KHTML及KJS一樣，同是自由軟體，並以LGPL方式授權。蘋果對KHTML的一些改進會併入Konqueror計劃。另外，蘋果方面也發佈了附加的源始碼，以類似BSD執照般的開放源代碼方式授權。

Google Chrome（以下引用自Wiki）：

其程式碼是基於其他開放原始碼軟體所撰寫，包括WebKit和Mozilla，並開發出稱為「V8」的高效能JavaScript引擎。「Google Chrome」的整體發展目標是提升穩定性、速度和安全性，並創造出簡單且有效率的用戶介面

有關 WebKit 的說明：

WebKit是Mac OS X v10.3及以上版本所包含的軟體框架（對v10.2.7及以上版本也可通過軟體更新獲取）。同時，WebKit也是Mac OS X的Safari網頁瀏覽器的基礎。WebKit是一個開源項目，主要由KDE的KHTML修改而來並且包含了一些來自蘋果公司的一些組件。

傳統上，WebKit包含一個網頁引擎WebCore和一個腳本引擎JavaScriptCore，它們分別對應的是KDE的KHTML和KJS。不過，隨著JavaScript引擎的獨立性越來越強，現在WebKit和WebCore已經基本上混用不分（例如Google Chrome採用V8引擎，卻仍然宣稱自己是WebKit核心）。

 

參考連結：

The WebKit Open Source Project - http://www.webkit.org/

Wikipedia：WebKit - http://zh.wikipedia.org/wiki/WebKit

Wikipedia：Safari - http://zh.wikipedia.org/wiki/Safari

Wikipedia：Google Chrome - http://zh.wikipedia.org/wiki/Google_Chrome

Safari

顯示開發人員選單

點選Safar上方的選單列「編輯」選擇最後一個項目「偏好設定」

image

顯示「進階視窗」直接選擇最後一個「進階」頁籤，勾選畫面中下方的「在選單列中顯示”開發人員”選單」

SNAGHTML19fed24

勾選完之後就可以在瀏覽器上方選單列中顯示「開發人員」的選單

image

「開發人員」選單中有很多功能，其中的「顯示網頁檢閱器」「顯示錯誤主控台」選項都可以把開發者工具叫出來使用，

顯示網頁檢閱器：CTRL + ALT + I

顯示錯誤主控台：CTRL + ALT + C

image

這就是Safari (webkit) 的開發者工具畫面

元件

image

資源

image

網路

SNAGHTML1b22f42

工序指令

image

時間列

image

描述檔

image

審定

image

主控台

image

簡略的操作說明在稍後介紹完Google Chrome的開發者工具後一併說明。

Google Chrome

呼叫出Chrome的開發者工具方式如下：

點選Chrome瀏覽器網址列最右邊的功能設定鍵，開啟選單後選擇「工具」接著可以選擇開發人員工具或JavaScript控制台，

點選這兩個項目都可以顯示開發人員工具的介面，

image

開發人員工具：CTRL + SHIFT + I

JavaScript控制台：CTRL + SHIFT + J

 

Google Chrome 開發人員工具

image

Google Chrome JavaScript控制台

image

接下來將以Google Chrome的開發者工具來做簡單的操作介紹。


Elements Panel ：檢查元素

檢查元素的方法有三種，

第一種，在頁面上點擊右鍵選單的「檢查元素」

image

接著就會在開發者工具的元素介面中顯示元素於原始碼的相對位置

image

而右方的區域中也會顯示此元素所套用的樣式內容

image

 

第二種，檢查元素的方式就是在開發者工具的元素介面中去搜尋

image

點選下方開發者工具所搜尋出的元素，上方頁面就會顯示相對映的元素

image

 

第三種，開啟開發者工具後點選最下方的放大鏡圖示

image

接著就是直接到頁面上去點選你要檢查的元素（有反白顯示並且有出現元素的ID名稱才算是有選到）

image

開發者工具的元素檢查區域就會顯示原始碼元素的相對位置

image

Resources Panel：資源

檢視此頁面所載入並使用的資源檔，Scripts, Stylesheets, Images等，也包含儲存裝置的內容(如 Cookie）

image

image

Network Panel：網路

觀察頁面資源檔案載入的Timeline狀態

image

最後會顯示有多少個requests數目以及傳輸的檔案大小

image


Scripts Panel：

用來檢測頁面的Script內容，這個功能在程式開發人員心中應該是最重要的一個，

image

切換頁面載入的Script檔案

image

如果覺得載入的Script檔案內容蠻亂的或是有經過壓縮處理，可以點選「Pretty print」按鍵讓Script內容重新整理

image

整理前（使用jquery.min.js）

image

整理後

image

 

偵錯JavaScript – 下中斷點

在要進行中斷偵錯的行號點一下，就可以增加一個中斷點，

image

Panel右側的Breakpoints Panel 就可以看到增加的中斷點

image

加上中斷點後重新執行頁面，當程式執行到中斷點時就會停止，如果下中斷點的當方式一個function時，滑鼠移到中斷點，

大約過個一秒鐘就會以popup的方式將function的內容給顯示出來。

image

另外也可以加入指定的參數到監看式中

image

已加入至監看式

image

另外在進行中斷偵錯時，必須要熟記快速鍵，以利偵錯的快速進行：

Continue 繼續：F8

image

Step over 步過（不進入函式）：F10

image

Step into 步進（進入函式）：F11

image

Step out ：SHIFT  + F11

image

Deactive/Activate all breakpoints：停止所有中斷點活動/啟動所有中斷點活動

image

 

另外還有一個地方需要特別提出，就是使用Developer Tools 去追蹤堆疊，去偵測與捕捉Exception ( Tracking Exceptions )

Chrome Developer Tools: Understanding stack traces

http://code.google.com/intl/zh-TW/chrome/devtools/docs/scripts-exceptions.html

Timeline Panel：時間軸

把頁面上所執行操作的所有動作做一個完整的記錄，All events, from loading resources to parsing JavaScript, calculating styles, and repainting are plotted on a timeline.

image

要錄製某事件的時間軸記錄時，點選下方的Record鍵

image

開始執行事件

image

錄製中

SNAGHTMLd508f9

當你覺得事件的執行告一段落時，就可以停止錄製，這時候就只要在按一下 Record 鍵即可。

檢視事件執行時花份最多時間的操作，將滑鼠游標移到該事件上就可以顯示詳細資料，

image

另外也可以觀察送出Request的詳細資料，其中包含堆疊資訊，

image

由Timeline的紀錄裡就可以觀察出事件操作中那一個步驟所花費的時間成本最多，由此來改善程式。

Audits：審計

它可以幫助您檢查網頁性能和網路利用率。

image

點選畫面中的Run按鍵就開始執行功能

image

執行完成後就會列出此頁面的建議與問題

image


Console Panel：主控台

JavaScript控制台可與其它面板聯合使用，您可以藉助它來審查DOM元素、調試JavaScript代碼、查看HTML解析錯誤等。

image

除了Console Panel外，其實在最下方的功能列都可以叫出Console來使用

image

image

在Console之中可以輸入JavaScriupt指令來做調試，

另外也有支援Autocomplete功能，當你輸入時就會以淺灰色顯示相關字詞，

如果需要輸入多行的JavaScript指令碼，在一行的結尾按下「SHIFT + ENTER」就會移到下一行，如此就可以輸入多行的指令

image

有關 Google Chrome Developer Tools的簡單介紹就說明到此，而Apple Safari的Developer Tools功能也是雷同的，

上述的內容如有未提及到的功能，請參閱以下的資料。

 

 

參考連結：

1.Google Chrome 官方文件

Google Chrome Developer Tools

http://code.google.com/intl/zh-TW/chrome/devtools/

如果想要清楚並且完整的學習如何使用Google Chrome的開發者工具，就務必要仔細的閱讀文件中的內容。

2.Chrome Developer Tools: Videos

http://code.google.com/intl/zh-TW/chrome/devtools/docs/videos.html

Developer Tools中各種Panel的使用教學，讓你一個一個仔細看、仔細學。

 

3.GoogleDevelopers影片

Google I/O 2010 - Google Chrome's developer tools

http://www.youtube.com/watch?feature=player_embedded&v=TH7sJbyXHuk

這影片（長度約43:30）為Google I/O 2010中介紹Google Chrome Developer Tools，其中介紹的有：

  • Waht is Chrome Developer Tools?
  • Project history
  • Developer Tools overview
  • Story 1: Debugging JavaScript
  • Story 2: Identifying performance issues
  • Story 3: Understanding memory usage
  • Developer Tools internal  design
  • Links & How to contribute

建議如果時間允許的話，看完全部的影片，將會有不少的收穫。

 

4.Google Chrome 开发人员工具介绍

Google Chrome 浏览器开发人员工具，让网页开发变得更轻松

http://goo.gl/dmvIj

簡體中文的Google Chrome Developer Tools說明（為什麼沒有正體中文？）

 

以上

張貼者： 於
標籤：

3 則留言:

訂閱： 張貼留言 (Atom)

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問，因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過，請多多使用「詢問與建議」(在左邊，就在左邊)，另外比較深入的問題討論，或是有牽涉到你實作程式碼的內容，不適合在留言板裡留言討論，請務必使用「詢問與建議」功能（可以夾帶檔案），謝謝。