Art
of Debugging using devtools
Debugging can be used for
- Increase the page preformance and code quality of your code
- Fix Bugs - easy one
Fixing Bugs
- Use breakpoints to detect the code break
- Use console to check for errors and code trail
Increase Performance
- Regulate network performance
- Regulate rendering Performance - RAIL model
Network
Performance
-
Use Network tab to get idea of the network utilisation of resources
-
Use network timeline recording for page load autopsy
RENDERING
PERFORMANCE
RAIL Model
Prerequisite
Pixel Pipeline
Javascript/CSS-Animations
Initiate/alter browser rendering
Painting the blocks
Process of filling pixels
Setting up layout Blueprint
Calculation for allocation of elements on the page
Style Matching
which CSS rule to which element
Composting
complex painting multiple layers
R
L
I
A
ESPONSE
OAD
DLE
NIMATION
Respond under 100ms
Deliver content under 1000ms
Maximise idle time - Preload data
Render frames every 16ms (60 FPS)
Art of Debugging - Chrome devtools
By Swastik Pareek
