When I try to click on the "Inspect this" field on a popup which appears only onMouseHover event it can become very annoying.
https://youtu.be/4lPcO00MUYk
And since it's frequent to attach a javascript behavior to any DOM element event through selectors I can't imagine how to debug this web pages.
Any suggestion?
I've found a question which may help with my problem, but also #Kaddath solution is very interesting.
See: https://stackoverflow.com/a/15923770/196210
Related
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.
This question already has answers here:
Using Chrome, how to find to which events are bound to an element
(8 answers)
Closed 8 years ago.
I am looking at the Bing Maps site. I am opening up the my places editor and clicking the polyline tool in the drawing toolbar.
I would like to discover what javascript runs when I click on tools in the drawing toolbar.
I have looked at the html and there is no onclick event declared on the element.
I have done text searches on all of the scripts referenced by the page, for the ID of the polyline tool element. This was to try to find javascript that attaches a click event to the element, but I got no matches at all.
There must be some script running when I click on a tool. How do I find out what script is executing when I click the tool divs in the toolbar?
I don't think there is anyway I can set breakpoints if I don't first know what script to set them on. Is there anyway I can trap the javascript that runs to discover what it is, either in IE F12 developer tools or in firebug?
You can have a look at the "Event Listeners" panel in Chrome, it has detailed information about each listener attached to an element.
In Chrome Developer Tools click on the timeline tab, uncheck "Loading" and "Rendering", then click the record button (filled circle). Trigger your event by clicking on the button and then stop recording by clicking the circle again. Find your event in the timeline and expand it by clicking on the arrow beside it. On the left it will tell you which function the event called.
I've used the Profiler in Chrome's debug tools for this purpose before.
Open the site in Chrome, F12 to get the debug tool open. In the tabs at the top of the tool, click Profiles.
Make sure Collect JavaScript CPU Profile is selected, and hit Start, then click on the polyline tool you're curious about, and hit Stop. The profiler should now list out all Javascript calls made while the profiler was active.
Firebug probably has something similar.
To locate a potential event handler for a particular element that has been added dynamically try performing a search in all sources of classnames and ids. Once you've found an event handler you can set a breakpoint and verify.
Google Chrome has a global search that works great.
Open up your debugger and start the profiler. Click on what ever you want. Look at what the profiler and see what was called.
I have an ajax script with a "get more posts" button that inserts a couple screens/viewports worth of information. In doing this, the document looses focus at some point and thus the default behavior of the space bar (page down) doesn't work in firefox.
How can I focus the document again to regain the default behavior? What components control this behavior?
It works in Chrome and IE (surprisingly), but not FF.
I tried in a callback function: document.body.focus() and document.getElementById('someClickableElement').click(), but no luck.
If I actually click on the page after the content is displayed, then I can scroll again with the space bar.
Since this is a frequently used feature, it's annoying to click "load more", click again, then space to page down.
Thoughts? Suggestions?
EDIT:
Ok, so i was using a YUI button (just a nice looking html "button" element with some css styling) for the interface. i replaced it with a link, and i no longer have this problem.
Interesting that it works as expected in Chrome & IE, and I'm not even using YUI listeners for the event (just the nice-looking buttons). It's handled by jquery's live method (b/c of the event delegation).
Also interesting that I'm not able to programmatically do what I can do physically (ie. "click").
Even if there is some YUI bug, it seems like firefox should be able to regain focus via some javascript action.
VERY WEIRD. Still any input appreciated (more javascript suggestions to try?). I'm somewhat committed to my current interface.
It looks like you need to blur YUI button element. Or do something with tab order between whole document and the YUI button.
So - not to focus() document, but to blur() YUI button.
Alternatively, you may try to apply 'keypress' event simulating 'TAB' key.
I haven't tried this but how about doing a blur() on the body or the window.
window.blur();
I have a set of pages that have tons of JavaScript on it: Table sorting, AJAX calls, autocomplete, dynamically hiding and displaying areas of the page, etc... The problem that I am seeing is when the data on said page gets large a delay (browser freezes) is noticed when leaving the page. This delay happens when the user clicks away, closes the browser, or executes a form submit. I want to see if the problem is caused by JavaScript. What tool could I use to find out? Firebug doesn't seem to work in this scenario.
The only place unload is mentioned in the codebase is in jquery.js and ui.tabs.js (jquery ui)
Are there any onunload event handlers attached (to body, window, form etc.)? If so, it would be a good starting point to investigate.
[Edit]: Apparently jQuery runs a loop unbinding all the events attached to every element. This is to prevent memory leaks in IE (created due to event handler closures referencing the element they are listening to). This could create a delay if your DOM is very complex.
Can you try commenting this portion out in jQuery code and see if that is causing the problem?
[Edit 2]: The window unload seems to have been improved in newer versions of jQuery (1.3+). What version are you using?
Inline Code Finder is a firefox addin (well, really it's a firebug addin) that shows you visually what events are attached where and when they're invoked.