WebKit和Chrome源码分析
生活随笔
收集整理的這篇文章主要介紹了
WebKit和Chrome源码分析
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
WebKit內核源代碼分析
http://blog.sina.com.cn/s/blog_53220cef0100ta1i.html摘要：本系列通過分析WebKit的源代碼，試圖分析WebKit的內核設計架構，模塊之間的關系，分析的時候以Qt的移植為參考，涉及移植的東西不多，主要還是以內核為主。在分析內核的時候，Frame是首當其沖的一個類，本文將分析Frame類的代碼。
1. ? ?描述
Frame類是WebCore內核同應用之間聯系的一個重要的類。它有點像設計模式中的Fa?ade，將內核的各個不同的零配件組裝在了一起，但又不是Fa?ade，因為用戶很多時候還是要直接去操作里面的組件。除了設計上的考慮，Frame還有語法上的意義，它對應于Page里面的幀。
2. ? ?類結構
WebKit內核源代碼分析（一）
1） ? ? ? ? ? ? ?FrameTree對象用來協助管理父幀和子幀的關系，常見的比如main frame之中有iframe元素，就會調用FrameLoaderClientQt::createFrame來產生子幀，產生的子幀會通過a添加到主幀的樹狀結構中。Frame通過FrameTree對象，可以方便地訪問它的父幀，子幀，兄弟幀。
2） ? ? ? ? ? ? ?維護FrameLoader對象用來完成frame的加載，FrameLoader是一個非常重要的類，后續進行進一步的分析。
3） ? ? ? ? ? ? ?維護NavigationScheduler對象用來管理頁面跳轉調度（比如重定向，meta refresh等）。
4） ? ? ? ? ? ? ?DOMWindow用來管理同DOM相關的事件、屬性和消息。
5） ? ? ? ? ? ? ?FrameViwe類用于Frame的排版。
6） ? ? ? ? ? ? ?Frame文檔解析后，對每一個tag或者attr，會有對應的dom節點關聯，Document類用來管理這些dom節點。不同的文檔類型繼承出不同的子類，比如HTML文檔對應子類HTMLDocument,XML文檔對應于XMLDocument。
7） ? ? ? ? ? ? ?SciptController對象，腳本控制器，用來管理腳本的執行和操作。
8） ? ? ? ? ? ? ?Editor對象用來處理頁面的編輯相關的操作，比如拷貝，粘貼，輸入等，Editor對象，它同Page類的EditorClient對象緊密合作。和EditorClient的關系就如同Page同Frame的關系。
9） ? ? ? ? ? ? ?SelectionController用來管理Frame中的選取操作。
10） ? ? ? ? AnimationControlle,動畫控制，控制動畫的播放，暫停，繼續（同HTML video標簽是否有關系？）
11） ? ? ? ? EventHandler，事件處理對象，這里的對象主要是同上層應用也就是用戶參與的事件，比如鼠標事件，按鍵事件（快捷鍵等），滾動事件，resize事件等。這是一個瀏覽器外殼經常需要打交道的類。
3. ? ?主要接口
3.1 ? Create
static PassRefPtr<Frame> create(Page*,HTMLFrameOwnerElement*,FrameLoaderClient*)
描述： 調用Frame構造函數，創建出Frame對象。有兩個地方會創建Frame對象，一是要加載一個新的頁面請求，這個時候會創建main frame，一是在加載子幀的時候，通過FrameLoaderClientQt的createFrame接口，創建子幀對應的Frame對象，在第一種情況中，HTMLFrameOwnerElement參數為NULL，第二種情況傳子幀的父元素。在一個tab頁內，main frame會重用。
調用系列：
àQwebPage::setView
àQwebPage::setViewportSize
àQwebPage::mainFrame
àQwebPagePrivate::createMainFrame
àQwebFrameData::QwebFrameData
àFrame::create
àFrameLoader::finishedLoading
à……
àHTMLDocumentParser::append
à……
àHTMLTreeBuilder::processToken
à……
àHTMLElementBase::openURL
àSubFrameLoader::requestFrame
à……
àFrameLoaderClientQt::creatFrame
àQwebFrameData::QwebFrameData
àFrame::create
3.2 ?createView
void createView(const IntSize&, const Color&, bool, const IntSize&, bool,
? ? ? ? ? ? ScrollbarMode = ScrollbarAuto, bool horizontalLock = false,
? ? ? ? ? ? ScrollbarMode = ScrollbarAuto, bool verticalLock = false)
描述：創建出FrameView對象，以用于之后的排版。應用調用這個函數的時候需要傳入同排版有關的一些信息，如初始視窗大小，背景色，滾動條模式等。創建出FrameView以后，即調用Frame::setView設置成當前的FrameView。
函數調用系列：
àFrameLoader::commitProvisionalLoad
àFrameLoader::transitionToCommitted
àFrameLoaderClientQt::transitionToCommittedForNewPage
àFrame::createView
3.3 ?setDocument
void setDocument(PassRefPtr<Document>)
描述：設置同Frame關聯的Document對象(一般是DocumentWriter創建的)。
函數調用系列：
àQWebFrame::QwebFrame
àQwebFramePrivate::init
àFrame::init
àFrameLoader::init
àDocumentWriter：：begin
àFrame::setDocument
àDocumentLoader::receivedData
àDocumentLoader::commitLoad
àFrameLoaderClientQt::committedLoad
àDocumentLoader::commitData
àDocumentWriter::setEncoding
àDocumentWriter::willSetEncoding
àFrameLoader::receivedFirstData
àDocumentWriter::begin
àFrameLoader::clear
àFrame::setDocument
3.4 ?init
void Frame::init
描述：Frame對象初始化，會調用FrameLoader::init初始化FrameLoader對象。
調用系列：
àQWebFrame::QWebFrame
àQwebFramePrivate::init
àFrame::init
3.5 ?setPageAndTextZoomFactors
void setPageAndTextZoomFactors(float pageZoomFactor, float textZoomFactor)
描述：設置頁面放大因子和文字放大因子。在網頁縮放或者改變網頁字體大小的時候調用。
========
WebKit內核源代碼分析（二）
摘要：本系列通過分析WebKit的源代碼，試圖分析WebKit的內核設計架構，模塊之間的關系，分析的時候以Qt的移植為參考，涉及移植的東西不多，主要還是以內核為主。FrameLoader類負責一個Frame的加載，在Frame的流程中起到非常重要的重要，同很多組件都有交互，本文將分析FrameLoader類的代碼。1. 概述
顧名思義，FrameLoader是一個Frame的loader，它的作用就是為客戶提供一個下載一個Frame的一系列接口。這里的客戶指的是類的客戶，比如Frame類,間接客戶是上層應用，比如qwebframe。
從它的定義看，最容易想到的是一個load接口，用來將一個frame load下來。任何一個頁面至少都需要一個mainframe，因此一個頁面的下載一般就是從load一個mainframe開始。
在load frame的過程中，通過FrameLoaderClient接口將load過程的不同階段告知客戶。
FrameLoader通過setDocumentLoader相當于把load的工作委托給了DocumentLoader類。
FrameLoader同DocumentLoader是has-a的關系。一般在load的時候創建DocumentLoader。Frame調用DocumentLoader的startLoadingMainResource開始load frame。
2. 類關系
WebKit內核源代碼分析（二）
1）Frame和FrameLoader是contain-a的關系，在Frame的構造函數中調用FrameLoader的構造函數，調用時傳入參數Frame指針和FrameLoaderClient指針。
2）Frame有可能有子Frame，所以維護SubFrameLoader對象m_subframeLoader來管理子Frame的load。Frame可以對應xml document，也可對應html document，等等。跟Document相關的子resource的load不在FrameLoader的職責范圍內。
3）包含一個DocumentWriter類對象m_writer，當Frame的數據load finish的時候，將數據傳給DocumentWriter類，進行下一步的處理（比如解碼）
4）FrameLoader維護了三個DocumentLoader對象，分別對應于不同的階段，m_policyDocumentLoader對應于收到用戶load調用，進行policy check階段，m_provisionalDocumentLoader對應于policy check通過以后，Frame數據還沒有到來之前，它會負責startLoadingMainResource的調用。m_documentLoader則是Frame第一個數據到來以后使用的DocumentLoader，這個時候，前一個主Frame的DocumentLoader已經不能再用(user agent開始白屏，刷掉前一個頁面的顯示)。
5）包含一個HistoryController對象，用于操作歷史記錄相關的接口，保存或者恢復Document和View相關的狀態，維護前進后退隊列，以實現前進后退功能，前進后退本質上是同Page對象關聯的，FrameLoader通過HistoryController操作m_backFowardController對象
6）包含一個ResourceLoadNotifier對象，主要用于同ResourceLoader及FrameLoaderClient打交道，可以理解為ResourceLoader有事件變化或者發生的時候，通知FrameLoader的一個手段
7）包含一個SubframeLoader對象，當FrameLoader下載的Document有子幀需要請求的時候（比如HTMLDocument中解析到iframe 元素），用來處理子幀請求
8）將FrameLoader的狀態封裝到FrameLoaderStateMachine中，這個狀態同FrameState不同，FrameState傾向于判斷Frame涉及的Document的下載狀態，是出于發起狀態（Provisional），還是出于已經收到響應但不全（CommittedPage）,還是響應收全的狀態，傾向于同http相關。而FramLoaderStateMachine傾向于同DocumentLoader相關，用來描述FrameLoader處理DocumentLoader的節點，是處于已經創建，還是顯示的狀態。
9）PolicyChecker主要用來對FrameLoader進行一些校驗。包括三種校驗：NewWindow,Navigation和Content。NewWindow對應于瀏覽器需要新開一個tab頁或窗口的時候，Navigation對應于一個頁面請求發起的時候，Content校驗對應于收到數據以后（判斷Mime type等），PolicyChecker通過提供對應的接口，由FrameLoaderClient來對這些請求進行校驗，以確定是否允許繼續，或者需要其它的動作。
3. 主要接口
Frame::init
功能：FrameLoader的初始化
函數調用系列
àQWebFrame::QWebFrame(QwebPage* parent,QWebFrameData *frameData)
àQWebFramePrivate::init(QWebFrame* qwebframe,QWebFrameData* frameData)
àFrame::init()
àFrameLoader::init()
說明：主要做一些自身的初始化工作，比如初始化狀態機，Sandbox Flags，創建DocumentLoader被設置為Policy DocumentLoader和Provisional DocumentLoader，調用DocumentLoader和documentWriter等的接口進行初始化操作
FrameLoader::commitProvisionalLoad
功能：提交Provisional階段下載的數據
函數調用系列：
àDocumentLoader::finishLoading
àDocumentLoader::commitIfReady
àFrameLoader::commitProvisionalLoad
或者
àResourceLoader::didReceiveData
àMainResourceLoader::addData
àDocumentLoader::receiveData
àDocumentLoader::commitLoad
àDocumentLoader::commitIfReady
àDocumentLoader::commitProvisionalLoad
說明：這個接口主要的操作是將Provisional DocumentLoader設置成DocumentLoader，因為已經收到數據，所以FrameState也會躍遷到FrameStateCommittedPage。還有歷史記錄，PageCache相關的操作。另外，這個接口會間接調用FrameLoaderClientQt::transitionToCommittedForNewPage，通過Frame::createView創建出FrameView來。
Frame::finishedLoading
功能：frame請求網絡加載完成的時候調用此接口
函數調用系列
àResourceLoader::didFinishLoading
àMainResourceLoader::didFinishLoading
àFrameLoader::finishedLoading
àFrameLoader::init()
說明：檢查是否有網絡錯誤，告訴DocumentLoader和DocumentWriter下載完成，以便進行后續操作（提交數據，解析）。
FrameLoader::finishedParsing
功能：解析完成調用此接口
函數調用系列
àDocumentWritter::end
à….
àDocument::finishParsing
à….
àDocument::finishedParsing
àFrameLoader::finishedParsing
FrameLoader::load(const ResourceRequest& request,bool lockHistory)
功能：加載一個frame請求，Frame請求相關的數據，封裝成ResourceRequest傳入。
函數調用系列：一般由應用觸發調用
說明：這個接口調用FrameLoaderClientQt::createDocumentLoader創建出DocumentLoader，并以此DocumentLoader為Policy Document Loader，進入Policy check流程。
========
?WebKit內核源代碼分析（三）
摘要：瀏覽器的請求一般是以頁面請求為單位，當用戶通過網址欄輸入一個url，瀏覽器就開始一個頁面請求。而一個頁面請求可能包含有一到多個頁面子幀，以及圖片、CSS和插件等派生子資源。Page類就是用來對應這樣的頁面請求。Page類是WebKit中非常重要的一個類，它就像內核對外的一個聚合器。關鍵詞:WebKit內核源代碼,WebCore,Page,Frame，WebKit架構
1. 概述
瀏覽器的請求一般是以頁面請求為單位，當用戶通過網址欄輸入一個url，瀏覽器就開始一個頁面請求。而一個頁面請求可能包含有一到多個頁面子幀，以及圖片、CSS和插件等派生子資源。Page類就是用來對應這樣的頁面請求。前進后退，導航，編輯，右鍵菜單，設置，Inspector等這些用戶參與的動作，大部分是同Page相關的。而標記語言解析、排版、加載則更多地同Frame相關。
我們通過幾個圖來看下Qt移植中Page類同應用之間的關系。
?WebKit內核源代碼分析（三）
QWebPage通過QWebPagePrivate維護Page類的指針，并在QWebPagePrivate的構造函數中實例化Page對象。QWebPage類通過之后的createMainFrame調用實例化QwebFrame，而在QwebFrameData的構造函數中，以Page指針為參數調用了Frame::create 創建出Frame對象。
?WebKit內核源代碼分析（三）
Page類通過組合其它類的方式，實現了很多功能，Page類本身并沒有多少代碼。
2. 類關系
?WebKit內核源代碼分析（三）
2.1 PageGroup
PageGroup并不是用來對Page進行管理的，而是設計用來將一些具有共同的屬性或者設置的Page編成組的，以方便對這些屬性進行管理。目前這樣的屬性包括localStorage的屬性，IndexDB，User Script，User StyleSheet等。最常見的同PageGroup相關的操作是維護已訪問鏈接（如addVisitedLink等接口）。根據地瓜的理解，假設WebKit內核之上架設多個應用（瀏覽器是一個應用），比較可能的是，一個應用獨立一個PageGroup。這里同多tab頁沒有關系，多tab頁屬于同一個PageGroup。地瓜曾在mailing group上就這個問題咨詢過，一位RIM的同學給我舉了一個例子，比如一個基于WebKit的郵件程序，一方面他可能調用基于webkit的browser來顯示網頁，另外他本身也基于webkit來顯示一些郵件，這兩個之間的setting有很大可能不一樣，他們就使用不同的PageGroup。
PageGroup中有這個Group已經安裝并且使用的User Script和User StyleSheet的集合，一般在網頁解析完畢后，這些User Script和User StyleSheet會插入到Document中。
PageGroup中還維護了Local Storage和Index DB相關的設置，比如它們的Path，上限等，通過GroupSettings類實現。
PageGroup創建以后，每次創建一個新的Page對象，會通過addPage接口加入到這個PageGroup的m_pages中。
每次有導航行為發生的時候，會調用addVisitedLink來將url加入到已訪問鏈接中。如果瀏覽器要跟蹤已訪問的接口，則在初始化的時候必須調用PageGroup::setShouldTrackVisitedLinks，且參數為true。此處shouldTrackVisitedLinks是一個靜態的全局變量，也就是說，所有應用維護一樣的行為（一個應用將其設置為false會影響到其它同樣基于此核的應用）？
Page類中維護了PageGroup的指針，并提供了group接口，這是個lazy接口，如果m_group不存在，會調用InitGroup來創建一個。對于Page類來說，如果沒有設置GroupName，則在初始化的時候會生成一個空GroupName的PageGroup，由m_singlePageGroup維護，并把指針賦給m_group，如果以非空的名字調用了setGroupName，則會重新創建PageGroup，此時這個PageGroup由m_group來維護。
2.2 Setting
WebCore中的設置相關的類，瀏覽器應用的不少配置、選項同該類相關，Qt移植中，應用在創建Page對象后，會根據Page::settings來實例化QwebSetting。
2.3 Chrome
原生窗口接口類，參考地瓜寫的”WebKit中的Chrome和ChromeClient”。
2.4 其它
SelectionController :負責管理Page中的選取操作，絕大部分選取操作是基于Frame的，只在Frame的Selection為空的時候，對焦點游標的繪制工作才會使用到Page類的SelectionController。
SharedGraphicsContext3D:共享3D圖形上下文，為了優化2D顯示而加入。在加速的2D canvas中，引入的DrawingBuffer的概念，SharedGraphicsContext3D提供了createDrawingBuffer來創建DrawingBuffer。
DragController:拖拽控制器。Chrome的超級拖拽功能同這個有關？地瓜會在以后對此進行求證。
FocusController:焦點控制器。考慮到焦點會在各個frame之間切換，所以由Page類維護焦點控制器最合適不過。
ContextMenuController:右鍵下拉菜單控制器。
InspectorController:Inspector控制器，瀏覽器中的很多開發工具都同這個類相關。
GeolocationController:定位定位服務控制器。
DeviceMotionController:設備移動控制器
DeviceOrientationController:設備方向控制器
SpeechInputClient:語音輸入Client。
ProgressTracker:進度跟蹤。
BackForwardController:前進后退操作控制。
Frame:一個Page由至少一個主幀和若干個其它子幀構成。
HistoryItem:歷史記錄。
PluginData:插件相關，未來可能同PluginDatabase類合并。主要是初始化Plugin的信息。
PluginHalter:用來控制Plugin的停止和重新開始。
RenderTheme:這個類提供了控件的渲染和繪制接口。Qt移植中，RenderThemeQt是RenderTheme接口的具體實現。
EditorClient:同編輯功能相關，比如拷貝、剪切、刪除等操作。
========
一個研究Webkit源碼的建議方法
http://blog.csdn.net/xingtian713/article/details/4471169
研究Webit源碼，如果直接從Webkit網站 下載代碼，編譯將是一個很痛苦的事情，而且對于熟悉Windows下Visual Studio家族產品的兄弟來說調試也是一件很郁悶的事情，畢竟邊調試，邊分析代碼是最有效的方式。
另外的一種方式就是從Chrome開始了，Google已經在Windows平臺上做好了基于Visual Studio的所有項目編譯選項設置，對于Windows平臺下的兄弟來說，是一個福音。
但是如果你只是想分析Webkit內核的代碼，那你就無需從最上層開始分析了，畢竟Google在Webkit的基礎上作了太多的UI框架擴展，從最上層開始分析，需要先熟悉Chrome的架構和UI框架，難度有點大，在Chrome的眾多工程中，在Webkit子目錄下有一個工程test_shell.
test_shell項目的位置
這個程序是一個測試程序，簡單的來說是一個簡易的瀏覽器。具備了一個瀏覽器的基本功能。
test_shell運行后的效果?
這個測試程序中間增加了Chrome的消息循環模塊(MessageLoop,MessagePump),但是這個消息循環并沒有直接跳用，消息循環雖然運行起來了，但是基本上沒處理任何邏輯。
測試程序的核心處理程序也就在主窗口的事件回調函數中：
LRESULT CALLBACK WebWidgetHost::WndProc(HWND hwnd, UINT message, WPARAM wparam,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? LPARAM lparam) {
? WebWidgetHost* host = FromWindow(hwnd);
? if (host && !host->WndProc(message, wparam, lparam)) {
? ? switch (message) {
? ? ? case WM_DESTROY:
? ? ? ? delete host;
? ? ? ? break ;
?
? ? ? case WM_PAINT: {
? ? ? ? RECT rect;
? ? ? ? if (GetUpdateRect(hwnd, &rect, FALSE)) {
? ? ? ? ? host->UpdatePaintRect(gfx::Rect(rect));
? ? ? ? }
? ? ? ? host->Paint();
? ? ? ? return 0;
? ? ? }
?
? ? ? case WM_ERASEBKGND:
? ? ? ? // Do nothing here to avoid flashing, the background will be erased
? ? ? ? // during painting.
? ? ? ? return 0;
?
? ? ? case WM_SIZE:
? ? ? ? host->Resize(lparam);
? ? ? ? return 0;
?
? ? ? case WM_MOUSEMOVE:
? ? ? case WM_MOUSELEAVE:
? ? ? case WM_LBUTTONDOWN:
? ? ? case WM_MBUTTONDOWN:
? ? ? case WM_RBUTTONDOWN:
? ? ? case WM_LBUTTONUP:
? ? ? case WM_MBUTTONUP:
? ? ? case WM_RBUTTONUP:
? ? ? case WM_LBUTTONDBLCLK:
? ? ? case WM_MBUTTONDBLCLK:
? ? ? case WM_RBUTTONDBLCLK:
? ? ? ? host->MouseEvent(message, wparam, lparam);
? ? ? ? break ;
?
? ? ? case WM_MOUSEWHEEL:
? ? ? ? host->WheelEvent(wparam, lparam);
? ? ? ? break ;
?
? ? ? case WM_CAPTURECHANGED:
? ? ? case WM_CANCELMODE:
? ? ? ? host->CaptureLostEvent();
? ? ? ? break ;
?
? ? ? // TODO(darin): add WM_SYSKEY{DOWN/UP} to capture ALT key actions
? ? ? case WM_KEYDOWN:
? ? ? case WM_KEYUP:
? ? ? case WM_SYSKEYDOWN:
? ? ? case WM_SYSKEYUP:
? ? ? case WM_CHAR:
? ? ? case WM_SYSCHAR:
? ? ? case WM_IME_CHAR:
? ? ? ? host->KeyEvent(message, wparam, lparam);
? ? ? ? break ;
?
? ? ? case WM_SETFOCUS:
? ? ? ? host->SetFocus(true );
? ? ? ? break ;
?
? ? ? case WM_KILLFOCUS:
? ? ? ? host->SetFocus(false );
? ? ? ? break ;
? ? }
? }
?
? return DefWindowProc(hwnd, message, wparam, lparam);;
}
?
如果大家想研究WebKit是如何進行渲染和排版網頁的，可以從這個函數中的Line 15出發了。
?
基本上，這個Test_shell基本上具備了一個簡單瀏覽器的雛形，如果大家對Webkit有興趣，可以考慮從這里出發了。
這個測試程序中還有兩個很炫的特性：
1. 可以查看當前網頁的渲染樹。可以在Debug菜單中選擇Dump render tree選項：
layer at (0,0) size 800x600
? RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
? RenderBlock {HTML} at (0,0) size 800x600
? ? RenderBody {BODY} at (8,8) size 784x584
? ? ? RenderBlock {DIV} at (0,0) size 784x160
? ? ? ? RenderBlock (anonymous) at (0,0) size 784x110
? ? ? ? ? RenderImage {IMG} at (0,0) size 276x110
? ? ? ? ? RenderText {#text} at (0,0) size 0x0
? ? ? ? RenderBlock {DIV} at (0,110) size 784x34 [border: (3px solid #0000FF)]
? ? ? ? ? RenderText {#text} at (325,3) size 133x27
? ? ? ? ? ? text run at (325,3) width 133: "Chrome Tests"
? ? ? RenderBlock (floating) {DIV} at (392,160) size 392x420
? ? ? ? RenderBlock {DIV} at (0,10) size 250x270
? ? ? ? ? RenderBlock {H1} at (0,0) size 250x20 [color=#FFFFFF] [bgcolor=#0000FF]
? ? ? ? ? ? RenderText {#text} at (0,0) size 95x19
? ? ? ? ? ? ? text run at (0,0) width 95: "Plugin Tests"
? ? ? ? ? RenderListItem {LI} at (0,30) size 250x20
? ? ? ? ? ? RenderListMarker at (-1,0) size 7x19: bullet
? ? ? ? ? ? RenderInline {A} at (0,0) size 134x19 [color=#0000EE]
? ? ? ? ? ? ? RenderText {#text} at (15,0) size 134x19
? ? ? ? ? ? ? ? text run at (15,0) width 134: "Basic Flash Plugin test"
? ? ? ? ? ? RenderText {#text} at (0,0) size 0x0
? ? ? ? ? RenderListItem {LI} at (0,50) size 250x20
? ? ? ? ? ? RenderListMarker at (-1,0) size 7x19: bullet
? ? ? ? ? ? RenderInline {A} at (0,0) size 157x19 [color=#0000EE]
? ? ? ? ? ? ? RenderText {#text} at (15,0) size 157x19
? ? ? ? ? ? ? ? text run at (15,0) width 157: "Nested Frame Plugin Test"
? ? ? ? ? ? RenderText {#text} at (0,0) size 0x0
? ? ? ? ? RenderListItem {LI} at (0,70) size 250x20
? ? ? ? ? ? RenderListMarker at (-1,0) size 7x19: bullet
? ? ? ? ? ? RenderInline {A} at (0,0) size 177x19 [color=#0000EE]
? ? ? ? ? ? ? RenderText {#text} at (15,0) size 177x19
? ? ? ? ? ? ? ? text run at (15,0) width 177: "Many Windowed Plugins test"
? ? ? ? ? ? RenderText {#text} at (0,0) size 0x0
? ? ? ? ? RenderListItem {LI} at (0,90) size 250x20
? ? ? ? ? ? RenderListMarker at (-1,0) size 7x19: bullet
? ? ? ? ? ? RenderInline {A} at (0,0) size 127x19 [color=#0000EE]
? ? ? ? ? ? ? RenderText {#text} at (15,0) size 127x19
? ? ? ? ? ? ? ? text run at (15,0) width 127: "One Flash Plugin test"
? ? ? ? ? ? RenderText {#text} at (0,0) size 0x0
? ? ? ? ? RenderListItem {LI} at (0,110) size 250x20
? ? ? ? ? ? RenderListMarker at (-1,0) size 7x19: bullet
? ? ? ? ? ? RenderInline {A} at (0,0) size 142x19 [color=#0000EE]
? ? ? ? ? ? ? RenderText {#text} at (15,0) size 142x19
? ? ? ? ? ? ? ? text run at (15,0) width 142: "Flash using 100% CPU"
? ? ? ? ? ? RenderText {#text} at (0,0) size 0x0
? ? ? ? ? RenderListItem {LI} at (0,130) size 250x20
? ? ? ? ? ? RenderListMarker at (-1,0) size 7x19: bullet
? ? ? ? ? ? RenderInline {A} at (0,0) size 144x19 [color=#0000EE]
? ? ? ? ? ? ? RenderText {#text} at (15,0) size 144x19
? ? ? ? ? ? ? ? text run at (15,0) width 144: "Windowless Plugin Test"
? ? ? ? ? ? RenderText {#text} at (0,0) size 0x0
? ? ? ? ? RenderListItem {LI} at (0,150) size 250x20
? ? ? ? ? ? RenderListMarker at (-1,0) size 7x19: bullet
? ? ? ? ? ? RenderInline {A} at (0,0) size 156x19 [color=#0000EE]
? ? ? ? ? ? ? RenderText {#text} at (15,0) size 156x19
? ? ? ? ? ? ? ? text run at (15,0) width 156: "Windowless Plugin Test 2"
? ? ? ? ? ? RenderText {#text} at (0,0) size 0x0
? ? ? ? ? RenderListItem {LI} at (0,170) size 250x20
? ? ? ? ? ? RenderListMarker at (-1,0) size 7x19: bullet
? ? ? ? ? ? RenderInline {A} at (0,0) size 189x19 [color=#0000EE]
? ? ? ? ? ? ? RenderText {#text} at (15,0) size 189x19
? ? ? ? ? ? ? ? text run at (15,0) width 189: "Many Windowless Plugins Test"
? ? ? ? ? ? RenderText {#text} at (0,0) size 0x0
? ? ? ? ? RenderListItem {LI} at (0,190) size 250x20
? ? ? ? ? ? RenderListMarker at (-1,0) size 7x19: bullet
? ? ? ? ? ? RenderInline {A} at (0,0) size 102x19 [color=#0000EE]
? ? ? ? ? ? ? RenderText {#text} at (15,0) size 102x19
? ? ? ? ? ? ? ? text run at (15,0) width 102: "JavaScript object"
? ? ? ? ? ? RenderText {#text} at (0,0) size 0x0
? ? ? ? ? RenderListItem {LI} at (0,210) size 250x20
? ? ? ? ? ? RenderListMarker at (-1,0) size 7x19: bullet
? ? ? ? ? ? RenderInline {A} at (0,0) size 198x19 [color=#0000EE]
? ? ? ? ? ? ? RenderText {#text} at (15,0) size 198x19
? ? ? ? ? ? ? ? text run at (15,0) width 198: "Plugin calling Javascript functions"
? ? ? ? ? ? RenderText {#text} at (0,0) size 0x0
? ? ? ? ? RenderListItem {LI} at (0,230) size 250x20
? ? ? ? ? ? RenderListMarker at (-1,0) size 7x19: bullet
? ? ? ? ? ? RenderInline {A} at (0,0) size 143x19 [color=#0000EE]
? ? ? ? ? ? ? RenderText {#text} at (15,0) size 143x19
? ? ? ? ? ? ? ? text run at (15,0) width 143: "Windows Media Player"
? ? ? ? ? ? RenderText {#text} at (0,0) size 0x0
? ? ? ? ? RenderListItem {LI} at (0,250) size 250x20
? ? ? ? ? ? RenderListMarker at (-1,0) size 7x19: bullet
? ? ? ? ? ? RenderInline {A} at (0,0) size 164x19 [color=#0000EE]
? ? ? ? ? ? ? RenderText {#text} at (15,0) size 164x19
? ? ? ? ? ? ? ? text run at (15,0) width 164: "DiamondX (Linux-specific)"
? ? ? ? ? ? RenderText {#text} at (0,0) size 0x0
? ? ? ? RenderBlock {DIV} at (0,290) size 250x70
? ? ? ? ? RenderBlock {H1} at (0,0) size 250x20 [color=#FFFFFF] [bgcolor=#FF0000]
? ? ? ? ? ? RenderText {#text} at (0,0) size 114x19
? ? ? ? ? ? ? text run at (0,0) width 114: "Scrolling Tests"
? ? ? ? ? RenderListItem {LI} at (0,30) size 250x20
? ? ? ? ? ? RenderListMarker at (-1,0) size 7x19: bullet
? ? ? ? ? ? RenderInline {A} at (0,0) size 135x19 [color=#0000EE]
? ? ? ? ? ? ? RenderText {#text} at (15,0) size 135x19
? ? ? ? ? ? ? ? text run at (15,0) width 135: "Overflow Div scrolling"
? ? ? ? ? ? RenderText {#text} at (0,0) size 0x0
? ? ? ? ? RenderListItem {LI} at (0,50) size 250x20
? ? ? ? ? ? RenderListMarker at (-1,0) size 7x19: bullet
? ? ? ? ? ? RenderInline {A} at (0,0) size 88x19 [color=#0000EE]
? ? ? ? ? ? ? RenderText {#text} at (15,0) size 88x19
? ? ? ? ? ? ? ? text run at (15,0) width 88: "Nested frames"
? ? ? ? ? ? RenderText {#text} at (0,0) size 0x0
? ? ? ? RenderBlock {DIV} at (0,370) size 250x50
? ? ? ? ? RenderBlock {H1} at (0,0) size 250x20 [color=#FFFFFF] [bgcolor=#CCCC00]
? ? ? ? ? ? RenderText {#text} at (0,0) size 101x19
? ? ? ? ? ? ? text run at (0,0) width 101: "WebKit Tests"
? ? ? ? ? RenderListItem {LI} at (0,30) size 250x20
? ? ? ? ? ? RenderListMarker at (-1,0) size 7x19: bullet
? ? ? ? ? ? RenderInline {A} at (0,0) size 78x19 [color=#0000EE]
? ? ? ? ? ? ? RenderText {#text} at (15,0) size 78x19
? ? ? ? ? ? ? ? text run at (15,0) width 78: "Layout Tests"
? ? ? ? ? ? RenderText {#text} at (0,0) size 0x0
? ? ? RenderBlock {DIV} at (0,170) size 392x270
? ? ? ? RenderBlock {DIV} at (0,0) size 250x50
? ? ? ? ? RenderBlock {H1} at (0,0) size 250x20 [color=#FFFFFF] [bgcolor=#008000]
? ? ? ? ? ? RenderText {#text} at (0,0) size 109x19
? ? ? ? ? ? ? text run at (0,0) width 109: "External Links"
? ? ? ? ? RenderListItem {LI} at (0,30) size 250x20
? ? ? ? ? ? RenderListMarker at (-1,0) size 7x19: bullet
? ? ? ? ? ? RenderInline {A} at (0,0) size 44x19 [color=#0000EE]
? ? ? ? ? ? ? RenderText {#text} at (15,0) size 44x19
? ? ? ? ? ? ? ? text run at (15,0) width 44: "Google"
? ? ? ? ? ? RenderText {#text} at (0,0) size 0x0
? ? ? ? RenderBlock {DIV} at (0,60) size 250x50
? ? ? ? ? RenderBlock {H1} at (0,0) size 250x20 [color=#FFFFFF] [bgcolor=#FF0000]
? ? ? ? ? ? RenderText {#text} at (0,0) size 86x19
? ? ? ? ? ? ? text run at (0,0) width 86: "Form Tests"
? ? ? ? ? RenderListItem {LI} at (0,30) size 250x20
? ? ? ? ? ? RenderListMarker at (-1,0) size 7x19: bullet
? ? ? ? ? ? RenderInline {A} at (0,0) size 109x19 [color=#0000EE]
? ? ? ? ? ? ? RenderText {#text} at (15,0) size 109x19
? ? ? ? ? ? ? ? text run at (15,0) width 109: "Posting to a target"
? ? ? ? ? ? RenderText {#text} at (0,0) size 0x0
? ? ? ? RenderBlock {DIV} at (0,120) size 250x70
? ? ? ? ? RenderBlock {H1} at (0,0) size 250x20 [color=#FFFFFF] [bgcolor=#800080]
? ? ? ? ? ? RenderText {#text} at (0,0) size 66x19
? ? ? ? ? ? ? text run at (0,0) width 66: "JS Tests"
? ? ? ? ? RenderListItem {LI} at (0,30) size 250x20
? ? ? ? ? ? RenderListMarker at (-1,0) size 7x19: bullet
? ? ? ? ? ? RenderInline {A} at (0,0) size 94x19 [color=#0000EE]
? ? ? ? ? ? ? RenderText {#text} at (15,0) size 94x19
? ? ? ? ? ? ? ? text run at (15,0) width 94: "JS Timer speed"
? ? ? ? ? ? RenderText {#text} at (0,0) size 0x0
? ? ? ? ? RenderListItem {LI} at (0,50) size 250x20
? ? ? ? ? ? RenderListMarker at (-1,0) size 7x19: bullet
? ? ? ? ? ? RenderInline {A} at (0,0) size 101x19 [color=#0000EE]
? ? ? ? ? ? ? RenderText {#text} at (15,0) size 101x19
? ? ? ? ? ? ? ? text run at (15,0) width 101: "Sorting in Action"
? ? ? ? ? ? RenderText {#text} at (0,0) size 0x0
? ? ? ? RenderBlock {DIV} at (0,200) size 250x70
? ? ? ? ? RenderBlock {H1} at (0,0) size 250x20 [color=#FFFFFF] [bgcolor=#CCCC00]
? ? ? ? ? ? RenderText {#text} at (0,0) size 98x19
? ? ? ? ? ? ? text run at (0,0) width 98: "IFrame Tests"
? ? ? ? ? RenderListItem {LI} at (0,30) size 250x20
? ? ? ? ? ? RenderListMarker at (-1,0) size 7x19: bullet
? ? ? ? ? ? RenderInline {A} at (0,0) size 171x19 [color=#0000EE]
? ? ? ? ? ? ? RenderText {#text} at (15,0) size 171x19
? ? ? ? ? ? ? ? text run at (15,0) width 171: "IFrame containing w3c page"
? ? ? ? ? ? RenderText {#text} at (0,0) size 0x0
? ? ? ? ? RenderListItem {LI} at (0,50) size 250x20
? ? ? ? ? ? RenderListMarker at (-1,0) size 7x19: bullet
? ? ? ? ? ? RenderInline {A} at (0,0) size 149x19 [color=#0000EE]
? ? ? ? ? ? ? RenderText {#text} at (15,0) size 149x19
? ? ? ? ? ? ? ? text run at (15,0) width 149: "IFrame contining bugzilla"
? ? ? ? ? ? RenderText {#text} at (0,0) size 0x0
layer at (8,554) size 792x46
? RenderBlock (positioned) {DIV} at (8,554) size 792x46
? ? RenderBlock {HR} at (0,6) size 792x2 [border: (1px inset #000000)]
? ? RenderBlock (anonymous) at (0,14) size 792x32
? ? ? RenderInline {B} at (0,0) size 96x15
? ? ? ? RenderText {#text} at (0,0) size 96x15
? ? ? ? ? text run at (0,0) width 96: "What is this page?"
? ? ? RenderText {#text} at (96,0) size 771x31
? ? ? ? text run at (96,0) width 3: " "
? ? ? ? text run at (99,0) width 531: "This is just a collection of links to test cases. If you ever find yourself creating a test webpage, add a test here. "
? ? ? ? text run at (630,0) width 141: "It isn't an automated test, but"
? ? ? ? text run at (0,16) width 97: "may be useful later. "
? ? ? ? text run at (97,16) width 140: "Try to keep the order logical."
?
2. 包含了一個類似于Firefox下FireBug插件的功能，所見即所得的查看網頁的結構。可以通過選擇Debug菜單中Show Web inspector選項。
web inspector
========
chrome源碼下載
1.為下載源碼做準備?這里下載depot_tools，解壓縮。?
http://src.chromium.org/svn/trunk/tools/depot_tools.zip?
安裝一個python 2.4，我直接從這里用svn簽出了一個。http://src.chromium.org/svn/trunk/tools/third_party/python/?
因為gclient要用svn，而我只有TortoiseSVN，所以我在這里簽出一個svn。?
http://src.chromium.org/svn/trunk/depot_tools/win/bootstrap/svn?
或者這里下載?
http://subversion.tigris.org
?
將depot_tools，python，svn的三個路徑添加到PATH環境變量中。?
之后，我把其中python和svn下面所有的.svn文件夾都刪除了，免得svn操作的時候混亂，產生不必要的麻煩。不知道如果不刪除會不會失敗。?
2.下載源碼 - 從SVN簽出?
gclient config http://src.chromium.org/svn/trunk/src?
（可選）在.gclient文件中添加這些?
? ? "custom_deps" : {?
? "src/webkit/data/layout_tests/LayoutTests": None,?
? ? },?
目的是為了不下載LayoutTests的文件。因為這個很浪費時間，而且好像目前對方的SVN還有問題，導致后面的gyp程序不能執行。?
gclient sync (--force)?
2.下載源碼 - 下載tgz的壓縮包?
http://build.chromium.org/buildbot/archives/chromium_tarball.html?
解壓縮后如果想更新到最新版本就執行這個?
gclient sync (--force)?
3.編譯?
編譯chrome_exe工程就可以了
========
鏈接
http://blog.csdn.net/xingtian713?viewmode=contents
瀏覽器研究博文
總結
以上是生活随笔為你收集整理的WebKit和Chrome源码分析的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 图解Windows网络命令使用实例
- 下一篇： .Net版行号消除器