How to See and Search the Page Source Code in Chrome

To search within the source code of a webpage in Chrome, follow these steps:

  1. Open Developer Tools:
    • Right-click on any part of the webpage you’re viewing.
    • Select “Inspect” or “Inspect Element” from the context menu. This will open the Chrome Developer Tools.
  2. Open the Source Code View:
    • By default, the “Elements” panel should be active, displaying the page’s source code. If not, click on the “Elements” tab.
  3. Search Within the Source Code:
    • With the Developer Tools open, press Ctrl + F (or Cmd + F on a Mac). This will open a small search bar at the bottom of the Developer Tools pane.
    • Enter your search query into this bar. Chrome will highlight matches within the source code as you type. You can use the up and down arrows next to the search bar to navigate between matches.
  4. With “view-source:” command.
  • This is the easiest option by far and it works both on mobile and desktop. Simply add “view-source:” before the entire URL you are browsing and Chrome will just show you the source code afterwards.

If you want to view and search the source code without the additional elements of the Developer Tools, you can:

  1. Right-click on the page and select “View Page Source” or simply use the keyboard shortcut Ctrl + U (or Cmd + Option + U on a Mac).
  2. This will open a new tab with the page’s source code. Press Ctrl + F (or Cmd + F on a Mac) and enter your search query in the search bar that appears.

Using these methods, you can easily search through the source code of any webpage in Chrome to find specific elements, scripts, styles, or any other content.

Leave a Reply

Your email address will not be published. Required fields are marked *