DevTools: State of the Union 2017 (Google I/O ’17)

  • Async debugging default (without checkbox)
  • Ctrl + O to edit all occurrences of value simultaneously (works even in console)
  • Ctrl+ Click method name in Source panel to jump debugging session to that point.
  • see hyphenated class props using [ notation in console
  • Inline breakpoint
  • Capture screenshot, now supports full page (with page beyond viewport) and also with device frame
  • When running node script using –inspect flag, you can go to about:inspect to launch dedicated dev tools for it, OR if u have dev tools open, the node icon shows up on top left, and on clicking it, u can start to debug the node app
  • Code Coverage view allows u to identify dead code
  • Chrome Headless allows headless testing etc.
  • Use debug(funcName) in the console and the script will stop when it reaches the function you passed in.It’s quick, but the downside is it doesn’t work on private or anonymous functions. But if that’s not the case, it’s probably the fastest way to find a function to debug. (Note: there’s a function called console.debug which is not the same thing.)
  • Watch Specific Function Calls and It’s Arguments:In the Chrome console, you can keep an eye on specific functions.
    • Every time the function is called, it will be logged with the values that was passed in. Eg. monitor(func1)
    • ref: https://dzone.com/articles/debug-javascript-with-these-14-tips

Slides: https://goo.gl/photos/dEW7cB2txBKU1fo56

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s