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

JavaScript Debugging

  • 381
Loading comments...

More from Fatih Acet