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

凱斯巴斯克斯

凱斯巴斯克斯

通過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 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。你所做的改變已經消失了