閱讀(26.8k) 書簽贊(8) 我要糾錯

Chrome開發(fā)工具綜述

2022-01-22 17:20 更新

谷歌瀏覽器開發(fā)工具綜述

谷歌開發(fā)工具(以下用開發(fā)者工具簡稱），是基于谷歌瀏覽器內(nèi)含的一套網(wǎng)頁制作和調(diào)試工具。開發(fā)者工具允許網(wǎng)頁開發(fā)者深入瀏覽器和網(wǎng)頁應(yīng)用程序的內(nèi)部。該工具可以有效地追蹤布局問題，設(shè)置 JavaScript 斷點并可深入理解代碼的最優(yōu)化策略。

注意：如果你是一個網(wǎng)頁開發(fā)者同時想要獲得最新版本的開發(fā)工具，那么你應(yīng)該使用<a rel="nofollow" rel="external nofollow" target="_blank" >谷歌瀏覽器（金絲雀）Canary 版。

使用開發(fā)工具

要使用開發(fā)工具，直接打開一個網(wǎng)頁或者谷歌瀏覽器的一個網(wǎng)頁應(yīng)用。另一種方式：

選擇瀏覽器位于瀏覽器窗口右上方的菜單欄的工具目錄，選擇開發(fā)者工具選項。
右擊頁面任何位置并選擇審查元素。

開發(fā)工具將會在瀏覽器的下方打開。

有一些快捷鍵也可以用來打開開發(fā)工具：Ctrl + Shift + I ( 或在 Mac 上使用 Cmd + Opt+ I)。

Ctrl + Shift + J ( 或在 Mac 上使用 Cmd + Opt + J) 打開開發(fā)者工具同時集中焦點于控制臺。

Ctrl + Shift + C (或在 Mac 上使用 Cmd + Shift + C) 在審查模式下打開開發(fā)者工具或是在開發(fā)者工具已經(jīng)打開的情況下開啟查閱選項。

學(xué)習(xí)使用快捷鍵可以為你每天的工作流節(jié)省時間。

開發(fā)者工具窗口

開發(fā)者工具窗口的頂部工具欄中排列著任務(wù)相關(guān)的組。每個工具欄項目和相應(yīng)的面板讓你能夠使用網(wǎng)頁或應(yīng)用程序的特定信息來工作，包括 DOM 元素，資源，和源。

圖為開發(fā)者工具中的顏色選擇器。

總體而言，有八個主要的工具可供查看開發(fā)工具：

元素
資源
網(wǎng)絡(luò)
源
時間表
簡介
審核
控制臺

你可以使用 Ctrl + [ 和 Ctrl + ] 快捷鍵在面板之間移動。

查閱 DOM 和格式

元素面板讓你看到一個 DOM 樹的全部相關(guān)信息，并允許你檢查以及在傳輸過程中編輯 DOM 元素。當你需要確認頁面某些方面的 HTML 代碼段時，你會經(jīng)常訪問元素標簽。例如，你對圖像的 HTML id 屬性和值是什么感到好奇的時候。

elements-panel

在 DOM 中查看標題元素。

閱讀更多關(guān)于查閱 DOM 和格式

利用控制臺進行工作

JavaScript 控制臺為開發(fā)者提供了測試 Web 頁面和應(yīng)用程序兩個主要功能,其中包括：

在開發(fā)過程中記錄診斷信息。
一個可與文檔和工具交互的 shell 提示符。

您可以使用控制臺編程接口提供的方法來記錄診斷信息。如 console.log() 或 console.profile()。

您可以直接在控制臺中評估表達式，并使用命令行提供的方法。這些包括使用 $() 命令選擇元素或通過 profile() 方法啟動 CPU 分析器命令。

expression-evaluation

在 JS 控制臺上評估一些命令。

閱讀更多關(guān)于工作的控制臺

JavaScript 的調(diào)試

由于 JavaScript 應(yīng)用程序復(fù)雜性的增加，開發(fā)商需要強大的調(diào)試工具來幫助開發(fā)者快速發(fā)現(xiàn)問題的原因和并找出有效的解決方法。Chrome 開發(fā)工具包含了一些有用的工具來使得調(diào)試 JavaScript 更加輕松。

js-debugging