ActiveCollab’s datepicker was being refactored when I ran into a problem. To close the popover, I would always need to trigger an extra keypress event. Chrome’s debugger
You would use JavaScript to attach an action handler to a button that you click on a webpage. You would create a button, add JavaScript to capture the click, then execute a function. You can then see your local variables as well as the stack trace, up to the point that debugger stopped. You can also step into functions just like you would in other debuggers.
Events (or pub/sub pattern in general), are difficult to track. I first tried DOM Breakpoint. This activates on DOM modifications (attribute, content, etc.). It didn’t work.After some time, I stumbled upon a lesser-known DevTools’ function: `monitorEvents()`.The monitorEvents() method instructs the DevTools to log information on the specified targets. The object to monitor is the first parameter. If the second parameter is not given, all events will return. To specify the events to listen to you may pass either a string or an array of strings as the second parameter.– Chrome Developer Tools docsTranslated to plain English — open the console, find an element whose events you’d like to debug (in my case ‘body’, so I see them all), and call:monitorEvents(document.getElementsByTagName(‘body’)[0], ‘mouse’)This monitors all mouse events (enter, leave, click, dblclick…) and log their contents to the console from where you can inspect them.This sometimes helps, but in my case, it didn’t: I had every info about the event but none about its callers.The Solution
You can also use incognito mode to develop stuff. Or develop in incognito mode.P.S. You should always turn off Event Listener Breakpoints after you’re done debugging. They persist and are activated every time you open the browser.
