Chrome如何顯示網頁

概念應用層

(此插圖的原始Google文檔為http://goo.gl/MsEJX,任何@ chromium.org均可開放對其進行編輯)
每個框代表一個概念性的應用程序層。任何層都不應該了解或依賴任何更高層。
  • WebKit:在Safari,Chromium和所有其他基于WebKit的瀏覽器之間共享的渲染引擎。該港口是WebKit的一部分,與平臺相關的系統集成服務,如資源加載和圖形。
  • 膠水:將WebKit類型轉換為Chromium類型。這是我們的“ WebKit嵌入層”。它是兩個瀏覽器Chromium和test_shell(允許我們測試WebKit)的基礎。
  • 渲染器/渲染主機:這是Chromium的“多進程嵌入層”。它跨流程邊界代理通知和命令。
  • WebContents:一個可重用的組件,它是Content模塊的主要類。它很容易嵌入,以允許將HTML的多進程呈現到視圖中。有關更多信息,請參見內容模塊頁面。
  • 瀏覽器:?代表瀏覽器窗口,其中包含多個WebContent。
  • 選項卡助手:可以附加到WebContents的單個對象(通過WebContentsUserData mixin)。瀏覽器將其中的各種附加到它所擁有的WebContentses(一個用于收藏夾圖標,一個用于信息欄等)。

WebKit

我們使用WebKit開源項目來布局網頁。此代碼從Apple中提取,并存儲在/ third_party / WebKit目錄中。WebKit主要由代表核心布局功能的“ WebCore”和運行JavaScript的“ JavaScriptCore”組成。我們僅出于測試目的運行JavaScriptCore,通常我們將其替換為高性能的V8 JavaScript引擎。我們實際上并沒有使用Apple稱為“ WebKit”的層,它是WebCore和OS X應用程序(例如Safari)之間的嵌入API。為了方便起見,我們通常將Apple的代碼統稱為“ WebKit”。

WebKit端口

在最低級別,我們有WebKit“端口”。這是我們所需的特定于平臺的功能的實現,該功能可與獨立于平臺的WebCore代碼對接。這些文件位于WebKit樹中,通常位于目錄中或作為帶有鉻后綴的文件。我們的許多端口實際上并不是特定于操作系統的:您可以將其視為WebCore的“ Chromium端口”。對于每個平臺,某些部分(如字體渲染)必須以不同的方式處理。

  • 網絡流量是由我們的多進程資源加載系統處理的,而不是直接從渲染過程傳遞給OS的。
  • 圖形使用為Android開發的Skia圖形庫。這是一個跨平臺的圖形庫,可處理除文本以外的所有圖像和圖形基元。Skia位于/?t?hird_party / skia中。圖形操作的主要入口點是/webkit/port/platform/graphics/GraphicsContextSkia.cpp。它使用同一目錄以及/ base / gfx中的許多其他文件。

WebKit膠

與第三方WebKit代碼相比,Chromium應用程序使用不同的類型,編碼樣式和代碼布局。WebKit“膠水”為使用Google編碼約定和類型的WebKit提供了更方便的嵌入API(例如,我們使用std :: string代替WebCore :: StringGURL代替KURL)。粘合代碼位于/ webkit / glue中。膠合對象的名稱通常類似于WebKit對象,但開頭帶有“ Web”。例如,WebCore :: Frame變為WebFrame。

WebKit的“膠水”層將其余的Chromium代碼庫與WebCore數據類型隔離開來,以幫助最小化WebCore更改對Chromium代碼庫的影響。因此,Chromium永遠不會直接使用WebCore數據類型。當Chromium需要戳入某些WebCore對象時,API會被添加到WebKit的“膠水”中。

“測試外殼”應用程序是一個準系統的Web瀏覽器,用于測試我們的WebKit端口和粘合代碼。它使用與Chromium相同的粘合接口與WebKit進行通信。它為開發人員提供了一種更簡單的方法來測試新代碼,而無需具有許多復雜的瀏覽器功能,線程和進程。此應用程序還用于運行自動化的WebKit測試。但是,“測試外殼”的缺點是,它不像Chromium那樣以多進程方式使用WebKit。內容模塊嵌入在稱為“內容外殼”的應用程序中,該應用程序將很快運行測試。

渲染過程

Chromium的渲染過程使用膠水接口嵌入了我們的WebKit端口。它不包含太多代碼:它的工作主要是作為瀏覽器IPC通道的呈現器端。

渲染器中最重要的類是RenderView,它位于/content/renderer/render_view_impl.cc中。該對象表示一個網頁。它處理往返于瀏覽器進程的所有與導航有關的命令。它源自提供繪畫和輸入事件處理的RenderWidget。所述的RenderView經由全球瀏覽器進程通信(每呈現進程)RenderProcess對象。

FAQ:RenderWidget和RenderView有什么區別?RenderWidget通過在稱為WebWidgetDelegate的粘合層中實現抽象接口,映射到一個WebCore :: Widget對象?;旧?,這是屏幕上的一個窗口,用于接收輸入事件并繪制到該窗口中。甲的RenderView從繼承RenderWidget并且是選項卡或彈出窗口的內容。除了小部件的繪制和輸入事件外,它還處理導航命令。僅在一種情況下存在RenderWidget而沒有RenderView?,這是網頁上的選擇框。這些是帶有向下箭頭的框,這些框會彈出一個選項列表。選擇框必須使用本機窗口渲染,以便它們可以顯示在其他所有框的上方,并在必要時彈出框。這些窗口需要繪制并接收輸入,但是沒有單獨的“網頁”(RenderView)。

渲染器中的線程

每個渲染器都有兩個線程(有關圖表,請參見多進程體系結構頁面;有關如何編程,請參見Chromium中的線程)。渲染線程是主要對象(例如RenderView)所在的位置并運行所有WebKit代碼。當它與瀏覽器通信時,消息首先發送到主線程,然后主線程將消息分派給瀏覽器進程。除其他外,這使我們能夠將消息從渲染器同步發送到瀏覽器。發生這種情況的原因是少數操作需要瀏覽器的結果才能繼續。一個示例是在JavaScript請求時獲取頁面的Cookie。渲染器線程將阻塞,并且主線程將對所有收到的消息進行排隊,直到找到正確的響應為止。隨后將任何同時接收到的消息發布到渲染器線程以進行正常處理。

瀏覽器過程

 

低級瀏覽器過程對象

與渲染過程的所有IPC通信都是在瀏覽器的I / O線程上完成的。該線程還處理所有網絡通信,以防止其干擾用戶界面。

在主線程(運行用戶界面的地方)上初始化RenderProcessHost時,它將創建新的渲染器進程和帶有指向渲染器的命名管道的ChannelProxy?IPC對象。該對象在瀏覽器的I / O線程上運行,偵聽到渲染器的命名管道,并自動將所有消息轉發回UI線程上的RenderProcessHost。甲ResourceMessageFilter將被安裝在該通道中,這將篩選出可直接在I / O線程上處理諸如網絡請求的某些消息。此過濾發生在ResourceMessageFilter :: OnMessageReceived中。

所述RenderProcessHost在UI線程上是負責分派所有視圖專用消息到適當的RenderViewHost(它處理非觀看專用消息本身的有限的數目)。這種調度發生在RenderProcessHost :: OnMessageReceived中。

高級瀏覽器過程對象

特定于視圖的消息進入RenderViewHost :: OnMessageReceived。大多數消息都在這里處理,其余消息轉發到RenderWidgetHost基類。這兩個對象映射到渲染器中的RenderViewRenderWidget(有關這些含義,請參見上面的“ Render Process”)。每個平臺都有一個視圖類(RenderWidgetHostView [Aura | Gtk | Mac | Win]),以實現與本機視圖系統的集成。

RenderView?/?Widget上方是WebContents對象,大多數消息實際上最終都作為對該對象的函數調用而結束。一個WebContents代表網頁的內容。它是內容模塊中的頂級對象,并負責以矩形視圖顯示網頁。有關更多信息,請參見內容模塊頁面。

所述WebContents對象被包含在TabContentsWrapper。那是chrome /并負責制表符。

說明性例子

圍繞Chromium源代碼?涵蓋了導航和啟動的其他示例。

“設置游標”消息的壽命

設置光標是從渲染器發送到瀏覽器的典型消息的示例。在渲染器中,將發生以下情況。

  • 設置光標消息是由WebKit在內部生成的,通常是響應輸入事件而生成的。設置光標消息將從content / renderer / render_widget.cc中的RenderWidget :: SetCursor開始。
  • 它將調用RenderWidget :: Send來分派消息。RenderView也使用此方法將消息發送到瀏覽器。它將調用RenderThread :: Send?。
  • 這將調用IPC :: SyncChannel,它將在內部將消息代理到渲染器的主線程,并將其發布到命名管道以發送到瀏覽器。

然后瀏覽器控制:

  • RenderProcessHost中的IPC :: ChannelProxy在瀏覽器的I / O線程上接收所有消息。它首先通過ResourceMessageFilter發送它們,后者直接在I / O線程上調度網絡請求和相關消息。由于我們的消息沒有被過濾掉,因此它將繼續進入瀏覽器的UI線程(IPC :: ChannelProxy在內部執行此操作)。
  • RenderProcessHost :: OnMessageReceived內容/瀏覽器/ renderer_host / render_process_host_impl.cc獲取相應的渲染過程的所有意見的消息。它直接處理幾種類型的消息,其余的則轉發到與發送消息的源RenderView對應的適當的RenderViewHost。
  • 該消息到達RenderViewHost :: OnMessageReceived內容/瀏覽器/ renderer_host / render_view_host_impl.cc。很多消息都在這里處理,但我們是不是因為它是從發送的消息RenderWidget和處理由RenderWidgetHost。
  • RenderViewHost中所有未處理的消息都將自動轉發到RenderWidgetHost,包括我們設置的光標消息。
  • 內容/瀏覽器/renderer_host/render_view_host_impl.cc中的消息映射??最終在RenderWidgetHost :: OnMsgSetCursor中接收到消息,并調用適當的UI函數來設置鼠標光標。

“鼠標單擊”消息的壽命

發送鼠標單擊是從瀏覽器到渲染器的典型消息示例。

  • Windows消息由RenderWidgetHostViewWin :: OnMouseEvent在瀏覽器的UI線程上接收,然后在同一類中調用ForwardMouseEventToRenderer。
  • 轉發器功能將輸入事件打包到一個跨平臺的WebMouseEvent中,并最終將其發送到與之關聯的RenderWidgetHost。
  • RenderWidgetHost :: ForwardInputEvent創建一條IPC消息ViewMsg_HandleInputEvent,將WebInputEvent序列化為其,然后調用RenderWidgetHost :: Send。
  • 這只是轉發給擁有的RenderProcessHost :: Send函數,后者將消息提供給IPC :: ChannelProxy。
  • 在內部,IPC :: ChannelProxy將消息代理到瀏覽器的I / O線程,并將其寫入相應渲染器的命名管道。

請注意,WebContents中還會創建許多其他類型的消息,尤其是導航消息。它們遵循從WebContentsRenderViewHost的相似路徑。

然后渲染器控制:

  • ?渲染器主線程上的IPC :: Channel讀取瀏覽器發送的消息,而IPC :: ChannelProxy代理到渲染器線程。
  • RenderView :: OnMessageReceived獲取消息。許多類型的消息直接在這里處理。由于單擊消息不是,因此它(與所有其他未處理的消息一起)進入RenderWidget :: OnMessageReceived??,后者又將其轉發到??RenderWidget :: OnHandleInputEvent。
  • 將輸入事件提供給??WebWidgetImpl :: HandleInputEvent,在此將其轉換為WebKit?PlatformMouseEvent類,并提供給WebKit?中的WebCore :: Widget類。

如何用谷歌瀏覽器分析網頁速度

凱斯巴斯克斯

凱斯巴斯克斯

通過Kayce?巴斯克技術作家,Chrome DevTools&Lighthouse

在這個全面的Chrome DevTools網絡分析功能參考中,探索分析頁面加載方式的新方法。注意:此參考文獻基于Chrome 58.如果您使用其他版本的Chrome,則DevTools的用戶界面和功能可能會有所不同。檢查chrome://help您正在運行的Chrome版本。

記錄網絡請求

默認情況下,只要DevTools處于打開狀態,DevTools就會在“網絡”面板中記錄所有網絡請求。

網絡面板。
圖1。網絡面板

停止記錄網絡請求

要停止錄制請求:

  • 單擊?網絡”面板上的“?停止錄制網絡日志?”?它變為灰色表示DevTools不再記錄請求。
  • 在“網絡”面板處于焦點時按Command+?E(Mac)或?Control+?E(Windows,Linux)。

清除請求

明確

單擊“網絡”面板上的“?清除??”以清除“請求”表中的所有請求。

清除按鈕。
圖2。清楚,用藍色勾勒出來

跨頁面加載保存請求

要跨頁面加載保存請求,請選中“網絡”面板上的“?保留日志”復選框。DevTools保存所有請求,直到您禁用?保留日志。

保留日志復選框。
圖3?!氨A羧罩尽睆瓦x框,以藍色標出

在頁面加載期間捕獲屏幕截圖

捕獲屏幕截圖以分析用戶在等待頁面加載時看到的內容。

捕獲屏幕截圖

要啟用屏幕截圖,請單擊“網絡”面板上的“?捕獲屏幕截圖??”。啟用后會變為藍色。

在“網絡”面板處于焦點時重新加載頁面以捕獲屏幕截圖。

捕獲后,您可以通過以下方式與屏幕截圖進行交互:

  • 將鼠標懸停在屏幕截圖上可查看捕獲屏幕截圖的位置?!案攀觥贝案裰袑@示一條黃線。
  • 單擊屏幕截圖的縮略圖以過濾掉捕獲屏幕截圖后發生的任何請求。
  • 雙擊縮略圖以放大縮略圖。

將鼠標懸停在屏幕截圖上。
圖4。將鼠標懸停在屏幕截圖上?!案攀觥贝案窈汀捌俨肌敝械狞S色垂直線表示捕獲屏幕截圖的時間。

重播XHR請求

要重播XHR請求,請右鍵單擊“請求”表中的請求,然后選擇“?重播XHR”。

選擇重播XHR。
圖5。選擇重播XHR

改變加載行為

通過禁用瀏覽器緩存來模擬首次訪問者

要模擬首次使用者體驗您網站的方式,請選中“?禁用緩存”復選框。DevTools禁用瀏覽器緩存。這更準確地模擬了首次用戶的體驗,因為請求是在重復訪問時從瀏覽器緩存提供的。

禁用緩存復選框。
圖6?!敖镁彺妗睆瓦x框,以藍色標出

從“網絡條件”抽屜中禁用瀏覽器緩存

如果要在其他DevTools面板中工作時禁用緩存,請使用“網絡條件”抽屜。

  1. 打開“?網絡條件”抽屜。
  2. 選中或取消選中“?禁用緩存”復選框。

手動清除瀏覽器緩存

要隨時手動清除瀏覽器緩存,請右鍵單擊“請求”表中的任意位置,然后選擇“?清除瀏覽器緩存”。

選擇清除瀏覽器緩存。
圖7。選擇清除瀏覽器緩存

離線模擬

有一類新的Web應用程序,稱為Progressive Web Apps,可以在服務工作者的幫助下脫機運行。在構建此類應用程序時,能夠快速模擬沒有數據連接的設備非常有用。

選中“?脫機”復選框以模擬完全脫機的網絡體驗。

離線復選框
圖8?!懊摍C”復選框,以藍色標出

模擬慢速網絡連接

Network Throttling?菜單模擬2G,3G和其他連接速度。

網絡限制菜單。
圖9。網絡限制菜單,以藍色標出

您可以從各種預設中進行選擇,例如Regular或Good 2G。您還可以通過打開“網絡限制”菜單并選擇“?自定義”?>“?添加”來添加自己的自定義預設。

DevTools在“?網絡”選項卡旁邊顯示一個警告圖標,提醒您已啟用限制。

從“網絡條件”抽屜模擬慢速網絡連接

如果要在其他DevTools面板中工作時節流網絡連接,請使用“網絡條件”抽屜。

  1. 打開“?網絡條件”抽屜。
  2. Network Throttling菜單中選擇所需的連接速度。

手動清除瀏覽器cookie

要隨時手動清除瀏覽器cookie,請右鍵單擊“請求”表中的任意位置,然后選擇“?清除瀏覽器Cookie”。

選擇清除瀏覽器Cookie。
圖10。選擇清除瀏覽器Cookie

覆蓋用戶代理

要手動覆蓋用戶代理:

  1. 打開“?網絡條件”抽屜。
  2. 取消選中自動選擇。
  3. 從菜單中選擇用戶代理選項,或在文本框中輸入自定義選項。

過濾請求

按屬性過濾請求

使用“?過濾器”文本框按屬性過濾請求,例如請求的域或大小。

如果您看不到文本框,則可能隱藏了“過濾器”窗格。請參見隱藏過濾器窗格。

“過濾器”文本框。
圖11?!斑^濾器”文本框,以藍色標出

通過使用空格分隔每個屬性,可以同時使用多個屬性。例如,mime-type:image/gif larger-than:1K顯示大于一千字節的所有GIF。這些多屬性過濾器等同于AND操作。目前不支持OR操作。

以下是支持的屬性的完整列表。

  • domain。僅顯示指定域中的資源。您可以使用通配符(*)來包含多個域。例如,*.com?顯示以所有域名結尾的資源.com。DevTools使用它遇到的所有域填充自動完成下拉菜單。
  • has-response-header。顯示包含指定HTTP響應標頭的資源。DevTools使用它遇到的所有響應標頭填充自動完成下拉列表。
  • is。使用is:runningWebSocket資源。
  • larger-than。顯示大于指定大小的資源(以字節為單位)。設置值1000等于設置值1k。
  • method。顯示通過指定的HTTP方法類型檢索的資源。DevTools使用它遇到的所有HTTP方法填充下拉列表。
  • mime-type。顯示指定MIME類型的資源。DevTools使用它遇到的所有MIME類型填充下拉列表。
  • mixed-content。顯示所有混合內容資源(mixed-content:all)或僅顯示當前顯示的資源(mixed-content:displayed)。
  • scheme。顯示通過不受保護的HTTP(scheme:http)或受保護的HTTPS(scheme:https)檢索的資源。
  • set-cookie-domain。顯示具有Set-Cookie標題的資源,該標題具有Domain與指定值匹配的屬性。DevTools使用它遇到的所有cookie域填充自動完成。
  • set-cookie-name。顯示具有Set-Cookie名稱與指定值匹配的標頭的資源。DevTools使用它遇到的所有cookie名稱填充自動完成。
  • set-cookie-value。顯示具有Set-Cookie與指定值匹配的值的標頭的資源。DevTools使用它遇到的所有cookie值填充自動完成。
  • status-code。僅顯示HTTP狀態代碼與指定代碼匹配的資源。DevTools使用它遇到的所有狀態代碼填充自動完成下拉菜單。

按類型過濾請求

要按請求類型篩選請求,請單擊“網絡”面板上的XHR,JS,CSS,?Img,媒體,字體,文檔,WS(WebSocket),清單其他(此處未列出的任何其他類型)按鈕。

如果您看不到這些按鈕,則可能隱藏了“過濾器”窗格。請參見隱藏過濾器窗格。

要同時啟用多個類型過濾器,請按住Command?(Mac)或Control(Windows,Linux),然后單擊。

使用Type過濾器顯示JS,CSS和Doc [ument]資源。
圖12。使用Type過濾器顯示JS,CSS和Doc [ument]資源。

按時間過濾請求

單擊并在“概述”窗格中向左或向右拖動,僅顯示在該時間范圍內處于活動狀態的請求。過濾器是包含在內的。顯示在突出顯示的時間內處于活動狀態的任何請求。

過濾掉2500ms左右未激活的任何請求。
圖13。過濾掉2500ms左右未激活的任何請求

隱藏數據網址

數據URL是嵌入到其他文檔中的小文件。您在Requests表中看到的任何請求?data:都是數據URL。

選中隱藏數據URL復選框以隱藏這些請求。

隱藏數據URL復選框。
圖14。隱藏數據URL復選框

排序請求

默認情況下,“請求”表中的請求按啟動時間排序,但您可以使用其他條件對表進行排序。

按列排序

單擊“請求”中任何列的標題,以按該列對請求進行排序。

按活動階段排序

要更改Waterfall排序請求的方式,請右鍵單擊“請求”表的標題,將鼠標懸停在“?瀑布”上,然后選擇以下選項之一:

  • 開始時間。啟動的第一個請求位于頂部。
  • 響應時間。開始下載的第一個請求位于頂部。
  • 結束時間。完成的第一個請求位于頂部。
  • 總持續時間。具有最短連接設置和請求/響應的請求位于頂部。
  • 延遲。等待最短響應時間的請求位于頂部。

這些描述假設每個相應的選項從最短到最長排名。單擊Waterfall列的標題可以反轉順序。

按總持續時間對瀑布進行排序。
圖15。按總持續時間對瀑布進行排序。每個酒吧較輕的部分是等待的時間。較暗的部分是下載字節所花費的時間。

分析請求

只要DevTools處于打開狀態,它就會在“網絡”面板中記錄所有請求。使用“網絡”面板分析請求。

查看請求日志

使用“請求”表查看DevTools打開時所做的所有請求的日志。單擊或將鼠標懸停在請求上會顯示有關它們的更多信息。

請求表。
圖16。請求表,以藍色標出

“請求”表默認顯示以下列:

  • 名字。資源的文件名或標識符。
  • 現狀。HTTP狀態代碼。
  • 輸入。請求的資源的MIME類型。
  • 發起人。以下對象或進程可以發起請求:
    • 解析器。Chrome的HTML解析器。
    • 重定向。HTTP重定向。
    • 腳本。一個JavaScript函數。
    • 其他。其他一些流程或操作,例如通過鏈接導航到頁面或在地址欄中輸入URL。
  • 大小。響應標頭與響應主體的組合大小,由服務器提供。
  • 時間。從請求開始到響應中最后一個字節的接收的總持續時間。
  • 瀑布。每個請求的活動的視覺細分。

添加或刪除列

右鍵單擊“請求”表的標題,然后選擇隱藏或顯示它的選項。當前顯示的選項旁邊有復選標記。

將列添加到“請求”表。
圖17。將列添加到“請求”表。

添加自定義列

要將自定義列添加到“請求”表,請右鍵單擊“請求”表的標題,然后選擇“?響應標題”?>“?管理標題列”。

將自定義列添加到“請求”表。
圖18。將自定義列添加到“請求”表。

查看彼此相關的請求時間

使用瀑布查看彼此相關的請求時間。默認情況下,瀑布按請求的開始時間進行組織。因此,遠離左側的請求比遠離右側的請求更早開始。

請參閱按活動階段排序,以查看可以對瀑布進行排序的不同方法。

“請求”窗格的“瀑布”列。
圖19?!罢埱蟆贝案竦摹捌俨肌绷?。

分析WebSocket連接的幀

要查看WebSocket連接的框架:

  1. 單擊“?請求”表的“?名稱”列下的WebSocket連接的URL?。
  2. 單擊“?框架”選項卡。該表顯示了最后100幀。

要刷新表,請在“請求”表的“?名稱”列下重新單擊WebSocket連接的?名稱。

框架選項卡。
圖20??蚣苓x項卡,以藍色標出

該表包含三列:

  • 數據。消息有效負載。如果郵件是純文本,則會在此處顯示。對于二進制操作碼,此列顯示操作碼的名稱和代碼。支持以下操作碼:Continuation Frame,Binary Frame,Connection Close Frame,Ping Frame和Pong Frame。
  • 長度。消息有效負載的長度,以字節為單位。
  • 時間。收到或發送郵件的時間。

消息根據其類型進行顏色編碼:

  • 傳出的短信是淺綠色的。
  • 傳入的短信是白色的。
  • WebSocket操作碼是淺黃色的。
  • 錯誤是淺紅色的。

查看響應正文的預覽

要查看響應正文的預覽:

  1. 單擊“?請求”表的“?名稱”列下的請求的URL?。
  2. 單擊“?預覽”選項卡。

此選項卡主要用于查看圖像。

預覽選項卡。
圖21。預覽選項卡,以藍色標出

查看回復正文

要查看請求的響應正文:

  1. 單擊“?請求”表的“?名稱”列下的請求的URL?。
  2. 單擊“?響應”選項卡。

響應選項卡。
圖22?!绊憫边x項卡,以藍色標出

查看HTTP標頭

要查看有關請求的HTTP標頭數據:

  1. 在“請求”表的“?名稱”列下單擊請求的URL?。
  2. 單擊“?標題”選項卡。

標題選項卡。
圖23。標題選項卡,以藍色標出

查看HTTP標頭源

默認情況下,“標題”選項卡按字母順序顯示標題名稱。要按收到的順序查看HTTP標頭名稱:

  1. 打開您感興趣的請求的標題選項卡。請參閱?查看HTTP標頭。
  2. 單擊“?請求標頭”或“?響應標頭”部分旁邊的“?查看源”。

查看查詢字符串參數

要以人類可讀的格式查看URL的查詢字符串參數:

  1. 打開您感興趣的請求的標題選項卡。請參閱?查看HTTP標頭。
  2. 轉到“?查詢字符串參數”部分。

查詢字符串參數部分。
圖24?!安樵冏址畢怠辈糠?,以藍色標出

查看查詢字符串參數源

要查看請求的查詢字符串參數源:

  1. 轉到“查詢字符串參數”部分。請參閱查看查詢字符串參數。
  2. 單擊查看源。

查看URL編碼的查詢字符串參數

要以人類可讀的格式查看查詢字符串參數,但保留了編碼:

  1. 轉到“查詢字符串參數”部分。請參閱查看查詢字符串參數。
  2. 單擊查看URL編碼。

查看cookie

要查看請求的HTTP標頭中發送的cookie:

  1. 單擊“?請求”表的“?名稱”列下的請求的URL?。
  2. 單擊Cookies選項卡。

有關每個列的說明,請參閱字段。

Cookies選項卡。
圖25。Cookies選項卡,以藍色標出

查看請求的時間細分

要查看請求的時間細分:

  1. 單擊“?請求”表的“?名稱”列下的請求的URL?。
  2. 單擊“?計時”選項卡。

請參閱預覽時序細分,以便更快地訪問此數據。

有關您可能在“時序”選項卡中看到的每個階段的詳細信息,請參閱時序分解階段。

時間選項卡。
圖26。時間選項卡,以藍色標出

以下是有關每個階段的更多信息。

有關訪問此視圖的另一種方法,請參閱查看時間細分。

預覽時間細分

要查看請求的計時細分預覽,請將鼠標懸停在“請求”表的“?瀑布”列中的請求條目上。

請參閱查看請求的時間細分,以獲取訪問此數據的方法,該方法不需要懸停。

預覽請求的時間細分。
圖27。預覽請求的時間細分

時間分解階段解釋

以下是有關您在“時序”選項卡中可能會看到的每個階段的更多信息:

  • 排隊。瀏覽器在以下時間排隊請求:
    • 有更高優先級的請求。
    • 此源已打開六個TCP連接,這是限制。僅適用于HTTP / 1.0和HTTP / 1.1。
    • 瀏覽器正在短暫分配磁盤緩存中的空間
  • 停滯不前。由于排隊中描述的任何原因,請求可能會停止。
  • DNS查找。瀏覽器正在解析請求的IP地址。
  • 代理協商。瀏覽器正在與代理服務器協商請求。
  • 請求已發送。請求正在發送。
  • ServiceWorker準備。瀏覽器正在啟動服務工作者。
  • 請求ServiceWorker。請求將發送給服務工作者。
  • 等待(TTFB)。瀏覽器正在等待響應的第一個字節。TTFB代表Time To First Byte。此時間包括1次往返延遲和服務器準備響應所用的時間。
  • 內容下載。瀏覽器正在接收響應。
  • 接收推送。瀏覽器通過HTTP / 2服務器推送接收此響應的數據。
  • 讀推。瀏覽器正在讀取先前收到的本地數據。

查看啟動器和依賴項

要查看請求的啟動器和依賴項,Shift?請在“請求”表中按住并將鼠標懸停在請求上。DevTools將啟動器顏色設置為綠色,依賴關系設置為紅色。

查看請求的啟動器和依賴項。
圖28。查看請求的啟動器和依賴項

當Requests表按時間順序排序時,您懸停在請求上方的第一個綠色請求是依賴項的發起者。如果上面有另一個綠色請求,則該更高的請求是發起者的發起者。等等。

查看加載事件

DevTools?在“網絡”面板上的多個位置顯示DOMContentLoadedload事件的時間。該DOMContentLoaded事件為藍色,load事件為紅色。

“網絡”面板上DOMContentLoaded和加載事件的位置。
圖29?!?網絡”面板中的事件DOMContentLoaded和?load事件?的位置

查看請求總數

“網絡”面板底部的“摘要”窗格中列出了請求總數。警告:此數字僅跟蹤自DevTools打開以來記錄的請求。如果在DevTools打開之前發生了其他請求,則不會計算這些請求。

自DevTools打開以來的請求總數
圖30。自DevTools打開以來的請求總數

查看總下載大小

請求的總下載大小列在“網絡”面板底部的“摘要”窗格中。警告:此數字僅跟蹤自DevTools打開以來記錄的請求。如果在DevTools打開之前發生了其他請求,則不會計算這些請求。

請求的總下載大小
圖31。請求的總下載大小

請參閱查看資源的未壓縮大小以查看瀏覽器解壓縮后資源的大小。

查看導致請求的堆棧跟蹤

當JavaScript語句導致請求資源時,將鼠標懸停在Initiator?列上以查看導致請求的堆棧跟蹤。

堆棧跟蹤導致資源請求
圖32。堆棧跟蹤導致資源請求

查看資源的未壓縮大小

使用大請求行

單擊“?使用大型請求行”?,然后查看“?大小”列的底部值。

未壓縮資源的示例。
圖33。jquery-bundle.js通過網絡發送的文件30.9 KB的壓縮大小是,而未壓縮的大小是?86.3 KB

導出請求數據

將所有網絡請求保存到HAR文件

要將所有網絡請求保存到HAR文件:

  1. 右鍵單擊“請求”表中的任何請求。
  2. 選擇另存為內容HAR。DevTools保存自您將DevTools打開到HAR文件以來發生的所有請求。無法過濾請求或僅保存單個請求。

獲得HAR文件后,可以將其導入DevTools進行分析。只需將HAR文件拖放到“請求”表中即可。另請參閱HAR Analyzer。

選擇另存為內容HAR。
圖34。選擇另存為內容HAR

將一個或多個請求復制到剪貼板

在“?請求”表的“?名稱”列下,右鍵單擊某個請求,將鼠標懸停在“?復制”上,然后選擇以下選項之一:

  • 復制鏈接地址。將請求的URL復制到剪貼板。
  • 復制響應。將響應正文復制到剪貼板。
  • 復制為cURL。將請求復制為cURL命令。
  • 全部復制為cURL。將所有請求復制為一系列cURL命令。
  • 全部復制為HAR。將所有請求復制為HAR數據。

選擇復制響應。
圖35。選擇復制響應

更改“網絡”面板的布局

展開或折疊“網絡”面板UI的各個部分,以關注對您來說重要的內容。

隱藏“過濾器”窗格

過濾

默認情況下,DevTools顯示“?過濾器”窗格。單擊“?過濾”?以隱藏它。

隱藏過濾器按鈕
圖36。隱藏過濾器,以藍色標出

使用大型請求行

如果需要在網絡請求表中添加更多空格,請使用大行。使用大行時,某些列還提供了更多信息。例如,“?大小”?列的底部值是請求的未壓縮大小。

“請求”窗格中的大型請求行的示例。
圖37?!罢埱蟆贝案裰械拇笮驼埱笮械氖纠?/figcaption>

使用大型請求行

單擊“?使用大型請求行”?以啟用大行。

Large Request Rows按鈕
圖38。大請求行,以藍色標出

隱藏“概述”窗格

隱藏概述

默認情況下,DevTools顯示“?概述”窗格。單擊隱藏概述?以隱藏它。

隱藏概述按鈕
圖39。隱藏概述,以藍色標出

Chrome 70.0.3538.67版本更新說明

修改了27項功能:

Symbol.prototype.description

JavaScriptA description property is being added to Symbol.prototype. This provides a more ergonomic way of accessing the description of a Symbol. Previously, the description could be only be accessed indirectly through the Symbol.protoype.toString().

TLS 1.3

SecurityTLS 1.3 is an overhaul of the TLS protocol with a simpler, less error-prone design that improves both efficiency and security. The new design reduces the number of round-trips required to establish a connection and removes legacy insecure options, making it easier to securely configure a server. It additionally encrypts more of the handshake and makes the resumption mode more resilient to key compromise.

The <rp> element defaults to display:none

CSSThe default style of the <rp> element is changed to “display:none” instead of “display:inline” even if it is not inside the <ruby>element as defined in HTML specification. This behavior is implemented in the UA style sheet, but the web author can override it.

Behavior in other browsers:
– Edge: display:inline (outside <ruby>), display:none (inside <ruby>)
– Firefox: display:none
– Safari: display:inline, display:none (inside <ruby>)

The ontouch* APIs default to disabled on desktop

DOMTo avoid confusion on touch feature detection, ontouch* members on window, document, and element are disabled by default on desktop devices (Mac, Windows, Linux, ChromeOS). Note that this is not disabling touches, and usage such as `addEventListener(“touchstart”, …)` is not being affected.

Update behavior of CSS Grid Layout percentage row tracks and gutters

CSSThis updates the behavior of percentage row tracks and gutters in grid containers with indefinite heights. Previously, these were behaving similarly to percentage heights in regular blocks, but the CSS WG has resolved to make them behave the same as for columns, making them symmetric. Percentages are now ignored when computing intrinsic height and resolved afterwards against that height. That way both column and row axes will have symmetric behavior to resolve percentages tracks and gutters.

WebUSB on Dedicated Workers

DeviceWebUSB is enabled inside dedicated worker contexts. This allows developers to perform heavy I/O and processing of data from a USB device on a separate thread to reduce the performance impact on the main thread.

Priority Hints

Network / ConnectivityPriority Hints provide developers a way to indicate a resource’s relative importance to the browser, allowing more control over the order resources are loaded.

Many factors influence a resource’s priority in browsers. These include type, visibility, and preload status of a resource. Priority Hints introduces a developer-set “importance” attribute allowing developers to influence the computed priority of a resource. Supported importance values are auto, low, and high.

RTCPeerConnection.getConfiguration()

Web RTCThis change implements getConfiguration() according to the WebRTC 1.0. Specifically it returns the last configuration applied via setConfiguration(), or if setConfiguration() hasn’t been called, the configuration the RTCPeerConnection was constructed with.

Remove AppCache from non-secure contexts

SecurityAppCache is now removed from insecure contexts. AppCache is a powerful feature that allows offline and persistent access to an origin, which is a powerful privilege escalation for an XSS. This will remove that attack vector by only allowing it over HTTPS.

This feature was deprecated in Chrome 67.

Remove HTMLFrameSetElement’s anonymous getter.

DOMDeprecate and remove HTMLFrameSetElement’s anonymous getter which is non-standard.

Remove OS build number from user-agent string

Network / ConnectivityThe OS build number (for example, “NJH47F” or “OPM4.171019.021.D1” on Android) has been removed from the user-agent identification (User-Agent header and navigator.userAgent) on Android and on iOS. The iOS change follows Safari’s implementation and freezes the build number as “15E148” instead of removing it.

This will prevent abuses of that information such as exploit targeting and fingerprinting. It’ll also bring Chrome closer in line with RFC 7231 section 5.5.3.

Shadow DOM v0

Web ComponentsChrome and other browsers implemented the new version, see https://www.chromestatus.com/features/4667415417847808.

V0 is deprecated at M70, and will be removed in M73, around, April 2019.
If you are still using this consider migrating to the new API or upgrading your Polymer library. Use –disable-blink-features=ShadowDOMV0 for testing if your site works without Shadow DOM V0 APIs.

For more info: https://groups.google.com/a/chromium.org/d/msg/blink-dev/h-JwMiPUnuU/sl79aLoLBQAJ

Shape Detection API

MultimediaPhotos and images constitute the largest chunk of the Web, and many include recognisable features, such as human faces, text, or QR codes. Detecting these features is computationally expensive, but, particularly on mobile devices, hardware manufacturers have long been supporting these features. This API allows accessing hardware-accelerated detectors where available. This is expected to be in origin trials in Chrome 70.

Support Opus in mp4 (ISO-BMFF) with Media Source Extensions (MSE)

MultimediaOpus is an audio codec already supported by the HTML5 src attribute on <url> elements. This applies to mp4, ogg, and webm containers as well as in webm containers using Media Source Extensions. This change adds support for the Opus codec in the mp4 container to MSE.

Support codec and container switching with MSE using SourceBuffer.changeType()

MultimediaThis change adds the SourceBuffer.changeType() method to improve cross-codec or cross-bytestream transitions during playback with Media Source Extensions.

globalThis

JavaScript`globalThis` enables a universal mechanism to access the global object even in strict functions or modules, regardless of the platform.

‘name’ attribute for dedicated workers

Chrome DevTools for Beginners:開始使用HTML和DOM

這是一系列教程中的第一篇,它們將教您Web開發的基礎知識。您還將了解一組名為Chrome DevTools的Web開發人員工具,可以提高您的工作效率。

在這個特定的教程中,您將了解HTML和DOM。HTML是Web開發的核心技術之一。它是控制網頁結構和內容的語言。DOM也與網頁的結構和內容有關,但您稍后會對此有所了解。

目標

您將通過實際構建自己的網站來學習Web開發。當您完成DevTools for Beginners系列中的所有教程時,您完成的站點將如圖1所示。

完成的網站。
圖1。完成的網站

在本教程結束時,您將了解:

  • HTML和DOM如何創建您在網頁上看到的內容。
  • Chrome DevTools如何幫助您嘗試HTML和DOM更改。
  • HTML和DOM之間的區別。

你還有一個真正的網站!您可以使用此站點來托管您的簡歷或博客。

先決條件

在嘗試本教程之前,請完成以下先決條件:

  • 如果您不熟悉HTML,請閱讀HTML?入門。
  • 下載Google Chrome網絡瀏覽器。本教程使用一組內置于Google Chrome中的Web開發工具,稱為Chrome DevTools。

設置你的代碼

您將在名為Glitch的在線代碼編輯器中構建您的站點。

  1. 打開源代碼。在本教程中,此選項卡將被稱為編輯器選項卡。
    編輯器選項卡。
    圖2。編輯器選項卡
  2. 單擊dfb1?!绊椖窟x項”菜單將在左上角打開。
    “項目選項”菜單。
    圖3?!绊椖窟x項”菜單
  3. 單擊“重新混音”。Glitch會創建項目的副本,您可以編輯該項目并隨機為項目生成新名稱。內容與以前相同。
    重新混合的項目。
    圖4。重新混合的項目
  4. 如果您打算完成本系列的下一個教程,請單擊“?登錄”并使用您的GitHub或Facebook帳戶登錄Glitch。如果您未登錄,則在關閉編輯選項卡后,您將無法編輯此項目。
  5. 點擊查看直播。將打開一個新選項卡,顯示實時頁面。在本教程中,此選項卡將被稱為實時選項卡。
    實時標簽。
    圖5。實時標簽

添加內容

你的網站很空。請按照以下步驟添加一些內容!

  1. 編輯器選項卡中,替換<!-- You're "About Me" will go here. -->?為<h1>About Me</h1>。
    ... 
    <body> <p> 您的網站!</ p> <main> <h1> 關于我</ h1> </ main> ? ...
    ? 
    ? 
    ? ? 
    ? 
    
    新代碼在編輯器選項卡中突出顯示。
    圖6。新代碼在編輯器選項卡中突出顯示
  2. 實時標簽中查看您的更改。文本About Me在頁面上可見。它比文本的其余部分大,因為<h1>元素代表一個部分標題。您的Web瀏覽器會自動為較大字體的標題設置樣式。
    新標題在實時標簽中可見。
    圖7。新標題在實時標簽中可見
  3. 返回編輯器選項卡,<p>I am learning HTML. Recent accomplishments:</p>在下面的行中插入<h1>About Me</h1>。
    ... 
    <body> <p> 您的網站!</ p> <main> <h1> 關于我</ h1> <p> 我正在學習網頁開發。最近的成就:</ p> </ main> ? ...
    ? 
    ? 
    ? ? 
    ? ? 
    ? 
    
    新代碼在編輯器選項卡中突出顯示。
    圖8。新代碼在編輯器選項卡中突出顯示
  4. 實時標簽中查看您的更改。
  5. 返回編輯器選項卡,添加您的成就列表:
    ... 
    ? <p> 我正在學習網絡開發。最近的成就:</ p> <ul> <li> 了解如何在Glitch中設置我的代碼。</ li> <li> 向我的HTML添加了內容。</ li> <li> TODO:了解如何使用Chrome DevTools試驗內容更改。</ li> <li> TODO:了解HTML和DOM之間的區別。</ li> </ ul> ......
    ? 
    ? ? 
    ? ? 
    ? ? 
    ? ? 
    ? 
    
    新代碼在編輯器選項卡中突出顯示。
    圖4。新代碼在編輯器選項卡中突出顯示
  6. 再次,返回實時選項卡以確保新內容正確顯示。
    新列表在實時選項卡中可見。
    圖4。新列表在實時選項卡中可見

嘗試Chrome DevTools中的內容更改

如果您正在開發包含大量HTML的大頁面,您可以想象在編輯器選項卡和實時選項卡之間來回數百次以查看更改可能有點單調乏味,特別是如果您不知道究竟要放在頁面上的是什么。Chrome DevTools可以幫助您體驗內容更改,而無需離開實時標簽。

了解HTML和DOM之間的區別

在您開始從Chrome DevTools編輯內容之前,了解HTML和DOM之間的區別很有幫助。學習的最佳方式是通過示例:

  1. 轉到實時選項卡。在頁面底部,您會看到文字A new element!?!。
    在頁面底部的文字'一個新的元素???!' 看得見。
    圖9。在頁面底部A new element!?!可以看到?文本
  2. 返回編輯器選項卡,嘗試查找此文本index.html。它不存在!
    在index.html中找不到神秘文本。
    圖10。神秘的文字A new element!?!無處可尋index.html
  3. 返回實時選項卡,單擊鼠標右鍵A new element!?!,然后選擇“?檢查”。
    檢查一些文字。
    圖11。檢查一些文字

    DevTools會在您的頁面旁邊打開。<div>A new element!?!</div>突出顯示為藍色。雖然DevTools中的這個結構看起來像你的HTML,但實際上它是DOM樹。

    DevTools在頁面旁邊打開。
    圖12。DevTools在頁面旁邊打開

當您的頁面加載時,瀏覽器會使用您的HTML來創建頁面的初始內容。DOM表示頁面的當前內容,可以隨時間變化。<div>A new element!?!</div由于<script src="new.js"></script>HTML底部的標記,神秘內容會添加到您的網頁中?。此標記會導致某些JavaScript代碼運行。您將在以后的教程中了解有關JavaScript的更多信息,但現在將其視為可以更改頁面內容的編程語言。在這種特殊情況下,JavaScript代碼會添加<div>A new element!?!</div>到您的頁面中。這就是為什么這個神秘文本在您的實際頁面上可見,而不是在您的HTML中。

編輯DOM

如果您想在不離開實時標簽的情況下快速嘗試內容更改,請嘗試使用DevTools。

  1. 在DevTools中,右鍵單擊Your site!并選擇“?編輯為HTML”。
    將節點編輯為HTML。
    圖13。將節點編輯為HTML
  2. 替換<p>Your site!</p>為下面的代碼。
    <header> <p> <b> 歡迎來到我的網站!</ b> </ p> <button> 下載我的簡歷</ button> </ header>
    ? 
    ? 
    
    將節點編輯為HTML。
    圖14。將節點編輯為HTML
  3. Command+?Enter(Mac)或Control+?Enter?(Windows,Linux,Chrome OS)保存更改,或單擊框外部。您的更改會自動顯示在您網頁的實時視圖中。該文本Your site!?已被新內容替換。
    新內容會立即顯示在頁面上。
    圖15。新內容會立即顯示在頁面上

此工作流程僅適用于試驗內容更改。如果您重新加載頁面或關閉選項卡,您的更改將永遠消失。如果您正在使用此工作流程并且想要保存更改,則需要手動將這些更改復制到HTML。

接下來的幾節將向您展示更多可以從DOM樹更改內容的方法。

重新排序節點

您還可以更改DOM節點的順序。例如,在您的網頁上,導航菜單位于底部附近。將其移至頂部:

  1. <nav>在DevTools?的DOM樹中查找節點。
    nav節點在DevTools中以藍色突出顯示。
    圖16。nav節點在DevTools中以藍色突出顯示
  2. <nav>節點拖到頂部,這樣它就是<body>節點下面的第一個子節點。
    將導航節點拖到頂部。
    圖17。將導航節點拖到頂部

    <nav>節點現在顯示在頁面頂部。

    導航節點位于頁面頂部。
    圖18。導航節點位于頁面頂部

刪除節點

您還可以從DOM樹中刪除節點。

  1. DOM樹中,單擊<div>A new element!?!</div>。DevTools突出顯示藍色節點。
    選擇要刪除的節點。
    圖19。選擇要刪除的節點
  2. Delete鍵盤上的鍵。該<div>A new element!?!</div>節點將從DOM樹中刪除。
    該節點已被刪除。
    圖20。該節點已被刪除

復制您的更改

你幾乎完成。您已在DevTools中對頁面進行了一些更改,但它們尚未保存到您的源代碼中。

  1. 重新加載您的實時標簽。您在DOM樹中所做的更改將消失。特別是,文本Your site!返回頁面頂部,文本A new element!?!返回到底部。
    你所做的改變已經消失了。
    圖21。你所做的改變已經消失了

在Chrome中與Flash說再見

今天,Adobe宣布計劃在2020年底停止支持Flash。

20年來,Flash幫助塑造了您在網絡上玩游戲,觀看視頻和運行應用程序的方式。但在過去的幾年里,Flash變得不那么常見了。三年前,80%的桌面Chrome用戶每天都會訪問一個使用Flash的網站。今天使用率僅為17%并且繼續下降。

這一趨勢表明,網站正在遷移到開放式網絡技術,這種技術比Flash更快,更節能。它們也更安全,因此您可以在購物,銀行業務或閱讀敏感文檔時更安全。它們還適用于移動設備和桌面設備,因此您可以隨時隨地訪問自己喜愛的網站。

這些開放式網絡技術成為Chrome去年年底的默認體驗,當時網站開始需要您的許可才能運行Flash。Chrome將在未來幾年內繼續淘汰Flash,首先要求您在更多情況下允許運行Flash,并最終在默認情況下禁用Flash。到2020年底,我們將從Chrome中完全刪除Flash。

如果您定期訪問今天使用Flash的網站,您可能想知道這會對您產生什么影響。如果站點遷移到打開Web標準,除了您將不再看到在該站點上運行Flash的提示之外,您不會發現太多差異。如果該站點繼續使用Flash,并且您授予站點運行Flash的權限,則它將在2020年底之前運行。

與Adobe,其他瀏覽器和主要發布商進行了大量密切合作,以確保網絡已準備好無Flash。我們今天支持Adobe的發布,我們期待與大家合作,讓網絡變得更好。

使用或修復 Flash 音頻和視頻

借助 Adobe Flash 插件,您可以在計算機上通過 Chrome 收聽和觀看 Flash 音頻和視頻內容。

注意:Adobe 將于 2020 年底停止支持 Flash。要想詳細了解在 2020 年底之前 Chrome 如何與 Flash 協作,請訪問這篇?Chrome 博客。

允許網站播放 Flash 視頻、動畫和游戲

請僅允許 Flash 在您信任的網站上運行。某些網站可能會利用 Adobe Flash Player 來損害您的計算機。

在退出 Chrome 后,系統不會保存您的 Flash 設置。下次打開 Chrome 時,您必須重新允許之前添加的網站來使用 Flash。

  1. 當您訪問您信任且包含 Flash 內容的網頁時,點擊點擊即可啟用 Adobe Flash Player。
  2. 點擊允許。

網站需要使用 Flash 才能正常運行

如果某網站無法正常運行,您可能需要更改設置來允許該網站使用 Flash。

  1. 在網址的左側,點擊“鎖定”圖標?Lock?或“信息”圖標?查看網站信息。
  2. 點擊底部的網站設置。
  3. 在隨即顯示的新標簽頁中,依次點擊“Flash”右側的向下箭頭?向下箭頭?然后?允許。
  4. 返回該網站并重新加載頁面。

更改您的 Flash 設置

禁止所有網站使用 Flash

  1. 在計算機上打開 Chrome。
  2. 依次點擊右上角的“更多”圖標?更多?然后?設置。
  3. 點擊底部的高級。
  4. 在“隱私設置和安全性”下方,點擊內容設置。
  5. 點擊?Flash。
  6. 關閉頂部的先詢問(推薦)。

移除已禁止或已允許使用 Flash 的網站

  1. 依次點擊右上角的“更多”圖標?更多?然后?設置。
  2. 點擊底部的高級。
  3. 在“隱私設置和安全性”下方,點擊內容設置。
  4. 點擊?Flash。
  5. 點按網站右側的“移除”圖標?Remove。

解決 Flash 出現的問題

如果 Flash 無法正常運行,或者您看到以下錯誤消息,請嘗試按照下文介紹的問題排查步驟操作。

  • Adobe Flash 版本太舊,因此已被屏蔽
  • 無法加載插件
  • 該網頁已屏蔽以下插件
  • 該插件不受支持
  • 插件 (Shockwave Flash) 未響應

第 1 步:開啟 Flash

請僅允許 Flash 在您信任的網站上運行。

  1. 在計算機上打開 Chrome。
  2. 轉到提供相應視頻或游戲的網站。
  3. 在網址的左側,點擊“鎖定”圖標?Lock?或“信息”圖標?查看網站信息。
  4. 點擊底部的網站設置。
  5. 在隨即顯示的新標簽頁中,依次點擊“Flash”右側的向下箭頭?向下箭頭?然后?允許。
  6. 返回該網站并重新加載頁面。

第 2 步:更新 Flash

  1. 在計算機上打開 Chrome。
  2. 在頂部的地址欄中,輸入?chrome://components,然后按?Enter?鍵。
  3. 找到“Adobe Flash Player”。
  4. 點擊檢查是否有更新。
  5. 如果您看到“組件未更新”或“組件已更新”,則表明您的組件是最新版本。
  6. 返回到包含 Flash 內容的頁面。如果 Flash 內容沒有自動打開,請點擊左上角的“重新加載”圖標?Reload。

第 3 步:更新 Chrome

  1. 在計算機上打開 Chrome。
  2. 點擊右上角的“更多”圖標?更多。
  3. 點擊更新 Google Chrome。如果您沒有看到此按鈕,則表明您的 Chrome 是最新版本。
  4. 點擊重新啟動。
更新 Chrome 時遇到問題?了解如何解決 Chrome 更新問題。

第 4 步:重新安裝 Flash

確保您只通過 Adobe 的網站安裝 Flash。
  1. 在計算機上打開 Chrome。
  2. 轉到?adobe.com/go/chrome。
  3. 在“第 1 步”下方,選擇計算機的操作系統。
  4. 在“第 2 步”下方,選擇列有“PPAPI”的選項。
  5. 點擊立即下載,然后按照步驟安裝 Flash。

修正其他 Flash 錯誤

系統顯示“以下插件已崩潰”錯誤消息或顯示插件圖標?插件

  1. 如果 Adobe Flash 無法自動重新啟動,請將其強行關閉:
    1. 點擊右上角的“更多”圖標?更多。
    2. 依次點擊更多工具?然后?任務管理器。
    3. 選擇“插件:Shockwave Flash”。
    4. 點擊結束進程。
  2. 關閉“任務管理器”窗口,然后返回包含 Flash 內容的網頁。
  3. 點擊左上角的“重新加載”圖標?Reload。

設置默認搜索引擎

您可以將地址欄(多功能框)用作搜索框。地址欄會自動使用 Google 進行搜索,但您也可將其他搜索引擎設為默認搜索引擎。

如果 Google 一直是您的默認搜索引擎,但突然不是了,則表明您的系統可能已遭到惡意軟件的攻擊。獲取恢復 Chrome 設置的相關幫助。

設置默認搜索引擎

  1. 在計算機上打開 Chrome。
  2. 依次點擊右上角的“更多”圖標?更多?接著?設置。
  3. 在“搜索引擎”下方,點擊“地址欄中使用的搜索引擎”旁邊的向下箭頭?向下箭頭。
  4. 選擇新的默認搜索引擎。

如果您已嘗試設置搜索引擎但發現無效,則意味著您的計算機上可能存在惡意軟件。獲取恢復 Chrome 設置的相關幫助。

添加、修改或移除其他搜索引擎

  1. 在計算機上打開 Chrome。
  2. 依次點擊右上角的“更多”圖標?更多?接著?設置。
  3. 在“搜索引擎”下方,點擊管理搜索引擎。
  4. 找到“其他搜索引擎”。
    • 添加:點擊“其他搜索引擎”右側的添加。填寫文本字段,然后點擊添加。
    • 設為默認搜索引擎:依次點擊相應搜索引擎右側的“更多”圖標?更多?接著?設為默認搜索引擎。
    • 修改:依次點擊相應搜索引擎右側的“更多”圖標?更多?接著?修改。
    • 刪除:依次點擊相應搜索引擎右側的“更多”圖標?更多?接著?從列表中移除。

文本字段填寫提示

“搜索引擎”字段

請輸入相應搜索引擎的標簽或名稱。

“關鍵字”字段

請為相應搜索引擎輸入您要使用的文字快捷方式。這樣一來,您便可以在地址欄中輸入設置的關鍵字來快速打開相應搜索引擎。

“網址(用“%s”代替搜索字詞)”字段

請輸入相應搜索引擎的結果頁對應的網址,然后使用?%s?代替搜索字詞。

要查找并修改結果頁對應的網址,請執行以下操作:

  1. 轉至您要添加的搜索引擎。
  2. 執行一次搜索。
  3. 將搜索結果頁的網址復制并粘貼到“網址”字段中。搜索結果頁的網址與網站網址有所不同。
    • 例如,如果您搜索“soccer”,Google 搜索結果的網址就是?http://www.google.com/search?q=soccer。
  4. 將網址中的搜索字詞替換為?%s。
    • 例如,如果您使用的是 Google 搜索結果網址,那么您的搜索引擎網址將為?http://www.google.com/search?q=%s。

在 Chrome 上搜索網絡信息

您可以在互聯網上、書簽列表和瀏覽記錄中快速找到所需內容。

  1. 在計算機上打開 Chrome。
  2. 在頂部的地址欄中,輸入您的搜索內容。
  3. 點擊相應結果或按?Enter。

在網頁中搜索

您可以在計算機上的網頁中查找特定字詞或短語。

  1. 在計算機上,在 Chrome 中打開一個網頁。
  2. 依次點擊右上角的“更多”圖標?更多?接著?查找。
  3. 在右上角顯示的欄中輸入搜索字詞。
  4. 按?Enter?鍵搜索網頁。
  5. 系統會以黃色突出顯示匹配內容。您可以使用滾動條上的黃色標記查看所有匹配內容在網頁中的位置。

提示:您也可以使用鍵盤快捷鍵,通過按?Ctrl+F(Windows、Linux 和 Chrome 操作系統)或??+F?(Mac) 來快速查找字詞或短語。

搜索字詞或圖片

您可以在網頁上查找特定字詞、短語或圖片的更多相關信息。

  1. 在計算機上,在 Chrome 中打開一個網頁。
  2. 突出顯示某個字詞、短語或圖片。
  3. 在計算機上右鍵點擊它。如果使用的是 Mac 設備,則按住?Ctrl?的同時點擊。
  4. 點擊相應選項,即可使用您的默認搜索引擎開始搜索。例如,您可能會看到諸如“使用 Google 搜索‘帝企鵝’”或“使用 Bing 搜索此圖片”之類的內容。

使用標簽頁和建議

您不僅可在 Chrome 中打開任意多個標簽頁,還可查看所有標簽頁并在它們之間自如切換。

打開新的標簽頁

在 Google Chrome 窗口頂部,點擊右側最后一個標簽頁旁的“打開新的標簽頁”圖標?打開新的標簽頁,或使用鍵盤快捷鍵

  • Windows 和 Linux:Ctrl + t
  • Mac:? + t

點擊標簽頁并將其拖到 Google Chrome 窗口外面。

要打開新窗口,請使用鍵盤快捷鍵:

  • Windows 和 Linux:Ctrl + n
  • Mac:? + n

從計算機的桌面上或文件夾中,將相應文件拖到 Google Chrome 標簽頁中。如果可以打開該文件,光標將顯示“添加”圖標?添加。

在計算機中瀏覽并選擇想要打開的文件。打開新的標簽頁,然后使用鍵盤快捷鍵:

  • Windows 和 Linux:Ctrl + o
  • Mac:? + o
  • Windows 和 Linux:按住 Ctrl 的同時點擊鏈接
  • Mac:按住 ? 的同時點擊鏈接

定制“打開新的標簽頁”頁面

在打開新的標簽頁后,您會在搜索框下方看到自己經常訪問的網站。

  • 要訪問某個網站,請點擊對應圖標。
  • 要移除或修改某個網站,請將光標指向對應圖標。在該圖標的右上角,點擊“更多”圖標?更多。

添加自定義背景圖片

您可以上傳照片,以用作 Chrome 的背景。

點擊新標簽頁右下角的“設置”圖標?設置。

排列標簽頁

要更改標簽頁的排列順序,請沿瀏覽器窗口頂部拖動標簽頁。

  • 要將標簽頁固定在左側,請右鍵點擊相應標簽頁,然后選擇固定標簽頁。已固定標簽頁的尺寸較小,并且只顯示網站的圖標。
  • 要取消固定標簽頁,請右鍵點擊相應標簽頁,然后選擇取消固定標簽頁。

關閉標簽頁

在相應標簽頁的右上角,點擊“關閉”圖標?關閉,或使用鍵盤快捷鍵:

  • Windows 和 Linux:Ctrl + w
  • Mac:? + w
  • 關閉窗口中的所有標簽頁。
  • 在相應窗口頂部的角落,點擊“關閉”圖標?關閉。
    • Windows 和 Linux:在屏幕右上角。
    • Mac:在屏幕左上角。

    您也可以使用鍵盤快捷鍵關閉窗口:

    • Windows 和 Linux:Alt + F4
    • Mac:? + Shift + w

您可以按照下列步驟將 Google Chrome 完全關閉。

  1. 打開 Chrome 菜單。
    • Windows 和 Linux:在頂部的菜單欄上,點擊?更多。
    • Mac:在頂部的菜單欄上,點擊?Chrome。
  2. 關閉 Google Chrome。
    • Windows 和 Linux:點擊退出。
    • Mac:點擊退出 Google Chrome。

您也可以使用鍵盤快捷鍵關閉 Google Chrome:

  • Windows 和 Linux:Ctrl + Shift + q
  • Mac:? + q

恢復標簽頁或窗口

如果您無意中關閉了某個標簽頁或窗口,則可以使用鍵盤快捷鍵將其重新打開:

  • Windows 和 Linux:Ctrl + Shift + t
  • Mac:? + Shift + t

強行關閉頁面或應用

如果標簽頁、窗口或擴展程序無法正常運行,您可以使用 Chrome 的任務管理器將其強行關閉。

  1. 點擊右上角的“更多”圖標?更多。
  2. 依次點擊更多工具?接著?任務管理器。
  3. 選擇您要關閉的網頁、擴展程序或應用。
  4. 點擊結束進程。

將 Chrome 設為您的默認瀏覽器

“開始”菜單

如果您將 Chrome 設為默認瀏覽器,那么您點擊的任何鏈接都會自動在 Chrome 中打開。

 

將 Chrome 設為您的默認網絡瀏覽器

如果您尚未在計算機上安裝 Google Chrome,請先下載并安裝 Chrome。

Windows 10
  1. 點擊計算機上的“開始”菜單?“開始”菜單。
  2. 點擊“設置”圖標?設置。
  3. 打開您的默認應用:
    • 原始版本:依次點擊“系統”接著?默認應用?。
    • 創作者更新:依次點擊“應用”接著?默認應用。
  4. 在底部的“網絡瀏覽器”下方,點擊您當前使用的瀏覽器(通常是 Microsoft Edge)。
  5. 在“選擇應用”窗口中,點擊?Google Chrome。

為便于您日后輕松地打開 Chrome,請按照以下步驟將 Chrome 快捷方式添加至您的任務欄:

  1. 在計算機上打開 Chrome。
  2. 在底部的 Windows 任務欄中,右鍵點擊 Chrome。
  3. 點擊固定到任務欄。
Windows 8 及更低版本
  1. 點擊計算機上的“開始”菜單?“開始”菜單。
  2. 點擊控制面板。
  3. 依次點擊程序?接著?默認程序?接著?設置默認程序。
  4. 在左側列表中選擇?Google Chrome。
  5. 點擊將此程序設置為默認值。
  6. 點擊確定。
Mac
  1. 在計算機上打開 Chrome。
  2. 點擊右上角的“更多”圖標?更多。
  3. 點擊設置。
  4. 在“默認瀏覽器”部分中,點擊將 Google Chrome 瀏覽器設為默認瀏覽器。
    • 如果您看不到此按鈕,則表明 Google Chrome 已是您的默認瀏覽器。