DevTools
Tools & tricks

⚙️

Hello!
Im Jon Rojí
Frontend at Sngular
🦄 🖌️ 🍺


Disclaimer!
DETECT, TOOLS AND TIPS, NOT FIX



✏️ DOM & styles
▶️ Console Master
📂 Sources
✋ Debuggers & Breakpoints
🌐 Network
📈 Coverage
🧙♀️ Tools & tricks

Elements







store the element as temp1 ... temp
copy css/xpath selectors
QA





element state modifier



element state modifier
classes toggle



element state modifier
classes toggle
class adition
hold to change the file



Deactivate Ancestors check in order to avoid info overflow

Event listeners of the element


Accessibility
Check the role attribute in order to check what people expects from the element



cmd + shift + P

Console


$0 - References the selected HTML element
Execution context from the debugger

Live expressions!
JS statements that executes every 250ms






console.log({ myProp });
console.assert(NaN == NaN)
console.table([{a:1, b:2}, {a:2, b:3}]);
console.log("%cStop", "color:red;font-family:system-ui;font-size:4rem;-webkit-text-stroke: 1px black;font-weight:bold" );

Sources


One of the most important and complex areas on DevTools
Show loaded files
Allow us to set breakpoints (not only on js)
Allow us to override entire files!
Blackbox scripts!
Sources



Use search tool


Show scope of the detected source
Page

Filesystem
We can link the served content with our files,
and save the edited content!
❤️ Great editing styles

Look for the green point
❤️ Awesome for local development

Overrides
We can replace a served file
with a custom and editable file!
- active Enable Local Overrides
- Select the file on network and save for override
❤️ Great for testing new solutions
Look for the purple point
❤️ Awesome for "before push" testing


Overrides
We can replace a served file
with a custom and editable file!
- active Enable Local Overrides
- Select the file on network and save for override
❤️ Great for testing new solutions
Look for the purple point
❤️ Awesome for "before push" testing



Threads & Watch

Threads
Useful working with web workers
Can pause both threads at the same time


Threads & Watch

Threads
Useful working with web workers
Can pause both threads at the same time
Watch
Show info about variables values


Breakpoints!
JS breakpoint

Stop JS execution on the selected line or debugger




Breakpoints!


Pause
Next statement
Jump into/out of function
Next statement (including functions)





Breakpoints!
Call Stack
Show us all the functions called from the breakpoint
Blackbox the libraries
and frameworks!
Scope
Show us the local and global context in the moment of the execution pause so we dont need to hover all props on the source file
Console context becomes the local!






Breakpoints!
XHR Breakpoints
Type a url fragment to stop on xhr request
The Call Stack will show where the request is initiated, allowing us to navigate there




Breakpoints!
DOM elements Breakpoints
Select a HTML Element and select Break on
The Call Stack will show where the modification is requested, useful using events or toggling attributes




Breakpoints!
Event Listener Breakpoints
You can activate breakpoints for any kind of event, in order to analize where the application is listening for
You can see the Global listeners setted too


Network








One of the best tools on DevTools
Allow us to limit the connection speed
Test like a 3g network or Offline (nice for PWA)
Great for look into the waterfall graph




Block requests by URL or Domain
Allow us to check the web behaviour without the blocked resource
Save for overrides
Magic


More tools > Coverage
(cmd + shift + p)
Check unused CSS & JS


Performance


The worse config, the better





The redpoints shows bottlenecks or fps problems

Shows CPU use. Discover critical points
Screenshots will help identifying the critical points


Performance is the art of doing less
Scripting and Rendering
426.2 ms + 279.0 ms
Check colors for info!
requestIdleCallback
requestAnimationFrame
scripting main enemy
blocking the thread


Select a problematic stack call, and analyze

Navigate on stack call to detect problematic points


More tools > Rendering
(cmd + shift + p)
FPS meter 🧭
Paint flashing 🖼️
Scrolling performance issues 🧶


On CI!
lighthouse-ci

More tools > Performance monitor
(cmd + shift + p)



@jnroji
DevTools
By Jon Rojí
DevTools
- 1,963