DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster.
Recently started with Front-end development.
1
See the Nodes resulted from HTML
See the entire style cascade applied to them
2
See the full Network activity
Good way of finding "why isn't my CSS applying?" bugs
https://username.github.io/repo
<img src="/images/logo.png" />
3
View logs, errors & run code
Can be opened within any tab with Esc key
$0, $1, $2, $3, $4 can be used to reference previously selected nodes in the Elements panel
console.dir($0)
console.log( {x} );
$('body a'); // document.querySelector
$$('body a'); // document.querySelectorAll
Has a jQuery'like elements selector
4
Debug your app (▶)
debugger;
Ctrl/Command + P to navigate between files
Snippets
5
From practice/dummy apps to
real-life* products
1
Client-side storage
2
NodeJS debugging
Remote debugging
3
4
geolocation
State of the art apps
Maybe accessibility, performance or simply pushing the limit of being efficient
1
🔴 Configure recording
🎥 FPS
📈 CPU usage
📈 Network
👨💻 Details
2
How much of the code do you actually use?
3
Manifest debug
PWA functionality debug
Service Worker debug
4
Position in the accessibility tree
ARIA attributes
5
😁 Breaking on DOM changes
😁 Breaking on XHR
😁 Blackboxing scripts
😁 Show event listeners
Straight out nerd!
1
A bug in the page which causes it to progressively use more and more memory.
2
Add a folder to Chrome & use it as an IDE
3
Terminal in browser
4
Special | tool | for |
CSS Grid | ||
5
Debug & modify animations
Register here