CODEWITHSUNDEEP
javascriptangularjsdebugginggoogle-chrome-devtools
DA.
DA.

Reputation: 40663

How to find the JS function being called from Chrome Dev Tools in Angular application?

I'm working on trying to find a defect in an angular application in the javascript being used to scroll a page. Person clicks link, page scrolls. Simple.

Alas, I have no idea what functions are actually being called when a user clicks the link and given this app consists of dozens and dozens (and dozens) of separate files, I'm having trouble finding what's going on.

I've read about using breakpoints and setting them up via the SOURCES tab in devtools. However, regardless of which of the many JS files I open in there, I never get any breakpoint options to check.

Is there a way to see what JS is getting fired with a particular event on the page within Chrome's Devtools?

Upvotes: 0

Views: 1229

Answers (1)

Krzysztof Grzybek
Krzysztof Grzybek

Reputation: 9406

  1. Go to Sources tab.
  2. Unfold Event Listener Breakpoints
  3. Unfold Control, check scroll checkbox.
  4. Scroll the page.

Javascript runtime will stop on event listener bound to page scroll and place will be showed in main window under Sources tab. If it's library file (in You case Angular files), right click on the file and Blackbox script. Scroll page again ;)

Upvotes: 2

Related Questions