Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I find what Javascript is running on certain events?

I'll pick Chrome for this example, but I'm open to a solution from any browser.

Use Case: I have an update button on my website that is used to update item quantities in a shopping cart. I'd like to allow a user to enter a 0 and click update in order to remove the item. Trouble is, there is some listener in some js function that is denying the ability to enter a 0 and click update (after clicking update the old quantity remains).

My question is, what developer tool can I use to find which js function is running during that event? I don't think that Chrome's inspector does this, and I'm not very familiar with Firebug, but I couldn't find the functionality there either.

I feel that I should be able to inspect js firings just like I do css stylings. Is anyone aware of a tool I may use?

like image 598
jesuis Avatar asked Aug 06 '13 17:08

jesuis


People also ask

How do you check which event is triggered in JS?

Open Google Chrome and press F12 to open Dev Tools. Go to Event Listener Breakpoints, on the right: Click on the events and interact with the target element.

How do I see all the JavaScript files on a website?

You can also press F12 on your keyboard to open the developer tools. In the top-left section of the developer tools, make sure Elements (A) is selected at the top. In the condensed code under the Elements header, find the <script> tag containing a link to a . js file (B).

How do I track JavaScript execution in Chrome?

One simple approach is to start Chrome Developer Tools, switch to the Sources panel and hit F8 (Pause Execution). This will break on the first executed JavaScript statement.

How can you tell if a event is triggered?

To check if event is triggered by a human with JavaScript, we can use the isTrusted property. to check if the event is triggered by a human in our event handler callback. e is the event object and it had the isTrusted property. If isTrusted is true , then the event is triggered by a human.


2 Answers

I've had to debug some particularly nasty unseen-cause Javascript issues at my job. Knowing the full depth of developer tools like Chrome's is definitely helpful. It undeniably takes some creativity to find places that might be causing the issue, but a few tips:

Tracking down event listeners

Under Chrome's Elements view, try Inspect-ing an element (right-click, Inspect); then, on the right side of the developer view, scroll down to Event Listeners. Here you can view what code files have hooked up an event. Often, this will just point you to a middle-framework from the really devious code you're looking for, but sometimes it will point you in the right direction.

Trapping a DOM modification

Many of the unwanted effects I see are because of something changing some value or attribute on the page that I don't want. Anytime this happens, you can right-click on the element (under the Elements view) and say "Break on..." and the specific scenario you're looking for. When Chrome then hits a breakpoint, you can then look downward in the Stack Trace until you find something recognizable that shouldn't be called.

EDIT after reaching ten votes!

Trapping a JS object modification

If the change you're interested in is code-internal, not in the UI, things get trickier. What's meant by this scenario is that you know somewhere in the code, something incredibly annoying like the following is happening.

company.data.myObject.parameter = undefined; 

In this situation, you know myObject is still the same object, but it's being modified, perhaps unintentionally. For that, I often insert the following bit of code, sometimes just through the developer console at some point before said modification happens.

Object.defineProperty(company.data.myObject, 'parameter', {   set: (val) => {     debugger;   } }); 

This includes an arrow function - you're only using this for debugging and Chrome supports it, so might as well save keystrokes. What this will do is freeze your debugger as soon as some line of code attempts to modify myObject's "parameter" property. You don't necessarily have to have a global reference to the variable if you can run this line of code from a previous breakpoint that will have the given object in the locals.


Otherwise, if all I'm starting out with is the HTML code, and I want to tie that to Javascript code, I'll often just look for identifying features like "id" elements, and search all JS files in my development directory for it. Normally, I can reach it pretty fast.

like image 128
Katana314 Avatar answered Oct 14 '22 09:10

Katana314


  1. Open your page in Firefox with Firebug enabled.
  2. Go to console tab in firebug and click profiling
  3. enter 0 in the textbox and click the button.
  4. Stop profiling.
  5. You will be able to see all the javascript functions which have executed due to your actions. You can view them one by one to figure out which method has caused the mischief.
like image 26
Devendra Bhatte Avatar answered Oct 14 '22 09:10

Devendra Bhatte