قالب وردپرس درنا توس
Home / Tips and Tricks / View the HTML source in Google Chrome

View the HTML source in Google Chrome



  View source code hero image

You can view the HTML source code directly in Google Chrome, whether you're a web designer debugging the source code of your website or just curious about what a website's code looks like. There are two ways to view the HTML source: View Source Code and check it with the Developer Tools.

Show source code with page source

Start Chrome and go to the webpage where you want to display the HTML source code. Right-click the page and click Show Page Source, or press Ctrl + U to display the page source on a new tab.

  Right-click a page, and then click Show Page Source

A new The tab opens with all the HTML for the Web page fully expanded and unformatted.

  The source opens in a new tab.

When you search for a specific element or part in the HTML source, using code is cumbersome This is especially cumbersome if the page uses a lot of JavaScript and CSS.

Checking the Source Using Developer Tools

This method uses the Developer Tools panel in Chrome and is a much cleaner way to view the source code. HTML is easier to read here, because additional formatting and reducing elements that you do not want to see are possible.

Open Chrome and navigate to the page you want to review. Then press Ctrl + Shift + i. A docked area opens next to the displayed web page.

 Developer tools open as a docked area in Chrome.

Click the little gray arrow next to an item to expand it further.

 Collapse items when you click the gray arrow.

If you do not want to default to displaying the code of the entire page, but instead want to check a specific item in the HTML code, right-click it on the page, then click Verify.

 Jump to a specific item by right-clicking it, and then click Review

to the part of the code that contains the item that you clicked ,

 The tool changes directly to this element.

If you want to change the docking position, you can move it to the bottom left. right, or even undock in a separate window. Click on the menu icon (three dots) and then either Undock in a separate window, Dock Links, Dock Down or Dock Right.

 Change the docking orientation when you click on the menu icon, then click on one of the four options


That's all there is to do. When you've finished viewing the code, either close the Show Source Code tab or click the & # 39; X & # 39; in the Developer Tools section, to return to your website.


Source link