chrome DevTools tips

1 console.dir, may be abbreviated asdir

With this command lists all the object properties of the object parameters

2. Get object key keys(object)/values(object)

Using this command can be acquisition targets keyandvalue

3. Functions Listener monitor(function)/unmonitor(function)

monitor(function)When the specified function call, a message is recorded to the console, the parameters passed to the function name and the function call when the message indication.

Use unmonitor(function)stop monitoring the specified function.

4. Event listeners monitorEvents(object[,events])/unmonitorEvents(object[,events])

monitorEvents(object[,events])When one of the specified events occurred on the specified object, the object event will be logged to the console. Event type can be specified as a single event or array.

unmonitorEvents(object[,events])Stop monitoring the specified objects and events events

5. time-consuming monitoring

By calling console.time()can turn the timer. You must pass a string parameter to uniquely mark the timer ID. When you want to end timing can call console.timeEnd()and pass the specified name. After the timer counting console will print the names and specific time.

6. analyzing program performance

DevTools window in the console, using console.profile()open a JavaScript CPU profiler. The end of the analyzer directly callconsole.profileEnd()

7. Statistics expressions executions

console.count()Number of statistical methods for the expression to be performed, it took a string parameter for a different index marking. If the two passed in the same character, which will be cumulative count.

8. Check to animate

Chrome DevTools animation checker has two main purposes.

  • Check the animation. You want to slow play, replay or check the source code of the animation group.
  • Modify the animation. You want to change the time of Animation, delay, duration, or key frame offset. Currently does not support editing Bezier curves and keyframes.

Animation checker supports CSS animations, CSS transitions and animations network. It does not currently support requestAnimationFrame animation.

Shortcut key ctrl + shift + p, open the Command Menu, type Drawer: Show Animations.

9. Copy Fetch


  • Author: null Aberdeen
  • Link: https: //juejin.im/post/5e0cb3ba5188253ab46da675
  • Source: Nuggets
  • Copyright reserved by the authors. Commercial reprint please contact the author authorized, non-commercial reprint please indicate the source.

Guess you like

Origin www.cnblogs.com/jgx2020/p/12419521.html