Highly recommended Google Chrome debugging tips booklet, a dime. The following is only a quick summary of the content, not recommended. Say, inexplicable look very burning feeling, ha ha ha ~

copy & saving

  • The inputcopy(location), and then paste in any place, copy is particularly easy to use!
  • Right-click the console output to save it as a global variable
  • Right – click the console error message to export the information to a file

Common Shortcut keys

  • command + shift + dSwitch the position of the console
  • command + [You can quickly switch between different panels of the console
  • Option + writeIncrease the value by 0.1,Shift + writeLet’s increase the number by 10,writeLet’s increase the number by 1
  • In the Elements panel,command+fSupport selector lookup, stunned.logs sources networkYou can also look it up

The command panel

  • The consolecommand + shift + pYeah, shortcuts like vscode, cool!
  • The inputscreenCan be selected on the current pagefull sizeAll the screenshots
  • The inputlayoutThe Elements panel can be split vertically or horizontally
  • The inputthemeYou can switch to black and white mode
  • The inputtimeCan display the console print data time

The use of snippets to quickly execute some code in the console

  • command + shift + pOpen the Command panel
  • The inputsnippetSelect Create code block
  • delete>, the input!, you can choose to execute the corresponding code block

console

  • $('h1')I can just get h1,? ('h1')You can turn a list of elements into an array list without jquery
  • You can type directly with awaitresponse = await fetch('https://jsonplaceholder.typicode.com/todos/1'); json = await response.json()
  • The inputqueryObjects(Vue)All vUE instances are displayed, as are other classes
  • The inputvalue=null; Console. assert(value,'value is null ')If value is falsy, it will print the following
  • The inputvar a=1; var b=2; console.log({a,b}); console.table({a,b}), you can match the printed value to the variable
  • The inputconsole.table(? ('li'),['textContent','className'])The second argument is the key that you want to display only. Of course the object is also no problem ~~~
  • The inputconsole.dir($('body')), dir can easily print specific node information
  • The inputconsole.time('for'); console.timeEnd('for')You can print the time difference between the two lines of code, which is a handy way to test for example how long the for loop takes
  • The inputConsole. log('%c needed to output information ','color:#f69'), %c and style can be used to pattern log
  • The inputfunction log(message) { console.log(' '.repeat(new Error().stack.match(/\n/g).length - 2) + message ); }; function a(){log('a'); b()}; function b(){log('b')}; a()The log is automatically indented based on the call stack
  • Console. log can be directly in the callback.

Breakpoints in the Source panel

  • Right-click the line number of a breakpoint to edit the execution conditions of the breakpoint so that it is a breakpoint in some cases
  • The one above is for this function. Since the edit condition is executed every time the breakpoint is reached, you can simply print what you want in the edit condition. And then when you don’tbreakpointsThat clears out all the conditions. The benefit is that there is no contamination of the code, no manual comments or console code to start.

The network panel

  • Right click request ininitiatorYou can see the stack for the request invocation
  • Right click on theNameYou can choose which data to look at in a request, such as addmethod
  • Right click on a request, yesreplay xhrResend the request

The elements panel

  • Select a node and pressThe h keyDisplays or hides the node
  • Select a node, drag it to any location, and the view will change directly
  • Select a node and holdcommand, you can also quickly change the node position by pressing the up or down key
  • Select a node and right-clickedit htmlCan be used whencommand+zundo
  • Select a node and right-clickexpand recuirsivelyYou can expand all child nodes at once
  • Select a node and right-clickbreak onNodes can be given break points in three forms: child nodes, current nodes, and current node removal
  • In the stylebox-shodowYou can open the shadow editor directly
  • In the styleanimationThe animation effect can be directly edited bezier curve
  • Style has a quick edit element in the bottom right corner of each elementcolor background-color text-shadow box-shadow
  • The color panel can be directly used by the color absorber, other gameplay blasting

Drawer

  • There is usually only one console panel, but you can also open as many as a drawer, and different console panels display different tabs, which is also very easy to debug in some cases.command+ shift+pThe inputdrawer, choose gameplay
  • Can simulate you in any position!command+ shift+pThe inputdrawer, the choice ofsensorYou can enter a virtual location. The selected value will be the navigator. Geolocation. WatchPosition (or. GetCurrentPosition) report.
  • Can simulate network speed and UA!command+ shift+pThe inputdrawer, the choice ofnetworkYou can do whatever you want
  • Can quickly look at the source code!command+ shift+pThe inputdrawer, the choice ofquick sourceYou can do whatever you want
  • A quick look at excess code!command+ shift+pThe inputdrawer, the choice ofcoverageClick on the dot to start, then click on the specific document to see the red and green areas
  • You can quickly compare the style before and after the modification!command+ shift+pThe inputdrawer, the choice ofchange

workspace

  • I can read the lost file, hahaha