breakpoint on submit - Chrome developer tool

Question

Is there any way I can put a break point on chrome developer tool so that the screen is paused when I click submit button? In precise how to break on submit action?

Solution

I posted a very similar answer that details how to enable specific event listener breakpoints in Google Chrome Dev Tools.

In the dev tools, go to the Sources tab, and look in the right-hand column with the expandable/collapsible sub-panes. Expand the one called Event Listener Breakpoints. Under here are expandable checkbox selections that allow you to tick any events that you wish to listen for. Once you check any of them, Chrome will break in JS code as soon as an event of that type occurs.

You specifically want the submit event under the Control group. Expand Control, and tick submit, as shown in the image below (the box on Control is added automatically to indicate that some, but not all, of the items under it are ticked). Chrome's dev tools should then hit a dynamic breakpoint immediately any time a submit event occurs.

Fun fact: I still had submit ticked when I clicked the button to post this answer, and Chrome hit a breakpoint :).

Comments

[Vinayak Pingale]

Google. Please refer stackoverflow.com/questions/10050465/…

[user3127042]

Thanks Vinayak Pingale

[user3127042]

Thanks very much ajp15243

[ajp15243]

@user3127042 You're quite welcome. Please make sure to mark an answer as accepted if it solves your problem, so that others can see that it is marked as solved and can benefit from the solution.