How to view JavaScript for a web page

Updated: 03/12/2022 by Computer Hope
JavaScript or JS logo

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

View HTML 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.

Tip

If the JavaScript is contained in a .js file, all modern browsers make the URL (Uniform Resource Locator) for the .js file a hyperlink. Clicking the .js URL hyperlink opens the JavaScript in the source window.

Tip

For more information on how to view web page source code, see: How to view the HTML source code of a web page.

Inspect web page elements

Inspect web page for JavaScript

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.

Google Chrome logo

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.
Tip

You can also press F12 on your keyboard to open the developer tools.

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

Chrome developer tools - reference to .js JavaScript file

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

Chrome developer tools - link to .js JavaScript file

  1. 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.

Chrome developer tools - Sources panel showing JavaScript code

Firefox logo

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.
Tip

You can also press F12 on your keyboard to open the web developer tool.

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

Firefox web developer tool - reference to .js JavaScript file

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

Firefox web developer tool - link to .js JavaScript file

  1. 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.

Firefox web developer tool - Sources panel showing JavaScript code

Microsoft Edge logo

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.
Tip

You can also press F12 on your keyboard to open the developer tools.

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

Edge developer tools - reference to .js JavaScript file

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

Edge developer tools - link to .js JavaScript file

  1. 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.

Edge developer tools - Sources panel showing JavaScript code

Opera browser logo

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.
Tip

You can also press Ctrl+Shift+C on your keyboard to open the developer tools.

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

Opera developer tools - reference to .js JavaScript file

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

Opera developer tools - link to .js JavaScript file

  1. 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 developer tools - Sources panel showing JavaScript code

Safari logo

Safari

Note

If you already have the Safari developer tools enabled, skip to step 6.

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

Settings selector in Safari.

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

Show Develop menu in Safari.

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

Develop selector in Apple menu bar.

  1. Navigate to the web page where you want to view the JavaScript code.
  2. In the Apple menu bar, click Develop and select Show Web Inspector.
  3. In the top-right section of the developer tool, 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).
Tip

You may need to expand the <head> or <body> tags to find the .js file reference.

Safari developer tools - reference to .js JavaScript file

  1. Click the link for the .js file.

Safari developer tools - link to .js JavaScript file

  1. 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.

Safari developer tools - Sources panel showing JavaScript code