How to know which script is running on a given HTML element?

Asked

Viewed 5,446 times

6

In Firebug it is possible to know which CSS is being applied in the HTML element, but it is not possible to know which Javascript is running in the HTML element, you have to know this?

javascript firebug
  • 3

    As well as javascript being executed in the html element?

  • type, sometimes we run javascript functions on html elements, for example Document.getElementByiD("elementName"); I want to know how I do to find out that this javascript is running.

  • 3

    @user8465 In this example there is no javascript running on the element. The element is only being selected.

  • but it was just to exemplify

  • 4

    @user8465 What I’m saying is that it’s not a useful example. We still don’t know what you want.

  • in firebug when you click on an html element it shows next to the css being applied, what I want is when you click on the html element is shown the javascript being applied, understood ?

  • You can put breakpoints in Javascript to capture the moment it runs, but I don’t know the resource that does what you want.

  • 2

    @user8465 Update the question with a "javascript code being applied over an element", hence we can know if there is a way to find this code without knowing it previously.

  • There is no Javascript running "no" element. Javascript, as @Beterraba has already said, only SELECTS the element and sometimes listens to events triggered by the element. You can see the "Event Listeners" of the element in Firebug, but other types of interactions are not displayed because they make no sense.

  • in this example only selects, but for example if you make a dynamic clock that changes every second in javascript and this clock is shown inside a div, it means that inside this div has a javascript running =)

  • 3

    @user8465 Javascript does not run "within the div", it runs globally for the entire page - it may or may not change the content of the div. Since you can save a reference to div in any variable (or even no variable - if you make the selection and change at the time) it is impossible to know every snippet of code that touches a div, and therefore in what part of the page (inline or external script) that code has been defined. The most guaranteed way is reading the source code itself... P

  • Hi, @user8465, check it out What is console.log?

Show 7 more comments

2 answers

3

You can find out which events are attached to a given DOM object via Firebug from version 1.12, where the function was introduced getEventListeners(target) (English):

  1. Open Firebug for example with the key F12
  2. Click on the tab console;

  3. Type the function at the command line by passing a DOM object as a parameter.

    Example to collect events attached to the tag <body/>:

    getEventListeners(document.body);

    The result will be something like:

    Imagem ilustrativa

Notes:

It doesn’t seem to work with jQuery objects, you should make use of "normal DOM objects".

You should expect the page to be fully loaded to ensure that the entire DOM has been read and is ready to be searched by getEventListeners().

1

If you are using jQuery, there is a firefox plugin that lets you know which function is tied to an html element. The name of the plugin is Firequery.

  • 1

    Sorry, I think our issues collided. It’s nice to wait 5 minutes after someone makes an issue. This is the time to fix things without generating an item in the history (grace period). Had put the plugin summary because it is good practice to put a summary of what the reader will find in the link offered. All good!

Browser other questions tagged javascript firebug

You are not signed in. Login or sign up in order to post.