[SOLVED] Finding What Javascript Code Runs After Clicking an HTML Element in a Website such as an Anchor Link or a Button.

Amazon Have you ever wondered what Javascript statements run when you click an HTML element in a website? Many advanced websites use cutting-edge Javascript libraries and tracking down what Javascript code is executed when you click on a link or a button can really throw you for a loop. If you are trying to find out what Javascript lines of code run when you do an action on a website, this tutorial is for you.

First you need to have Google Chrome installed. If the Javascript is minified into one single line, then this tutorial won't work for you. If you are debugging your own website, you need to make your site reference the original, multi-line Javascript files.

I use Google Chrome version 48.0.2564.116. By the time you read this tutorial you may be using a newer version, but the same function may still exist.

Goal

On a laptop or desktop computer, go to https://cppprogramming.chtoen.com/ and make your browser narrow so that you see the mobile view of the website, which has a square menu button at the top right corner. Our goal is to find what Javascript statements or functions will run once you click on the menu button.

Steps to discover what Javascript code runs

Right click your mouse on the menu button and select Inspect Element so that the Chrome web developer tool panel, aka Chrome DevTools, opens.

You should see two panels. The left panel should have the website's DOM. The right panel should have tabs Styles, Computed, Event Listeners, DOM Breakpoints, Properties.

In the right panel, select Event Listeners. Check the checkbox Ancestors and the checkbox Framework listeners. You should see a list of collapsed texts. Expand the text that says click and you should see the following (Let's call it Javascript Suspects):

click
  document bootstrap.js:716
  document bootstrap.js:1808
  document bootstrap.js:1003
  document bootstrap.js:653
  document bootstrap.js:774
  document bootstrap.js:611
  document bootstrap.js:436
  document bootstrap.js:246
  document bootstrap.js:78
  body#m rightclick_hook.js:8

This is a list of places that associate event handlers with the click event of this particular menu button. Unfortunately Chrome is not smart enough to know which one is really triggered by clicking on the menu button. So you need to go through them one by one.

It is no doubt that bootstrap is doing this because bootstrap is trying to show the mobile view of the site when the width of the browsing view is small. Click on the first link, which is bootstrap.js:716, and you will be directed to line 716 of bootstrap.js in the Sources section. Does it look like it would run whenever you click on the menu button? If not, go to the next one, which is bootstrap.js:1808.

What if you don't have a clue?

Not everyone is born a Javascript wizard. So what if you just don't know which Javascript line is executed when you click on the menu button? Easy. When you are in the Javascript editor in the Sources section, insert a log statement inside each Javascript line referenced by the Javascript Suspects like the following:

console.log('bootstrap.js:1808');

Then press Control+S to save the change. There you go! Insert a different log statement for each suspect and click on the menu button again. In the Console section you'll see the log printed out and you'll know which Javascript suspect runs.

Don't worry; by inserting log statements in the Javascript files, you won't change the actual Javascript files running on the website; you are only changing them running in your browser.

Questions? Let me know!