How to view JavaScript for a web page

Many web pages utilize JavaScript to add dynamic and immersive elements for viewers. Some web developers may want to learn how to create the same elements and effects for their web pages. Viewing the JavaScript code for a web page helps developers learn and implement similar elements.

There are two main ways to view the JavaScript code used on a web page. Select from the list below to learn about each method.

View web page source code

Some web pages have JavaScript inline with the rest of the HTML (HyperText Markup Language) source code. Web developers sometimes add JavaScript directly in the HTML when that JavaScript is used only on one web page.

For most browsers, to view inline JavaScript in the HTML source code, do one of the following.

• Press the Ctrl+U keyboard shortcut.
• Right-click an empty area on the web page and select the View page source or similar option in the pop-up menu.

Using either method above, the HTML source code is displayed. To find inline JavaScript code, look for a <script type="text/javascript"> tag, denoting the start of the JavaScript.

Inspect web page elements

If JavaScript is used on multiple web pages, it is often referenced in the HTML code through a link to a .js file containing the JavaScript. Using a .js file allows a web developer to change JavaScript code once and apply it to all their web pages.

To view JavaScript contained in a .js file, select your browser below.

Chrome

1. Open Chrome and navigate to the web page containing the JavaScript you want to view.
2. Right-click an empty area on the web page and select Inspect in the pop-up menu to open the Chrome developer tools.

3. In the top-left section of the developer tools, make sure Elements (A) is selected at the top.
4. In the condensed code under the Elements header, find the <script> tag containing a link to a .js file (B).

5. Place your mouse cursor over the .js file link, right-click that link, and select Reveal in Sources panel in the pop-up menu.

6. The Sources panel is displayed in the developer tools, showing the lines of JavaScript code contained in the .js file. The name of the .js file is also listed at the top of the Sources panel.

Firefox

1. Open Firefox and navigate to the web page containing the JavaScript you want to view.
2. Right-click an empty area on the web page and select Inspect in the pop-up menu to open the Firefox web developer tool.

3. In the top-left section of the developer tool, make sure Inspector (A) is selected at the top.
4. In the condensed code under the Inspector header, find the <script> tag containing a link to a .js file (B).

5. Place your mouse cursor over the .js file link, right-click that link, and select Open File in Debugger in the pop-up menu.

6. The Debugger panel is displayed in the web developer tool, showing the lines of JavaScript code contained in the .js file. The name of the .js file is also listed at the top of the Debugger panel.

Microsoft Edge

1. Open Microsoft Edge and navigate to the web page containing the JavaScript you want to view.
2. Right-click an empty area on the web page and select Inspect in the pop-up menu to open the Edge developer tools.

3. In the top-left section of the developer tools, make sure Elements (A) is selected at the top.
4. In the condensed code under the Elements header, find the <script> tag containing a link to a .js file (B).

5. Place your mouse cursor over the .js file link, right-click that link, and select Reveal in Sources panel in the pop-up menu.

6. The Sources panel is displayed in the developer tools, showing the lines of JavaScript code contained in the .js file. The name of the .js file is also listed at the top of the Sources panel.

Opera

1. Open Opera and navigate to the web page containing the JavaScript you want to view.
2. Right-click an empty area on the web page and select Inspect element in the pop-up menu to open the Opera developer tools.

3. In the top-left section of the developer tools, make sure Elements (A) is selected at the top.
4. In the condensed code under the Elements header, find the <script> tag containing a link to a .js file (B).

5. Place your mouse cursor over the .js file link, right-click that link, and select Reveal in Sources panel in the pop-up menu.

6. The Sources panel is displayed in the developer tools, showing the lines of JavaScript code contained in the .js file. The name of the .js file is also listed at the top of the Sources panel.

Safari

1. Open the Safari browser.
2. Select from the menu bar at the top-left corner of the screen.
3. Select Settings... from the drop-down menu.

4. Click the Advanced tab, and check the box next to Show Develop menu in menu bar.

5. You should now see the Develop selector in the Apple menu bar at the top of the screen.

6. Navigate to the web page where you want to view the JavaScript code.
7. In the Apple menu bar, click Develop and select Show Web Inspector.
8. In the top-right section of the developer tool, make sure Elements (A) is selected at the top.
9. In the condensed code under the Elements header, find the <script> tag containing a link to a .js file (B).

10. Click the link for the .js file.

11. The Sources panel is displayed in the developer tool, showing the lines of JavaScript code contained in the .js file. The name of the .js file is also listed at the top of the Sources panel.