Chrome DevTools debugging tips and tricks: inspecting elements, live expressions & code breakpoints
Channel: vaadinofficial
Date: 2020-09-03

Learn how to debug your web app effectively with Chrome DevTools. Inspect and modify components, create watch expressions to monitor runtime values, and debug TypeScript sources directly in your browser. 

Shortcuts:
0:00 - Intro
0:36 - How to open Chrome DevTools
1:09 - Inspecting an element and accessing it through the console
1:58 - Use live expressions to monitor runtime values
3:05 - Debugging source files (TypeScript/JavaScript)
3:40 - Changing values while debugging
3:46 - Debug controls

Download starter at:  https://start.vaadin.com/
Playlist: https://www.youtube.com/playlist?list=PLcRrh9hGNalnjuewbvpfcxtFL9SVMXPqb