I am attempting to make an inspect element-like tool using JS. In most browser's inspect tools you are able to hover over elements on the page and click them to show where they are in the website's code. The only way I can think of simulating this is to add event listeners to every element on the page. I feel that this is bad for a lot of reasons. Is there any other way I can do this? If not, would adding event listeners to every element on the page be a good idea?
Related
I have to inspect a large scaled HTML front end project where a page load occurs after jQuery Javascript AJAX request. But I cannot find out why and where a HTML navigation was executed. Does there a exists a way to watch or stop at such an event in chrome dev tools? I just took a look if there is a form or submit button on the page. But there is nothing not even a form. I am pretty sure HTML navigation was triggered by Javascript code.
Yup, there is options available for Event Listener Breakpoints. It will be in source panel and you can have a variety of event breakpoints.
For more, detailed reference - Chrome Breakpoints Reference
When I'm in a complex website such as Facebook and write a comment and push Enter there is an event fired that starts everything. Can I somehow observe which events are fired and when (and eventually somehow trace/step them)?
So in general, I'm looking for a tool capable debugging a website in this way. Is there any way?
If you are using devtools of Google Chrome, there is an Event Listeners tab that could help. See the attached picture.
There, I have selected the "Post your answer" button of this very question and as you can see, the EventListeners tab shows that there is at least an onSubmit event listener attached.
One of the debugging tool that i am using and works well for me is firebug in mozila.
you can read about firebug Here
With fire bug you can notice everything like webpage is making how much ajax call, which script is binned with which element. even you can also easily debug the css and design elements. firebug will help you more to debug the website on browser.
Using Chrome , I need to debug the java-script handler that is executed when a specific button is clicked, without searching the java-script files.
Can I use Chrome's "inspect element" for the button to find java-script handler?
Or, is there a recommended tool?
How to achieve this?
p.s: Think of a complex app within a website, I need to debug the logic behind some buttons..
When you open the developer tools on the element tab if you select the element to debug you will see at your right a tab Event Listener. It is with the Styles tab. there you can inspect the event listener. In my opinion the best way is to add break points on the sources. You'll see.
Right Click, inspect element allows me to see corresponding html & css to screen element. Does the browser likewise, permit tracing the javascript function to corresponding clicks? Or do you manually need to trace from onclick event, so on and so forth?
If so, can one likewise, perform editing of the Javascript, in a browser to verify, what changes will it bring about? Much like, what we can do for html & css
On Google Chrome i discover, in Elements on the right side screen, one can browse to Event Listners then click event to see some Javascript. I'm still deciphering it to see if it permits simultaneous browser screen manipulation.
It doesn't seem to be working at the moment.
I have a div which is getting hidden/displayed by a click on another element. I can see the div's visibility CSS property changing in Firebug. The div is initialized using Microsoft Javascript library in code using:
Sys.Application.add_init(function() {$create.....
How do I get the actual Javascript which runs during run time with every click? Is there a way to intercept the js call and see what code is exactly running, like in Firebug or Chrome's Developer Tools?
(This is NOT a question on how to hide/unhide an element. I know how to do this)
I know in Chrome Dev Tools what you can try to do is:
Find the element clicking on which is causing your div to hide.
Expand it's Event Listeners in the right bar
Expand the click event
Then click the source file displayed there for the click event.
It would take you to where the click event function, so you can put a break point there. This is what you're asking, right?