googlechrome瀏覽器開發(fā)人員工具-全文預覽
【正文】 age）面板通過存儲面板，您可以與 HTML 5 的數(shù)據(jù)庫存儲和 cookie 進行交互。內存使用信息記錄會顯示在“ HEAP SNAPSHOTS ”項下面。頁面重新載入完成后，瀏覽器在基準測試中的得分會顯示出來，這時點擊按鈕停止 CPU 使用信息收集，您會看到“ CPU PROFILES ”項目下多出一個記錄，這是您此信息收集區(qū)間 CPU 消耗的一個詳細分解記錄，您從中可以看出每個函數(shù)占CPU時間的百分比。 堆分析器顯示每個 JavaScript 對象所使用的內存大小 通過了解資源使用分布，您就可以有效地對代碼進行優(yōu)化，從而提高網(wǎng)站的效率。切換到 Memory 行，并重新記錄，可以觀察頁面載入的過程中每個時刻使用堆的大小。打開時間軸面板，您會看到這樣的界面：Shift+F11 或 Shift+Command+。您可以在右側添加所需觀察的變量，來進行跟蹤變量值的變化，也可查看堆棧調用情況及全局變量和函數(shù)的信息，也可以將鼠標移到感興趣的變量名上直接查看此變量當前的值。您甚至可以直接將資源圖標拖入瀏覽器窗口，在瀏覽器中直接直接訪問該項資源。點擊左側工具欄的 Size 圖標，可以看到下載的各項資源的大小。位于時間表上方的軸，列出了可供選擇的不同類型的資源，您可以選擇查看所有資源，或僅查看某一類的資源。每個水平的棒狀圖示代表一個資源占用網(wǎng)絡的時間，而在每個棒狀圖示的左側顏色較淺的部分代表延遲時間（Latency），即從向服務器發(fā)出請求到服務器第一次響應之間的時長。打開資源面板的時候，您通常會看到如下的界面：Metrics 模塊以圖形方式展示出左側面板中選中元素的盒模型并標出了各部分的詳細數(shù)值，在調試頁面布局問題時，這樣的展示方式往往更直觀、更清晰。那怎樣給現(xiàn)有的元素或者選擇器增加一個屬性值呢？不用著急，鼠標雙擊您所想修改的元素的 部分或者它應用的選擇器的空白部分（如下圖所示），即可添加屬性。工具窗口下部的按鈕可以讓調試窗口停靠到主窗口內，切換 JavaScript 控制臺狀態(tài)，以及其它一些功能。 現(xiàn)在您應該已經(jīng)看到開發(fā)人員工具的窗口了吧？在窗口的最上方的工具欄里排列著 8 個圖標，分別對應不同的功能，每一個圖標點擊后都會打開相應的調試面板，幫助您獲取各種不同的信息，如 DOM 樹、資源占用情況、頁面相關的腳本等。 ）在 Google Chrome 瀏覽器安裝完成后，您可以打開自己感興趣的網(wǎng)頁或網(wǎng)絡應用程序，然后通過下面任何一種方式進入開發(fā)人員工具： 如何使用存儲 (Storage) 面板 如何使用資源 (Resources) 面板 Google Chrome 瀏覽器開發(fā)人員工具不僅僅能幫助您診斷、修復在網(wǎng)頁加載、腳本執(zhí)行以及頁面呈現(xiàn)中出現(xiàn)的問題，還可以幫助您最大限度地了解您的網(wǎng)頁或網(wǎng)絡應用程序對CPU以及內存的使用情況。作為瀏覽器中生力軍，Google Chrome 瀏覽器 () 也自帶了豐富的開發(fā)人員工具，
高考資料相關推薦
鄂ICP備17016276號-1