Chrome DevTools中的騷操做！

搬運自這裏！

做爲一名開發小白，開發中會常常用到Chrome devTools，最近看了一篇文章，搬運坐下筆記！

• 命令（Command）菜單

"命令"菜單應該是很經常使用的，MacCmd + shift + PWindowsCtrl + shift + P去打開命令菜單。

• 截取Dom元素

若是咱們只想要截取咱們頁面中的一個Dom元素，咱們能夠直接選中那個節點，以後打開命令，使用節點截圖Screenshot Capture node screenshot就能夠達到咱們想要的效果。

還能夠經過命令 Screenshot Capture full size screenshot命令全屏截圖。 截取的並非可視區域的，而是包含滾動條在內的全部頁面內容

• 在控制檯使用上次操做的值

使用$_能夠引用在控制檯執行的前一步操做的返回值。若是咱們正在控制檯調試一些JavaScript代碼，而且須要引用先前的返回值，那麼這可能很是方便。

• 從新發起XHR請求

在和後端聯調的時候，咱們可能屢次用到Network面板，可是想從新去查看一些請求內容的時候，咱們常常會採起一些簡單粗暴的刷新，點擊按鈕等方式去觸發XHR請求，Chrome給咱們提供了Replay XHR，咱們能夠經過這個去發起新的請求，提升開發效率。

• 編譯頁面上的任何文本

咱們能夠在控制檯輸入document.body.contentEditable="true"或者document.designMode = 'on'去實現對網頁的編輯。

• 網絡面板的幻燈片模式

Network面板下的Capture screenshots啓動後，能夠在頁面加載的過程當中捕捉屏幕截圖

• 動畫檢查

DevTools中有一個動畫面板，默認狀況下是關閉的，若是咱們在作一些css 動畫的時候，咱們就能夠去打開這個看下動畫是如何工做的，好比background-color或transform 經過DevTools右上角菜單->More tools->Animations:

• 在地段設備或者弱網絡狀況下進行測試

咱們平時的開發環境網速還算能夠，可是有時要考慮到網絡環境很差的狀況，Chrome DevTools中能夠調節Cpu功能和網絡速度

• copying&&saving

能夠經過全局方法copy()拿到console中的任何能拿到的資源

若是咱們想把打印出的數據存儲爲全局變量，咱們只須要右鍵，選擇 Store as global variable選項， 第一次使用的話，它會建立一個名爲 temp1 的變量，第二次建立 temp2，以此類推。經過使用這些變量來操做對應的數據，不用再擔憂影響到他們原來的值。(?)

• 自定義devTools

首先想要啓動Allow custom UI themes 要在地址欄輸入以下代碼chrome://flags/#enable-devtools-experiments開啓實驗功能，並重啓瀏覽器，

在控制檯中 F1打開設置，切換到 Experiments啓用 Allow custom UI themes

• css/js覆蓋率

Chrome DevTools中的Coverage功能能夠實現查看代碼的覆蓋率 f12打開調試板輸入Show Coverage就能夠調出，以後點擊reload開始檢測，綠色爲用到，紅色爲沒有用到。

• 自定義代碼片斷Snippets

開發中若是咱們有經常使用的一些JavaScript須要調試的，咱們能夠在Sources中的tab內的Snippets中保存下來

• 媒體查詢

媒體查詢是自適應網頁設計的基本部分。在Chrome DevTools中的設備模式下在三圓點菜單中點擊 Show Media queries便可使用。

今天也是好好學習的一天！！！！！