題 Google Chrome中的“檢查元素”功能是什麼?


是什麼 檢查元素 Google Chrome中的功能,我如何從中受益?如果單擊“資源”選項卡,則在“檢查元素”窗口中,它不顯示任何加載時間。如何有效地使用此功能?

當我通過右鍵單擊頁面並選擇Inspect Element項目來打開“Inspect Element”時,我會看到以下屏幕:

alt text


4
2017-07-16 05:33


起源




答案:


Inspect Element 是Chrome的Firebug版本。它不是功能齊全,但它仍然是一個非常有用的工具。

確保已啟用“資源”選項卡 - 如果不是,則不會獲得任何加載時間。單擊“啟用資源跟踪”按鈕。

Screenshot


7
2017-07-16 05:36



@Dan,我看到的屏幕與你完全不同,我用我的屏幕截圖更新了我的問題,我看到的是,我沒有看到Scrips and Profiles選項卡。請告訴我它為什麼會發生? - Prashant
它可能不同,因為我在Chrome的開發頻道上運行而不是穩定版。我可以給出的唯一建議是嘗試重新啟動Chrome並重新加載頁面。 - Dan Walker
I'm running on the dev channel 這是什麼,我可以像你一樣運行我的瀏覽器,你能指導我怎麼做? - Prashant
dev.chromium.org/getting-involved/dev-channel  - 但是,我會謹慎安裝,特別是如果這是你的主瀏覽器。有時它可能容易崩潰,看似隨機掛起。 - Dan Walker


正如其他人所提到的那樣,就是這樣 WebKit Web Inspector,它允許您檢查頁面的HTML和其他資源,並評估加載時間等。這是在此頁面上使用它的截圖(來自Safari;相同的檢查員):

WebKit web inspector


4
2017-07-16 06:05





Inspect Element允許您檢查最接近您單擊的區域的HTML元素,就像Firefox擴展一樣 螢火蟲。如果您想要查看時間,您必須永久啟用資源跟踪,它應該提示您。


2
2017-07-16 05:37





Load Time 不確定其他人使用的Chrome版本,14.0.835.202開發人員工具有很多可供選擇的東西。其中最有用的是檢查元素和a)實時編輯html或b)實時編輯CSS以進行Web開發。一旦你完成所有工作,你就可以編輯真實的東西而不必進行編輯 - 刷新 - 重新加載舞蹈以查看佈局變化。

這是顯示頁面元素加載時間的網絡部分(如Firebug中的YSlow)。

事實證明,與Firefox中的Firebug相比,它的使用速度更快更好。


1
2017-10-08 07:45