Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Catching the specific Javascript code being executed onClick

Tags:

I am working on a site that has loads of legacy Javascript and jQuery includes and there is no documentation to show what is happening when.

I have a specific problem to fix and I cannot find the relevant code that is being executed when a button is clicked. To save me from trawling through (and making sense of) hundreds of lines of legacy script, is there a feature, possibly in Firebug, that will identify what script is being executed when I click on a button?

like image 838
Kevin Avatar asked Jan 13 '10 16:01

Kevin


People also ask

What does the onclick event handler do?

The React onClick event handler enables you to call a function and trigger an action when a user clicks an element, such as a button, in your app. Event names are written in camelCase, so the onclick event is written as onClick in a React app.

How Onclick works in JavaScript?

The onclick event executes a certain functionality when a button is clicked. This could be when a user submits a form, when you change certain content on the web page, and other things like that. You place the JavaScript function you want to execute inside the opening tag of the button.

Which is correct usage of the onclick function?

The onclick event generally occurs when the user clicks on an element. It allows the programmer to execute a JavaScript's function when an element gets clicked. This event can be used for validating a form, warning messages and many more. Using JavaScript, this event can be dynamically added to any element.


2 Answers

I believe there is a feature in Firebug's console window called Profile. Click profile, click the button, then click profile again. It should give you what all functions were called in that time. Be warned that if this code includes jQuery, you might get a huge long list of functions because jQuery uses tons in its code. Unfortunately, the profiler will also show anonymous functions, which can really be a pain.

Otherwise, do a search in the code for the button's class or ID and go through them. If you have an id of fancy then you might do a search for #fancy in your code and attempt to find it. That may lead you in a general direction, at least.

like image 109
Reid Avatar answered Sep 21 '22 02:09

Reid


You can click Firebug's "Break on next" button (in the Script tab; it looks like a pause button), then push the button that you want to debug.

The next time any JavaScript code executes, Firebug will break into the debugger and show you that line of code.

like image 41
Jason Orendorff Avatar answered Sep 19 '22 02:09

Jason Orendorff