How to find JavaScript function definition in Chrome?

In today’s time, almost everyone knows Google Chrome and how to use it for their comfort. But in the case of a developer, it is a must to have advanced knowledge of using Chrome because Chrome can help a developer tackle problems in many ways such as solving the problems or debugging the code with ease, inspecting the code, and finding JavaScript functions defined in the code.

In this tutorial, we will learn how we can find a JavaScript function in Google Chrome that is defined in the JavaScript code.

Here are three ways of finding the JavaScript function in Google Chrome.

• Using Developer Tools
• Using Inspect Element
• Using View Page Source

Let us discuss all of them with stepwise use of each.

Using Developer Tools

Developer tools are very important for a developer for development purposes.

Below are the steps to use the Developer tools for searching a particular keyword or the JavaScript function in the code −

Steps to Use Developer Tools

STEP 1 − Use the ctrl + shift + J keys combination for Windows Operating System and use cmd + optn + J keys combination in macOS from your keyboard to directly open the developer tools. The picture below will show what the interface of Developer tools will look like −

STEP 2 − After opening the developer tools you can use the combination of following keys according to your operating system.

Windows − ctrl + shift + F

macOS − cmd + optn + F

The above key combinations will open the search bar, where you can easily search for particular keyword and also for the JavaScript function that you are looking for as shown in below image −

In the above steps, we have learnt how we can search for a JavaScript function in Google Chrome’s developer tools and get the desired result.

Using Inspect Element

Inspect element is very useful for developers as they can inspect whole code inside the browser by using it.

Below are the steps to use the inspect element for searching a particular keyword or the JavaScript function in the code −

Steps for Using Inspect Element

STEP 1 − In the first step, you have to open the inspect element. By right-clicking the browser window, a list of activities that you can perform on the browser will be shown to you, at the bottom of that list you get an option named inspect, as shown below image −

STEP 2 − By clicking on the inspect option inspect element will be open to use.

Once you open the Inspect element tool, you have two options to find the JavaScript function.

By manually going through the code inside the body tag and check for the script tag, then search for the needed function inside the code of script tag. As this way of searching the function will be time consuming and very lengthy so you can use the other option.

When you open inspect element, on the screen you will get an option for search, there you can write the needed keyword or the name of the function to search for it in the code.

Below image will show the process of searching for JavaScript function using both of the above options −

In above steps, we learnt how we can use the inspect element method to find the JavaScript function in the Google Chrome. Now, we will see use of View page source method.

Using View Page Source

It is another method of searching or finding a JavaScript function in Chrome.

Below are the steps to use the view source code for searching a particular keyword or the JavaScript function in the code.

Steps for Using View Page Source

STEP 1 − The first step for using the view page source method is to open the view page source to access the code of the website or the webpage so that you can traverse the code for the needed keyword or the function that you are searching for.

You can open the view page source by right click on the browser window. On right click a list will be displayed to you in which the last second option will be view page source and by clicking that option you will be able to access the source code of the webpage. Below image will show the where the option for view source code is located in the list −

STEP 2 − When you open the view page source option, the whole source code of the current web page in the browser window will be visible to you. In the source code you have to search for the script tag that will be present at the end of the body tag. When the search for script tag is over you can further search for the JavaScript function inside the code of script tag. As shown in below image −

In this tutorial, we have seen three ways or methods of searching or finding the JavaScript function in Google Chrome that are very useful, and a developer must be familiar with all these methods as they make development easy to understand.