很酷的Chrome DevTools提示和技巧列表

Chrome DevTools提供了一組驚人的工具,可幫助您在Web平台上進行開發。這裡有一些您可能不知道的提示

看看Chrome DevTools概述如果您是他們的新手

在“元素”面板中拖放

在“元素”面板中,您可以拖放任何HTML元素並更改其在頁面中的位置

Drag and Drop in the Elements Panel

引用控制台中當前選定的元素

在“元素”面板中選擇一個節點,然後鍵入$0在控制台中引用它。

Reference elements in the Console

提示:如果您使用的是jQuery,則可以輸入$($0)訪問此元素上的jQuery API。

使用控制台中上一次操作的值

使用$_引用在控制台中執行的上一操作的返回值

Use the last result

添加CSS並編輯元素狀態

在“元素”面板中,有2個超級有用的按鈕。

首先,您可以添加一個新的CSS屬性,以及所需的任何選擇器,但要預先填充當前選定的元素:

Add a CSS rule

第二個選項可讓您觸發所選元素的狀態,因此您可以查看其處於活動狀態,懸停在焦點上時所應用的樣式。

Element state

查找定義CSS屬性的位置

cmd-clickctrl-click在Windows上)的“元素”面板中的CSS屬性中,DevTools會將您指向“源”面板中定義的位置。

Find where a CSS property is defined

將修改後的CSS保存到文件

單擊您編輯的CSS文件的名稱。檢查器將其打開到“源”窗格中,然後您可以將其與您應用的實時編輯一起保存。

該技巧不適用於使用+添加到element.style屬性中的新選擇器,而僅適用於已修改的現有選擇器。

Save to File the modified CSS

截圖單個元素

選擇一個元素並按cmd-shift-p(或者ctrl-shift-p在Windows中)以打開“命令菜單”,然後選擇捕獲節點屏幕截圖

Screenshot a single element

使用CSS選擇器查找元素

緊迫cmd-fctrl-f在Windows中)在“元素”面板中打開搜索框。

您可以在其中鍵入任何字符串以匹配源代碼,也可以使用CSS選擇器讓Chrome為您生成圖像:

Find an element using CSS selectors

在控制台中按Shift鍵

要在控制台中編寫跨越多行的命令,請按shift-enter

準備就緒後,請在腳本末尾按Enter鍵以執行它:

Shift-enter in the Console

清除控制台

您可以使用清除控制台左上角的按鈕,或按ctrl-l或者cmd-k

去…

在“源”面板中:

  • cmd-octrl-o在Windows中),顯示您的頁面加載的所有文件。
  • cmd-shift-octrl-shift-o在Windows中)顯示當前文件中的符號(屬性,函數,類)。
  • ctrl-g轉到特定行。

Files list

手錶表情

您無需在調試會話中一遍又一遍地寫一個變量名或一個表達式,而是將其添加到手錶表情列表。

Watch Expressions

XHR /提取調試

從調試器中打開XHR /獲取斷點控制板。

您可以將其設置為在任何時候中斷XHR/拿來呼叫已發送,或僅發送特定的呼叫:

XHR and Fetch debugging

調試DOM修改

右鍵單擊一個元素並啟用中斷子樹修改:每當腳本遍歷該元素的子元素並對其進行修改時,調試器就會自動停止以讓您檢查正在發生的事情。

Debug on DOM modifications


更多devtools教程: