關於Chrome Devtools你可能有所不知的幾個技巧

Cool Chrome DevTools tips and tricks you wish you knew already

在Elements面板中拖拽元素

在Elements面板移動HTML元素，和UE溝通時快速預覽效果。以前我只知道能夠刪除元素?。

在Console面板中獲取當前選中的元素

首先在Elements面板選中一個元素，而後在Console面板中輸入$0回車。若是你的前端項目有使用jQuery，還能夠使用$($0)進一步使用jQuery的API函數。

在Console面板中操做上次表達式的結果

在Console的執行上下文中，使用$_獲取上次表達式結果，並能夠作進一步操做使用。

給元素添加樣式、改變元素的狀態?

在Elements面板面板中還有3個特別有用的按鈕。?

+號按鈕建立新的樣式組合空間，同時咱們也能夠修改選擇器。翻譯的很差你們看圖體會。

:hov使你能夠手動更改元素狀態，hover、active、focus等等

:cls快捷的給選中節點添加class

截屏

整個瀏覽器截屏&某個元素截屏
在Elements面板中選擇一個元素而後輸入快捷鍵cmd-shift-p (or ctrl-shift-p in Windows)輸入shot而後有三個選項。以下圖：

使用CSS選擇器進行元素選擇

打開Elements面板，輸入快捷鍵cmd-f (ctrl-f in Windows)，調出搜索框。

XHR/Fetch調試

不推薦用，更喜歡在代碼中添加debugger;短語。 需在Source面板中進行操做,以下圖：

對元素節點打斷點

選中元素節點、右鍵、Break-on下有三個選項，根據需求進行選擇，分別爲屬性變動、子元素更改、元素移除時觸發斷點。

你們有啥好用的技巧歡迎補充?

【開發環境推薦】 Cloud Studio 是基於瀏覽器的集成式開發環境，支持絕大部分編程語言，包括 HTML五、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，無需下載安裝程序，一鍵切換開發環境。 Cloud Studio提供了完整的 Linux 環境，而且支持自定義域名指向，動態計算資源調整，能夠完成各類應用的開發編譯與部署。