Chrome Dev tools的幾點小技巧

 

• 呼出快捷指令面板：cmd + shift + p

  在Devtools界面下，鍵入cmd + shift + p`將其激活，而後開始在欄中鍵入要查找的命令或輸入？號以查看全部可用命令 .以下圖:其中Open file,Go to line,Go to symbol對於快速打開文件和定位文件位置仍是節省了很多時間.

           1.性能監視器：> performance monitor

             

• 本地覆蓋：local overrides

  感受這個特性是超級棒。 使用咱們本身的本地資源覆蓋網頁所使用的資源。 多說無益，直接舉個例子你們就明白了。你們看到了吧，咱們能夠把網絡資源直接和本地資源映射，再次刷新網頁，取得資源文件就是本地的了。這種對js、css等文件批量修改調試特別有用。

    local overrides還能夠模擬Mock數據，若是後端API還不OK或者不想頻繁的發佈後臺API。這個功能是相           當有用，不過據說還不支持XHR請求。

• 控制檯內置指令

  私覺得若是網頁裏面若是沒有引用jquery是否是就不能使用$這樣的語法了,nonono

  $(selector, [startNode])：單選擇器

  能夠選擇元素並觸發元素事件.

 

      $$（選擇器，[startNode]）：全選擇器

      $x(path, [startNode])：xpath選擇器

    $x(path)返回與給定xpath表達式匹配的DOM元素數組 .

         $x('//div'):返回頁面上的全部div元素。

• getEventListeners（object）:獲取指定對象的綁定事件

• Console...的多種用法

           1.變量打印：%s、%o、%d、和%c

           例如： const text = "文本1"

           console.log(打印${text})

           //結果爲打印文本1

          2.布爾斷言打印：console.assert()

             作前端調試時頗有用。

          3.console.table()內容能夠以表格的形式輸出.