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()内容能够以表格的形式输出.