Fatih Acet
Sr. Frontend Engineer at GitLab
JavaScript Debugging
Frontend Istanbul Meetup
29.03.2018
Fatih Acet
Sr. Frontend Engineer at GitLab.com
@fatihacet
acetfatih@gmail.com
fatihacet.com
gitlab.com/fatihacet
github.com/fatihacet
Google Developer Expert on Web Technologies
Nedir?
Bir programi calisma aninda durdurup, satir satir calistirarak, o anda sahip oldugu degiskenleri inceleyerek, olasi hatalari duzeltmek icin kullanilir.
Neden?
- Koddaki hatalari bulmak ve gidermek
- Kodun akisini gozlemlemek
- Olasi performans sorunlarini gozlemlemek
- Yeni bir codebase'e alisma surecini kolaylastirmak
Chrome DevTools
DEMO
TIPS & TRICKS
getTooltipText(noteData) {
let { note } = noteData;
if (note.length > LENGTH_OF_AVATAR_TOOLTIP) {
debugger;
note = truncate(note, LENGTH_OF_AVATAR_TOOLTIP);
}
return `${noteData.author.name}: ${note}`;
}, debugger;Pretty Print
Pretty Print
console.time(label);
...
...
console.timeEnd(label); getTooltipText: 0.051025390625ms console.table(data);
console.trace();
monitor(fnName);
debug(fnName);
$0, $1, $2
Conditional Breakpoints
Conditional Breakpoints
Conditional Breakpoints
Break on Breakpoints
Event Listener Breakpoints
XHR Breakpoints
Network Throttling
CPU Slowdown
Vue DevTools
Tesekkurler ❤️
JavaScript Debugging
By Fatih Acet
