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版行号消除器