How to Webstorm search references acquired by jquery selectors? - javascript

when you use ctrl+g on a reference, it finds you that within the same file
is there a more global search (all files in project) that finds direct references as well as as those places where jquery is invoked to get a reference to the object?

You can check the event that is occurring on any button or any html element when clicked.
All you need to do is instead of searching it right in the webstorm you can trace it accurately in the firebug.
Please make sure that firebug is installed or open the default developer's tool in your firefox or chrome browser.
To see the event that is occurring on an element :
right on the element and inspect it.
firebug will open up at the bottom of the browser and in the right-bottom corner you will find a box in which there are different tabs.
click on the events tab
you will see events such as click,mousehover....etc.
check the function that is getting called by clicking on that function name and it will show you the line of code that is being executed when you click that particular element with the js file name and the line number.
Hope that helps you out.

Related

Find script what sets button on focus

On a Drupal page a button element gets focused before the page has been loaded completely.
I'm trying to locate where this happens but unfortunately I wasn't able to track down the script. I'm using Chrome and tried to set a break-point but no luck. Further I tried to locate the line where this happens with the profiler. Also no luck so far. Do anyone know how to debug this properly? Any help is much appreciated. Thanks.
When I replace with a div, the issue is gone, so its related to the button element itself (no class nor element id)
What you want to do is right-click on the element you think is going to trigger the event and on the context menu click inspect. The chrome developer bar will open and you should see the html tag for that element you clicked on. On this bar there are two section: one with html tags and the others with tabs named Style, Computed, Event Listeners, DOM Breakpoints and Properties.
The one you want is Event Listeners, so click on that tab. Now we see all the listener for that html element grouped event type. When open a group you should see the list of element on left with a link to that specific line of code for the event handler. If you click on the link, you will be switch to the file where the code is.
Now the hard part. As you will see in some web pages, there are a lot of handlers. Also the use of libraries like JQuery make it harder to find the piece of code that really does something and the code is probably minified.
So let's supposed you found the code that you want to debug. Often it's in a format like
var namespace = {
...
handler: function(event) {
/* Event handler code here */
},
...
In a case like that, this might work
(function () {
var old_handler = namespace.handler;
namespace.handler = function () {
debugger; // this make a breakpoint here and stops
old_handler.apply(this, arguments);
}
})();
When all fails, make a local copy of the file that contains the code and setup an Apache server so that you proxy the web site except for that file which you will reference locally. Then you can modify it however you like. This won't work on https web site.

HTML / JS : How to trace the event handlers and corresponding files

I need to trace every event-handlers associated to every events of a HTML DOM element for example Button in browser like Chrome or Firefox. I also want to know which file contains the event-handler function.
I work in Rails framework and jQuery. I have so many JS file to manage. Its very troublesome to find the culprit when some thing in client side goes wrong.
Can some one help me in this regard?
You can use Chrome Dev Tool to look up event listeners added to any element, which looks like below.
Right-click the element you'd like to inspect (e.g. some button)
Choose 'Inspect Element' in the context menu
Select 'Event Listeners' Tab (shown as 1 in the screenshot)
To filter listeners only bound to the selected element, set filter to 'Selected Node Only' (shown as 2 in the screenshot)
Click the link represented in the right column of the list to get to the listener source code. (shown as 3 in the screenshot)
See also: https://developer.chrome.com/devtools/docs/dom-and-styles#viewing-element-event-listeners

Profiling: how to find out which object a method is attached to?

I have inherited a JavaScript application and I am trying to understand how it works using profiling in Chrome.
Chrome gives me the sequence of methods that are executed, but I only see the method name. How can I find out which object a given method is attached to?
If you want to see the call stack in Chrome dev tools for a specific method, you need to set a break point in the "Sources" panel.
Here's the entire process:
Run "Collect JavaScript CPU" Report
In the functions column, click the right-hand link (of the function in question) to jump to the appropriate source code line
Set a break point on that line
Re-run the script (usually via page refresh)
If break point is hit, call stack will be presented on the right-side column of the "Sources" panel

Using Chrome, how to find to which events are bound to an element

Lets suppose I've a link on my page:
Click Here
I don't know anything else, but when I click on the link, an alert("bar") is displayed.
So I know that somewhere, some code is getting bound to #foo.
How can I find the code that is binding the alert("bar") to the click event?
I'm looking for a solution with Chrome.
Ps.: The example is fictive, so I'm not looking for solution like: "Use XXXXXX and search the whole project for "alert(\"bar\")". I want a real debugging/tracing solution.
Using Chrome 15.0.865.0 dev. There's an "Event Listeners" section on the Elements panel:
And an "Event Listeners Breakpoints" on the Scripts panel. Use a Mouse -> click breakpoint and then "step into next function call" while keeping an eye on the call stack to see what userland function handles the event. Ideally, you'd replace the minified version of jQuery with an unminified one so that you don't have to step in all the time, and use step over when possible.
You can also use Chrome's inspector to find attached events another way, as follows:
Right click on the element to inspect, or find it in the 'Elements' pane.
Then in the 'Event Listeners' tab/pane, expand the event (eg 'click')
Expand the various sub-nodes to find the one you want, and then look for where the 'handler' sub-node is.
Right click the word 'function', and then click 'Show function definition'
This will take you to where the handler was defined, as demonstrated in the following image, and explained by Paul Irish here: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA
Give it a try to the jQuery Audit extension (https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg), after installing follow these steps:
Inspect the element
On the new 'jQuery Audit' tab expand the Events property
Choose for the Event you need
From the handler property, right click over function and select 'Show function definition'
You will now see the Event binding code
Click on the 'Pretty print' button for a more readable view of the code
(Latest as of 2022) For version Chrome Version Version 99:
Select the element you want to inspect
Choose the Event Listeners tab
Make sure to check the Framework listeners to show the real javascript file instead of the jquery function.
Edit: in lieu of my own answer, this one is quite excellent: How to debug JavaScript/jQuery event bindings with Firebug (or similar tool)
Google Chromes developer tools has a search function built into the scripts section
If you are unfamiliar with this tool: (just in case)
right click anywhere on a page (in chrome)
click 'Inspect Element'
click the 'Scripts' tab
Search bar in the top right
Doing a quick search for the #ID should take you to the binding function eventually.
Ex: searching for #foo would take you to
$('#foo').click(function(){ alert('bar'); })
2018 Update - Might be helpful for future readers:
I am not sure when this was originally introduced in Chrome. But another (easy) way this can be done now in Chrome is via console commands.
For example: (in chrome console type)
getEventListeners($0)
Whereas $0 is the selected element in the DOM.
https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4
findEventHandlers is a jquery plugin, the raw code is here: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js
Steps
Paste the raw code directely into chrome's console(note:must have jquery loaded already)
Use the following function call: findEventHandlers(eventType, selector);
to find the corresponding's selector specified element's eventType handler.
Example:
findEventHandlers("click", "#clickThis");
Then if any, the available event handler will show bellow, you need to expand to find the handler, right click the function and select show function definition
See: https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/
For Chrome Version 52.0.2743.116:
In Chrome's Developer Tools, bring up the 'Search' panel by hitting Ctrl+Shift+F.
Type in the name of the element you're trying to find.
Results for binded elements should appear in the panel and state the file they're located in.

How do you debug vanishing elements with Firebug/Dev Tools on your websites?

How do you debug vanishing elements with Firebug/Dev Tools on your websites?
I have a div that disappears on mouseleave/out; I would like to explore this div with the debugger, but on my way to the firebug/debugger window, the div I want to inspect disappears.
Does anyone have tricks to achieve this?
EDIT: - It's not marked display: none, but removed from the DOM. Making this a bit challengier to find , if it's gone :-)
Reference this jsFiddle for an example of vanishing nodes on mouseout.
Note that some of the other answers won't handle/catch iFramed content. These two methods will...
As the OP said, the easiest way, to catch these elements, is to use firebug's Break On Mutate function.
Another easy alternative is just to save the file:
While hovering over the appropriate element with the mouse...
Press ControlS. The "Save As" function saves the generated code.
For sites that override ControlS, such as jsFiddle, press AltF, then A (On Windows machines, anyway).
Open the saved code and you can see the fleeting element(s) there. iFramed content will be in the _files subfolder.
To debug vanishing element with DevTools, you can easily break on subtree & attributes modifications or node removal by selecting the element and in context menu select 'Break on...' (as shown below).
Alternatively you may try Visual Event or Visual Event 2 which can show you debugging information about events that have been attached to DOM elements. See: How to find event listeners on a DOM node?
Open Firebug.
Find the div in the markup.
Extra points if you use Ctrl + F to find it!
Ctrl + Shift + C is the shortcut key combo for Inspect Element. From the FireBug Wiki.
Right-click on the element to bring up the context menu and click "Inspect Element".
UPDATE: To address the fact that the element is being removed from the DOM and not hidden.
http://jsfiddle.net/x3v3q/
$('#mydiv').mouseout(function(){
alert('hi');
});
$('*').unbind();
Using jQuery, you can unbind all of the events on all of the elements on the page. If you run the jsfiddle code, you can see that it works when "unbind" is commented. But running "unbind" removes all event handlers from an element.
If you run the unbind from the firebug console, before the element is removed, you can right-click and "Inspect Element" or use one of other suggestions for inspecting it.
If the page doesn't have jQuery loaded, you can install the FireQuery plugin and press "jquerify" to inject jQuery into a page that doesn't have it load already. See https://addons.mozilla.org/en-US/firefox/addon/firequery/
Hope that helps...

Categories