javascript: Debug and Check up on Match Listeners with Chrome Developer Gear

(*19*)(*1*)

Teacher: [0:00] On this lesson, I’m going to turn you the way you’ll be able to debug and investigate cross-check your tournament listeners the use of the Chrome Browser DevTools.(*20*)

[0:08] On this setup, I’ve a clickEventListener that I have added to the guardian component, and it will logout ParentClicked when it is finished, and I have added this tournament listener within the seize section.(*20*)

[0:19] I am additionally including a clickEventListener to the button component which is able to logout ButtonClicked when it is clicked, and I am not offering a seize price to this tournament listener, so it will be finished within the bubble section.(*20*)

[0:31] You’ll debug your tournament listener code in the similar means that you’d debug any code. You’ll upload console statements. I will logout the development. I will be able to see that there. I may upload debugger statements.(*20*)

[0:48] Now after I click on at the button, I’m going to see that my on guardian clickEventHandler. I will be able to now get a breakpoint in right here. I will be able to do such things as investigate cross-check the disk context and the development. I will be able to additionally take away the debugger commentary and upload my very own breakpoints.(*20*)

[1:04] I used to be to pause the execution of my application all the way through myEventListener and I will be able to investigate cross-check the development and likewise the disk context. Within the resources panel, I will be able to additionally cross to the development listener breakpoint segment.(*20*)

(*12*) I will be able to purpose the browser to create breakpoints for classes of occasions or explicit occasions. Right here I will be able to cross in to the MouseEvents for the clickEvent. Now after I click on at the button, my guardian tournament listener added within the seize section is being damaged into first.(*20*)

[1:37] I will be able to see details about that. If I leap to subsequent breakpoint, I will be able to see that my button EventListener is being paused on as neatly. The use of this I will be able to step via the entire tournament listeners that had been being finished as a part of this tournament.(*20*)

[1:53] There also are some developer device command line utilities that you’ll be able to use to lend a hand debug your tournament listeners. At the start, I am making a button consistent within the world scope which issues to the button component.(*20*)

[2:04] I can have additionally decided on the button component which might set that to be buck 0. The primary developer device serve as we are going to have a look at is getEventListeners. The getEventListeners serve as handiest exists throughout the dev equipment. You’ll’t use it to your application code.(*20*)

[2:21] Should you name this serve as with a component, it’s going to go back again the development listeners which can be connected to that component. Right here we will be able to see that there used to be one clickEventListener added to the button. I will be able to drill down to determine extra details about that tournament listener. I will be able to see it used to be now not passive, it is sort click on. I will be able to even drill down into the listener itself to seek out the serve as that is going to be finished as a part of this listener.(*20*)

[2:51] MonitorEvents is some other DevTools handiest serve as. I will be able to supply an object as the primary argument, after which the occasions that I am excited by tracking. Once I come again to the button, and I cause KeyDownEvent, we will see that the development identify used to be logged out to the console, after which the development itself.(*20*)

[3:12] I will be able to prevent tracking occasions at the button by way of the use of the onMonitorEvents serve as. If I choose the button, I’m going to open up the Components panel, and in right here, I will be able to see a bit for tournament listeners. This segment accommodates details about the development listeners connected to that component.(*20*)

(*4*) Right here, I will be able to see {that a} click on EventListener has been added to the button component. I will be able to see details about the development listener. There may be additionally a hyperlink right here and I will be able to click on on it to be taken immediately to the development listener serve as. I will be able to additionally use this drop right down to filter out the development listeners that I am seeing right here. I may use this to mention, “Handiest display the passive tournament listeners in this component.”(*20*)

(*3*) Now, there are not any passive tournament listeners in this component at the moment. We handiest have blockading ones this is non-passive tournament listeners. That is what is arising. I will be able to additionally toggle the ancestors checkbox to look tournament listeners added to ancestors of my button component.(*20*)

(*2*) I will be able to see that for the clicking tournament, there is additionally an tournament listener added to the guardian component and I will be able to drill down in right here and in finding out extra details about that as neatly.(*20*)