Chrome developer tools tutorial-02-console panel

Recorded a video and put it on the b station
https://www.bilibili.com/video/BV1pD4y1F7CP
Videos are clearer and more detailed than articles

1. Edit the code:

Some shortcut keys:
Execute: enter
Line feed: shift enter
Autocompletion: tab
Up and down arrow keys: last input/next input
Skip to start/end of line: home / end
ctrl home end of the paragraph: 061e04582911bd / ctrl end or page up / page down

2. Magic variable

$: Equivalent to document.querySelector
$$: Equivalent to document.querySelectorAll
$0: The currently selected DOM element
$_ : the result of the last execution
copy function: copy the variable to the clipboard, press ctrl v after copying to paste
Note: These variables are only available in the console, which is convenient to use during development and debugging, but cannot be written in js files.

3, the object is alive (the value when it was first expanded)

4，console

hit log
console.log: information
consog.warn: warning
console.error: error
console.trace: look at the function call stack
console.time
console.timeEnd

The time difference between the two calls is 1151 milliseconds

console.profile
console.profileEnd: record performance description information

console.profile('test')
doSomething()
console.profileEnd('test')
function doSomething(){}

Then go to More tools -> JavaScript Profiler to see relevant information



Click the file name on the right to jump to the location of the code in the source panel


5. Toolbar

Search, menu bar (clear, filter, default level,)
// watch the video too lazy to write

6. Setting

preserve log: (when refreshing the page) keep the log
auto complete from history: Automatically complete historical data,
selected context only: only displays the log of the current execution context (unchecked by default, generally unchecked)
group similar messages in console: the same log that is played continuously only displays one line

Eager Evaluation: When the console writes an expression, the preview result is displayed

evaluate triggers user activation : Detection triggers user activation
Some APIs can only be called when the user has an operation. When the user does not have an operation, the js call will not be executed, such as window.open(), automatic playback of audio and video;
But the console does not have this restriction by default (this button is checked), and calling the api can be executed normally.
The effect of the same piece of code running on the console is not the same as the effect of running the code on the web page.
If you want the effect of debugging in the console to be consistent with the actual effect of the code running on the web page, you can uncheck evaluate triggers user activation