Some tips Chrome Dev tools of

 

• Exhaled quick command panel:cmd + shift + p

  In the Devtools界面下，键入cmd + shift + p` to activate it, and then start typing the command you want to find or enter in the box? Numbers to view all available commands as shown below: where the Open file, Go to line, Go to symbol to quickly open files and locate the file location, or save a lot of time.

  

           1. Performance Monitor:> performance monitor

             

• Local coverage:local overrides

  This feature is a superb feeling. Using our own resources to cover local resources used for web pages. Say no good, for example direct everyone to understand. We see it, we can direct network resources and local resources mapping, refresh the page again, get the resource file is local. This batch changes to js, css and other documents are particularly useful debugging.

    local overridesYou can also simulate Mockthe data, if the backend API is not OK or do not want frequent releases backstage API. This function is equivalent helpful, but I heard not support XHR requests.

• Built-in command console

  Private thought if there if there is no page references jquery is not so you can not use $ grammar, nonono

  $(selector, [startNode]): Single selector

  You can select an element and trigger element event.

 

      $$（选择器，[startNode]）: Full Selector

      $x(path, [startNode]): xpathSelector

    $x(path)Return to a given xpathelement of the array DOM expression matching.

         $ X ( '// div'): Returns all div elements on the page.

• getEventListeners (object): Gets the specified object binding events

• Console ... a variety of uses

           1. Variable %sPrint: %o, , %d, and%c

           For example: const text = "Text1"

           console.log(打印${text})

           // result is a printed text 1

          2.布尔断言打印：console.assert()

             做前端调试时很有用。

          3.console.table()内容可以以表格的形式输出.