How to view the html source in google chrome

How to view the html source in google chrome

Viewing page source in Chrome is a good way to get some useful design ideas for web pages. In this post from MiniTool Software, we will mainly talk about how to view source code in Chrome in two different ways. We hope it is helpful to you.

Viewing page source is a good method to develop your web design level if you are a member of the web industry. You can get skills from an excellent web page. Also, even you are not a web designer, if you are interested in the page source, you can also view page source to get some information that you can’t see on the web page.

Then, how to view page source? You may ask this question. Google Chrome is the most widely-used web browser all over the world. In this post, we will show you how to view source Chrome.

How to view the html source in google chrome

In this post, we will show you some useful and convenient Google Chrome tips and tricks with which you can do your work much faster.

How to View Source Code in Chrome

It is very easy to open and view page source in Chrome. Here is the guide:

1. Open the web page you want to view page source using Google Chrome.

2. Right-click on the page (do not click on a link) and there will be a pop-out menu.

3. Select View page source from the menu. Here, you can see that there is a shortcut for View page source: Ctrl+U. This means that, after you access the target web page, you can press the Ctrl key and the U key at the same time to open and view source Chrome. While, if you are using a Mac computer, you need to press Command + Option + U to open and view page source in Chrome.

How to view the html source in google chrome

4. A new tab will pop up with the source code for that web page.

How to view the html source in google chrome

Those are the source codes you want to view in Google Chrome.

How to view the html source in google chrome

Using keyboard shortcuts for web browsers can save a lot of time for you. We will show you some common keyboard shortcuts for web browsers in this post.

Advanced: Developer Tools

To dig more information on the source code of the web page in Chrome, you can also use the Developer tools in Chrome. These tools allow you to see elements, console, sources, network, and more information on that web page.

Here are the things you should do:

1. Open the target web page using Chrome.

2. Click the three dots menu that is at the top right side of the interface.

3. Go to More tools > Developer tools.

How to view the html source in google chrome

4. A new window will pop up from the left side of the web page where you can see more information on the web page. You can click the top menu bar to switch among these options.

How to view the html source in google chrome

In the Element section, when you move the cursor on the CSS, the Developer tools can highlight the select element in the corresponding HTML page. This design is especially useful when you want to get the information on a specific piece of a crafted web page.

Is It Legal to View Page Source in Chrome?

Reading here, you might ask this question: is it legal to view page source in Google Chrome? After all, these sources are codes from others.

We believe that many web designers have done these things. It is legal to view page source in Chrome. Using these codes to build a similar page is also OK. But, it is not legal to keep the codes intact in your work. You can use them for reference, but you can’t plagiarize.

  • Facebook
  • Twitter
  • Linkedin
  • Reddit

ABOUT THE AUTHOR

Position: Columnist

Stella has been working in MiniTool Software as an English Editor for more than 4 years. Her articles mainly cover the fields of data recovery including storage media data recovery and phone data recovery, YouTube videos download, partition management, and video conversions.

Easy methods to view the source code of any webpage on a PC or a MAC using any of the popular web browsers.

How to view the html source in google chrome Alex Chris Updated February 17, 2022 Leave a Comment

It’s always useful to know how to view the source code of your website or any website. It’s a skill that can prove very handy when working on your SEO, troubleshooting problems, or just curious to see how the HTML source code of a website looks like.

In this post, you’ll learn easy methods on how to see the code of any website on any platform. Let’s get started.

How to view the HTML source code of a website on a Mac

Safari

To view the source of a website on a Mac using Safari, navigate to the page you want and use the following keyboard shortcut: Option+Command+U.

Alternatively, you can right-click anywhere on the page and select “Show Page Source” from the dropdown menu.

Google Chrome

To view the source code of a website on a Mac using Chrome, navigate to the page you want and use the keyboard shortcut: Option+Command+U.

How to view the html source in google chrome

You can also right-click on the page and select “View Page Source” from the dropdown menu.

How to view the html source in google chrome

Firefox

When using Firefox on a Mac, the keyboard shortcut to view the source code is: COMMAND + U

How to view source code on a PC

Google Chrome

When using Google Chrome on a PC, you can view the source code of a website by using the keyboard shortcut: CTRL + U.

How to view the html source in google chrome

Firefox

When using Firefox on a PC, the keyboard shortcut to view the source code is: CTRL + U

Opera

When using Opera on a PC, the keyboard shortcut to view the HTML source code of a page is: CTRL + U

Microsoft Edge

The keyboard shortcut to view the source code of a page when using Microsoft Edge browser on a PC is: F12 & CTRL+SHIFT+I

How to view the HTML code of a particular page element?

Instead of viewing the HTML code of a whole page, you can view the code of particular page elements using the INSPECT ELEMENT option available in all popular browsers like Google Chrome, Firefox, and Safari.

The process is straightforward. Open the page in a new browser window and then highlight a section of the page using the mouse.

Right-click and then select INSPECT from the dropdown menu.

This will open the developer tools and show you the HTML code associated with the particular element or page section.

Here is a quick demo on how to do this using Google Chrome.

How to download an entire website source code?

To download a website’s HTML source code, navigate using your favorite browser to the page, and then select SAVE PAGE AS from the FILE menu. You’ll then be prompted to select whether you want to download the whole page (including images) or just the source code.

The download options are common for all browsers.

Web Page, Complete: Downloads the page source code and all images, CSS files, and js script associated with the particular page. All files are saved in a folder. This is useful when you need to download the images together with the HTML code.

Web Page, Single File: Downloads the page in MHTML (short for MIME HTML). This is a form of HTML that includes both the website’s code and any external resources.

Web Page, HTML Only: Downloads the HTML and any other elements (like embedded Java Script Code) found in the body of a page.

Why is important to know how to view a websites’ source code?

There are many use cases where you might want to check the source code of a website, the most common are:

Check for the occurrence of H1 tags – Best SEO practices indicate a page should have only one H1 tag. To check if this is the case with your website, you can navigate to one of your posts, and using any of the methods described above, you can view the HTML source code of the page. You can then search for

To stop students from cheating on online quizzes and visiting blocked sites, Chromium developers updated ChromeOS and the Chrome browser to allow school IT administrators to disable viewing the HTML source code.

How to view the html source in google chrome

HTML is the foundational language for how all web pages are coded. By design, HTML code delivered by a web server is publicly accessible, and it’s how browsers like Chrome, Safari, and Firefox process and display web pages. Keeping HTML publicly accessible is essential for standardization, rendering, and security.

In October 2021, the Missouri Governor, Mike Parson, claimed that viewing HTML source code was the equivalent to hacking. Web development and security experts immediately discredited the assertion. Shaji Khan, the cybersecurity professor who helped uncover the flaw, also declared that the state’s only crime committed was by the state.

The controversy created by the Missouri Governor coincided with an update to Chromium that makes it possible to prevent users from viewing the HTML source code of a web page. The patch immediately got the attention of web developers and security experts.

@mhoy via Mastodon

The initial concern was that Chrome would allow sites to block users from viewing the HTML source code. Fortunately, that’s not what the update does.

The update was added to Chrome to solve a couple of ongoing issues at schools. The first issue involved students viewing the HTML source code to reveal answers to quizzes. The second issue was related to students using the HTML source code to circumvent blocked sites. A representative from a school district in Mundelein, IL, shared a video of how students are getting past their safeguards.

The fix, which is now available in Chrome 98, does not allow sites to block users from viewing the HTML source code. Instead, it’s a patch used for Chrome Enterprise policies, and it’s associated with the URLBlocklist policy that many schools use. The update means that students can no longer exploit viewing the HTML source to get around the school’s policies on ChromeOS and the Chrome browser.

The fix still concerns some privacy, security, and open web activists because they see it as one step away from allowing sites to block users from viewing their HTML source code.

Coywolf Newsletter

If you like web technology and marketing news, along with the occasional random stuff, then this is the newsletter for you. No ads. No sponsors. No spam. Only interesting and timely stories. Unsubscribe anytime.

The Inspect element feature in Google Chrome helps you view the HTML source code of specific elements on a web page. In this tutorial, I will show you how you can extract the whole HTML code of any web page, using this feature.

The HTML source code of a website is what a web browser uses to render the page and display it based on the HTML, CSS and JS code and rules applied on the page. The source code of a website, which is the structure of the site, is publicly available and it is necessarily so, in order the browser to be able to display it correctly.

How to view the html source in google chrome

Modern web browsers allow users to view the HTML source code of the web pages they are viewing. This feature is especially highly useful for web designers and developers in their design and development work. By viewing the HTML source of a website (or web page), you can see how the site is structured, which HTML elements it uses and what kind of CSS styles are applied. This is not only a great way for learning how to design and code with HTML and CSS, but it is also a nice way for testing your own designs and checking if anything is wrongly placed on the resulting page.

The source code of a page in the web browser is displayed via the Ctrl + U keyboard shortcut or by right clicking on the page and selecting the View Page Source option. This displays the full HTML code of the page at the time of its loading, which captures a static state of the page which does not change over time even if the page has dynamic features and its content changes over time server side or the client side.

To view the HTML source code of a dynamically generated page (i.e. a page generated via JS) or a page with dynamically changing content (i.e. a news website with a flow of changing news or a social network with changing interface) we can use the Inspect feature of Google Chrome as I will demonstrate in detail below.

View and Copy Full HTML Code of Web Pages with Chrome Inspect

The beauty of viewing the source code of a web page using the Inspect feature is that you can view and grab the HTML code as it is exactly in effect at a given time, which is highly useful on pages with changing and moving elements that come into display and disappear.

In Inspect mode, you can make edits on the content, attributes and style of any HTML element on the page. Though, those changes will only be visible to you and they won’t make permanent changes on the website you are viewing in any way.

Now, let’s see how this works.

STEP 1: Start Chrome and open a web page of your choice.

STEP 2: Right click on anywhere on the page and select Inspect from the dropdown menu. You can also use the Ctrl + Shift + I keyboard shortcut.

This will open the Developer Tools section on the right side or at the bottom of the browser window depending on your screen size and layout.

The Developer Tools section consists of a top menu and two side by side windows below that. On the left side, you will see the HTML source code of the page that can be collapsed and expanded element by element. On the right side, you will see the styles, event listeners and properties of each element that you select on the left side. Our business is with the left side, where the HTML code is displayed.

You will see all the currently-in-effect HTML code with all the elements such as headings, paragraphs, lists, links, images and even the comments. The amount of code will be minimal and it will have no complexity on basic HTML web pages, hence it will be displayed quicker. However, on high-traffic, dynamic websites with a lot of elements and features, the HTML source code will be rather long and complex, hence it will take longer to fully display.

STEP 3: Go to the top of this section and find the tag, usually located immediately after the doctype (document type) declaration (e.g. ).

STEP 4: Once you find the tag, either press Ctrl + C or right click on it and select Copy > Copy outerHTML to copy the all HTML source code of th page.

You can then paste this code into a text or HTML file as you wish and inspect it further and make edits on it.

In Inspect mode, you will also see the inline styles and references to external style sheets (if any). Furthermore, if you have any custom userstyles applied in Chrome, they will also be attached to the bottom of the HTML code you copied.

DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.

Have you ever wished you could see the HTML source of a web page while on a mobile browser, which generally doesn’t offer that feature? If you have a desktop machine around, there are ways, but what I mean is getting the source without anything but the device itself.

The little View Source tool by Neatnik does the trick.

You enter the URL in the little bar to see the source of that URL. Or add the URL to the the tool’s URL itself to link right to it. Here’s CSS-Tricks (without line wrapping and tidyied up!):

How to view the html source in google chrome How to view the html source in google chrome

Comments

I used to use a similar bookmarklet to do this until I found the iOS app Inspect Browser which essentially gives you a webpage inspection panel that allows you to not just view and modify source but also check network requests and storage usage, etc. It’s a little bit more stripped down compare to its desktop counterparts but it’s still very impressive and in my opinion well worth the $10.

(I have no affiliation with that, I just found it a couple of days ago and want to others know about it)

Woah that’s awesome! Is there an Android equivalent does anyone know?

With PyCharm, you can perform two opposite operations:

Preview the output of your Web application in the browser to check whether the pages are rendered correctly. PyCharm can display a page preview in a browser of your choice or you can switch between several browsers. PyCharm currently supports previews in the following browsers:

View the HTML source code of a Web page in the PyCharm editor.

Previewing pages with web content in a browser

You can preview a file with Web contents in a browser. This can be the PyCharm default browser specified in the Web Browsers and Preview section of the IDE settings or the one of your choice.

Call View | Open in Browser from the main menu. The current file opens in the default browser.

With the editor tab having the focus, choose View | Preview file in from the main menu or press Alt+F2 . Then select the desired browser from the list:

Hover your mouse pointer over the code to show the browser icons bar, and click the icon that indicates the desired browser:

If you don’t want to see the icons toolbar, or would like to see the icons of just those browsers you are interested in, clear the Active checkboxes for the unnecessary browsers in the Web Browsers and Preview section of the IDE settings.

Open the HTML source code of a Web page in the editor

You can open the HTML source code of any Web page in the PyCharm editor.

No matter which programming language was originally used to develop a page (for example, XML or PHP), PyCharm shows the resulting HTML code.

Press Ctrl+Shift+A , type Open Source Code from URL. in the search field, and select the corresponding action from the list.

In the Open URL dialog that opens, specify the URL address of the desired Web page. Type the URL address manually or choose a previously specified one from the list.

A single keystroke reveals a web page’s raw HTML

  • Share
  • Flipboard
  • Email
  • PHP Programming
  • Perl
  • Python
  • Java Programming
  • Javascript Programming
  • Delphi Programming
  • C & C++ Programming
  • Ruby Programming
  • Visual Basic
  • University of California
  • University of Washington

Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML.

What to Know

  • In browsers like Internet Explorer, press Ctrl+U to access the HTML source code of a website.
  • Some browsers may open source code in a new tab, but not all will.

Although the Microsoft Internet Explorer browser has long been superseded by Microsoft Edge, this venerable browser, which is now on version 11, still makes an appearance, usually in corporate environments where legacy web-based software was hard-coded for IE support.

How to Display HTML Code

With Internet Explorer, as with most browsers including Mozilla Firefox and Google Chrome, press the Ctrl+U keyboard shortcut to reveal the source of the web page.

How to view the html source in google chrome

The source is a fancy way of saying that the browser will display the HTML that powers the page rather than rendering the page on your behalf.

Most browsers display the source in a new tab. However, IE 11 renders the source in a menu bar along the bottom of the page. The Developer Tools screen includes a Debugger tool that shows the raw HTML in a panel.

How to view the html source in google chrome

Chrome DevTools is a powerful suite of web development tools built right into the Chrome browser. One of the most useful features of DevTools for web developers is the ability to live edit the HTML and CSS on a page. This functionality allows any developer, even those with weaker HTML and CSS knowledge, to quickly prototype and iterate on potential changes to a web page.

While working on Lucidchart, one of my recent projects was to add some check marks into the inputs where users fill in their billing information in order to convey immediate feedback when the users entered properly formatted and valid information. Even though I am more comfortable working in our backend code than I am with CSS and HTML, I was able to easily implement these check marks with the power of live editing.

Editing HTML using the inspector tool

There are two quick ways to open the inspector. First is to open DevTools with F12, select the “Elements” tab, and click the cursor icon in the top left. The second, faster way is to use the keyboard shortcut Ctrl+Shift+C. If you work regularly in a Linux environment, there’s a good chance you’ve used this shortcut on accident many times when you meant to copy text!

Once the inspector is active, you can locate the HTML of any element on the page by clicking on it. Chrome will also show you positioning and sizing information of elements as you hover over them.

You can locate the HTML of any element on the page by clicking on it.

Once an element is selected, you can interact with it in all kinds of ways. By right-clicking on the HTML in the “Elements” tab and selecting “Edit as HTML,” you can make live edits to the markup of a webpage that Chrome will immediately render once you’re done editing.

Telling DevTools that you are done editing can be tricky. Your first instinct may be to hit the Escape key, but this will back you out of editing while discarding your changes. You can ensure your changes save by hitting Ctrl+Enter or simply clicking outside of the text box you are editing.

HTML edits can be undone or redone using the normal Ctrl+Z and Ctrl+Y hotkeys. They will also be lost upon page refresh unless you enable persistent editing.

To start my checkmark project, I began by creating a prototype element as a place to test the tweaks I wanted to make. Using Chrome DevTools’ live edit functionality, I added a placeholder div containing only the letter “X” as my temporary makeshift checkmark.

Edit as Html lets you make live edits to a webpage in Chrome.

Obviously, this is a very poor excuse for a check mark, but it’s enough to help me quickly identify some issues up front. For one thing, the check mark is in completely the wrong spot. Additionally, it messed up the alignment of the other elements on the page. Both of these issues can be resolved with some CSS. Luckily, Chrome also provides some great tools for quickly prototyping CSS changes using DevTools.

Editing CSS from the “Elements” Tab

To the right of the HTML view in the “Elements” tab, there is a view showing a breakdown of what CSS rules apply to the selected element. This view can be extremely helpful for debugging a plethora of CSS bugs. For example, because you can see what rules apply to the current element, you can identify if an element is getting CSS rules that you didn’t expect or is missing CSS rules you thought applied to it. The CSS view also shows when a style applied by a matching rule is being overridden by a more specific rule.

The CSS view provides some very helpful live editing functionality. Every style has a check box next to it, letting you enable or disable certain styles and see how they affect the elements on the page. You can also apply new styles to a specific element, an existing CSS rule, or a brand new CSS rule. All of these changes are reflected immediately on the page.

Chrome DevTools provide some convenient functionality to make live editing CSS easier to do. The most helpful for those less familiar with CSS is autocomplete. As you type in the name of your style, Chrome will suggest likely matches. Once you enter the name of the style, Chrome will also help you use the correct value for that style. For enumerated styles, like “position” or “display,” Chrome will show the legal values for you to choose from. For numerical inputs, you can use the up and down arrows to increment the value by 1 without having to re-type the units.

As with live editing HTML, you can undo or redo your live CSS changes with Ctrl+Z and Ctrl+Y.

Using DevTools, I was able to very easily figure out a combination of CSS rules that aligned my pseudo-checkbox where I wanted it. The process involved a bit of trial and error, but live edit made the iteration cycle very short, which was particularly helpful for a CSS novice like me.

Live CSS editing is a great way to rapidly iterate on minor CSS changes.

Conclusion

We’ve only scratched the surface of what Chrome DevTools’ live edit functionality is capable of, especially in the CSS domain. These basic tips are always invaluable for me when I go to debug a CSS issue or quickly prototype a new CSS change.

How to view the html source in google chrome

To fix a longstanding bug that could view restricted URLs and sometimes reveal test answers, IT administrators will soon be able to block Google Chrome and Microsoft Edge from viewing the source code of webpages.

Before we dive into what this policy can do and whether or not it’s a good solution, one thing needs to be made clear up front. This article discusses an enterprise policy, which can be thought of as an option available only to administrators of devices/accounts owned by a company or organization. Unless you use a school/company-owned Chromebook or use Chrome Enterprise, this enterprise policy will not directly affect you.

As a quick and simple explanation, when you navigate to a website, your browser receives the page’s HTML, CSS, and JavaScript code from the server. Your browser will then interpret and render that code into a proper webpage.

Even after all of that rendering work, you can still view the raw code of a page by pressing Ctrl-U (or right-clicking somewhere on the page and clicking “View page source”). Or you can even get an interactive view of the page’s code using Chrome’s DevTools by pressing F12 or Ctrl-Shift-I. These tools are especially useful for web developers (from absolute beginners to experts) to debug issues with their own sites or simply learn more about how their favorite sites were made.

In 2018, it was reported to Google via the Chromium Bug Tracker that one of Chrome Enterprise’s existing policies — a URL blocklist — was unable to block requests to “view-source:” addresses. For example, a company could block access to “https://9to5google.com” but not to “view-source:https://9to5google.com.” This would allow a simple bypass of Chrome Enterprise’s address blocking methods, assuming one was willing to read a page’s source code or paste the code into a HTML preview tool.

Moreover, some school IT administrators found that some online test-taking tools — reportedly including Google Forms — would in some cases leak the correct answers to test questions via the page source code. Due to that page-related issue, IT admins wanted to block viewing the source code of those pages or perhaps block viewing source code altogether.

Members of the Chromium team have looked at fixing this issue a few times over the years, but had not yet taken any decisive action. As posted to the Hacker News forum, Microsoft — who now has a vested interest in Chromium, with Microsoft Edge being powered by Chromium — has now stepped in with a solution that correctly blocks the ability to view source code if a particular website is on an organization’s blocklist.

The solution is also capable of blocking all ability to view a page’s source code. This is designed to be paired with another, existing policy that can block use of Chrome’s DevTools altogether.

Unsurprisingly, giving administrators the ability to block viewing the source code of every website has struck a nerve with enthusiasts, especially on Hacker News, where developers are sharing stories of how viewing various pages’ source code was a necessary step in their journey to becoming a developer.

Many of the best people in IT are there today, because they got curious about how stuff worked, experimented with it, broke the rules, and learned from that. This curiosity needs to be encouraged, not stopped.

— kuschku

One could argue that administrators are within their right to disable certain features of the devices they give to students/employees, but for some children, the Chromebook they get from school may be the only computer to which they have access. In that situation, a full block of the ability to view source code could be seen as potentially stifling a child’s curiosity about how the internet works.

Blocking malicious use of viewing source code — circumventing blocklists or cheating on a test — is acceptable, but in this author’s opinion, an administrator allowing the blocking source code altogether is a step too far. That said, it’s up to each school/company’s IT administrator to decide what to block on their computers.

As the relevant code change has only just been added to the Chromium source code in the last few days, this enterprise policy change won’t take effect until Chrome/Edge version 98.

We show you how to download a webpage in Chrome as a HTML file, as well as how to save a link as a desktop shortcut.

If you’re looking to do some offline viewing, you can save a web page in Chrome as a HTML file. When you save from Chrome using this method, you can choose to keep just the basic text to keep the file size low or download additional assets like pictures.

The advantage of this method over saving a webpage as a pdf is the underlying code. When you convert a web page to pdf, it takes an image and places it in a document. This is great for printing but means that the website is no longer interactable. When you save an HTML file you can still copy text, modify the code, click on links, and view animations.

Due to these benefits, today we’ll focus on how to download a webpage as an HTML file. Those who do want to save a webpage as a PDF can check our dedicated tutorial instead. Let’s get started:

How to Download a Webpage in Google Chrome

The process to save a webpage in Chrome is very simple, but it is hidden behind some sub-menus. Once you’ve opened your browser to the website you want to save, follow the steps below:

    Press the ‘Save page as…’ button

With your page open, press the three dots in the upper-right corner of your Chrome window, next to the search bar. Then, hover over “More tools” and click “Save page as…”. Alternatively, press the Chrome ‘Save as’ shortcut, “Ctrl + S”.

A Windows Explorer dialog will surface with the name automatically populated. Pay attention to the “Save as type” dropdown, where you have three options:

Webpage HTML Only: Saves only the HTML code of the website. Images, advanced webpage theming, and animations will not be preserved.
Webpage, Single File: Save a page in Chrome as a single mhtml file rather than a folder. This reduces clutter but may not have quite as good results for some web pages.
Webpage, Complete: Saves a HTML file as well as a separate folder that requires all of the files the website needs to function. Typically has the closest results to the original page.

When you’ve decided which is right for you, click it and then press the “Save” button.

A dialog will appear at the bottom of your screen with the HTML file associated with your webpage. Click it to open it in your browser and check if everything is working correctly.

Now that you know how to save a webpage in Chrome, you can access the downloaded files at any point in your download folder. You’ll see the .HTML file and a separate folder that ends in _files. Inside this folder you’ll find all of the webpage’s images, CSS, and JS files.

How to Create a Shortcut to a Web Page or Website

The above is great if you want to view an article offline, but what if you just want an easy way to access your favorite page or site?

For this, we can save the link as a shortcut. Creating a shortcut for a website won’t save the website for offline viewing, but it will make it much faster to get to from your desktop when you do have a connection.

    Press the ‘Create shortcut…’ button in Chrome

In your Google Chrome window, press the three dots in the top-right corner. Then, hover over “More tools” and click “Create shortcut…”.

In the “Create shortcut?” dialog, type a name for your web page, then click “Create”. if you want a more app-like experience, you can tick “Open as window” to create the shortcut as a Progressive Web App.

That’s all we have for you in this guide. However, while you’re here you may want to brush up on some other Chrome tricks. Did you know you can save all of your open tabs to read later or export your bookmarks locally? Consider giving a try and let us know if you run into any issues.

The Chromium project, which serves as base for both Microsoft Edge and Google Chrome browser, has got a nice addition to its built-in source viewer. Now, when you are viewing the source code (HTML markup) of a web page, you can enable the line wrap option.

The ability to view the source code for a web page exists in all modern browsers. It is an old feature which is available in web browsers for years.

Viewing the page source code can be useful for web developers. It exposes all CSS and HTML tricks used to form the current page appearance, so it is a great source of ideas and methods of building the markup. It is a great learning tool. Also, it is the essential tool when you need to check your own web site for bugs.

In addition to the HTML markup, the page source code exposes CSS (cascading style sheets), both inline and external, and scripts and/or script files.

This post will show you how to enable line wrap for source view in Microsoft Edge and Google Chrome. The steps are similar for both browsers.

To Enable Line Wrap in Source View in Edge and Chrome

  1. Open Microsoft Edge or Google Chrome.
  2. Navigate to the web page you want to view the source. Actually, any page will do.
  3. Press Ctrl + U on the keyboard to open the page source tab. How to view the html source in google chrome
  4. Alternatively, right-click anywhere on the page and select View page source from the menu. How to view the html source in google chrome
  5. On the view-source tab, turn on (check) the Line Wrap option. How to view the html source in google chrome

You are done. The browser will now wrap long lines on the source view tab. The following video shows the change in action.

📺 Tip: Our YouTube channel is HERE.

Note that the Line wrap option is only available in Canary builds of Edge and Chrome (via Geekermag). Also, it is a buggy option. The check box saves its state, however, when you open the page source tab next time, it doesn’t actually wrap lines, so you need to re-enable it every time.

Modern web sites can be very complicated for understanding, especially if you don’t have a lot of experience with the modern web. It can be difficult for understanding how it works, but learning the source code is the small step in this direction. The more you learn about it, the more you will be able to learn from the page source.

Winaero greatly relies on your support. You can help the site keep bringing you interesting and useful content and software by using these options:

If you like this article, please share it using the buttons below. It won’t take a lot from you, but it will help us grow. Thanks for your support!

About Sergey Tkachenko

Sergey Tkachenko is a software developer from Russia who started Winaero back in 2011. On this blog, Sergey is writing about everything connected to Microsoft, Windows and popular software. Follow him on Telegram, Twitter, and YouTube.

3 thoughts on “ Enable Line Wrap in Source View in Edge and Chrome ”

Complete waste of time

  1. Sergey Tkachenko Post author December 10, 2021 at 10:30 am

I can’t be sure what he meant, but maybe he was looking for a word wraping solution for the Sources/Filesystem tab. That’s how I found this page. I’m trying to enable line wrapping in devtools workspaces, but can’t figure out for the life of me.

Sometimes for a developer , it is hard to finding and fixing errors can be difficult. You may be urged to randomly use console.log () in an attempt to make your code work properly.

Earlier we use separate applications for development and browsing but now its almost come to an end. We can edit source files directly in Chrome and it will save the result to a local file. So that Changes can be applied immediately without refreshing the browser .It saves are time a lot.

Following local saving of code technique should work in newer versions of Chrome, but now we can edit and save only JavaScript files. HTML and CSS are almost sure to be supported at last.

Follow the following steps:

1: Launch Developer Tools

Open Chrome, load the page from your local file system/server

Open Google Developer Tools using the Tools menu or press Ctrl + Shift + I / Cmd + Shift + I.

Navigate to the Source tab, and then click the Sources icon or press Ctrl + O to select your JavaScript file.

2: Edit Your Code

Now jump right in your file and edit your code . Google Chrome provides a very useful property list that helps you find the right line – press Ctrl + Shift + O / Cmd + Shift + O:

3: Save the File

Press Ctrl + S / Cmd + S to save your new changes.

This change updates the file in the memory and applies the new changes hand to hand. Note, however, that the code does not restart, so changes in initialization variables are not overridden .

If you want to save the changes to the original code file, right-click the edit and select Save or Save as. When done, you need to refresh the page and the code script restarts.

4: Undo Your Mistakes

Has your update caused some issues? Right-click on the chrome dev tool editor and select Local changes . The bottom pane shows all current changes and using this you can return.

This Chrome’s developer tools can not take the place of the current editor, but these tools are useful if working on different system or want quick and edits. So using this editor and its local save functionality you can save your time and can fix/check your quick bugs.

How to view the html source in google chrome

My life as a web designer was changed once I figured out that I can use the Chrome Developer Tools Inspector to play with the CSS on my websites. There are many uses for these great tools, but here I am focusing on using it for CSS specifically.

I did my first ever screencast to easily show you how I use the inspector every day to try out design tweaks before committing them to my custom themes. Even if you are not using a custom theme, you can follow these steps and paste your edited CSS into the Custom CSS tab in the Theme Customizer (if your theme offers this or you are using Jetpack).

To access the DevTools, open a web page or web app in Google Chrome. Either:

  • Select the Chrome menuat the top-right of your browser window, then select Tools > Developer Tools.
  • Right-click on any page element and select Inspect Element.

You can use the Elements panel for a variety of tasks:

  • Inspect the HTML & CSS of a web page.
  • Test different layouts.
  • Live-edit CSS.

You can view and modify the CSS for any element on the current page. It helps to have an understanding of how CSS (Cascading Style Sheets) work in order to work with the inspector, and understanding the hierarchy of elements will save you a lot of wasted time trying to change a style for an element that is then overwritten farther down the cascade.

Edit and create styles

You can add or edit styles within the Styles pane in the Elements panel. Unless the area containing the styling information is greyed out (as is the case with user agent stylesheets), all styles are editable. Edit styles in the following ways:

  • Edit an existing property name or value.
  • Add a new property declaration.
  • Add a new CSS rule.

To enable or disable a style declaration, check or uncheck the checkbox next to it.

Edit an existing property name or value

Click an element in the page or the html element for the corresponding CSS:

Click on a property value to edit the value. If you’re editing a property name, press Tab or Enter to edit the property value.

By default, your CSS modifications are not permanent, changes are lost when you reload the page. My preferred method is to copy my edited styles into my text editor and then add then selectively to my theme’s style.css file. Chrome also offers Workspaces, which automates some of that process. I haven’t tried it yet, as I am usually making minor and specific changes/tweaks which are easy to copy into my theme.

Add a rule

If you are having trouble identifying the selector for an element, you can try using the New Style Rule (+) button at the top of the Style tab/pane. If you have clicked on the element on the website that you want to edit and then click the “+” button, sometimes it will pull in the nested styles so you don’t have to search for it. I find this does not always work. .

Note: When you create a new rule using New Style Rule, the new rule doesn’t belong to an existing stylesheet. DevTools adds it to a special inspector stylesheet. The inspector stylesheet can be edited in the Sources panel, like other files.

This is a very basic, first step for using the inspector. You don’t have to have your own website to do this! You can play with any website … it’s a great way to expand your knowledge and familiarity with CSS. Here’s an example changing the color of the button on the Google search page.

Staring at your website and just obsessing over a few little things that just don’t seem “right”.

Maybe it’s the text, the font, the spacing, the colors, or something else.

Either way, you wish you could simply make a quick edit and hit save when everything looks perfect.

The good news is that modern browsers, (like Chrome, Firefox and Safari) offer a couple ways to preview simple changes to any webpage. Yes, any web page. Even ones that aren’t yours!

This means you can modify the HTML and CSS (also known as source code) right in your browser.

Keep in mind, this only modifies the local version on your computer and doesn’t actually rewrite anything on the server. It’s just a preview.

But wait, there’s more!

There is now a way to make edits to your website using your browser’s developer tools that can be permanently saved on the server, so keep reading!

Here is the step-by-step process for editing a web page using Google Chrome.

How to edit a website using developer tools

  • Open any web page with Chrome and hover your mouse over the object you want to edit (ie: text, buttons, or images).
  • Right-click the object and choose “Inspect” from the context menu.The developer tools will open in the lower half of your screen and the selected element will be highlighted within the interface, also known as the DOM.
  • Double-click the selected object and it will switch to edit mode. You can replace the text or style attributes (ie: colors, fonts, spacing) and then click outside the DOM to apply the changes.
  • Use the “find” shortcut to help you look for specific text or style attributes. (“CMD + F” on Mac or “CTRL + F” on PC)

Edit any website’s text using our handy bookmarklet

  • Highlight the bolded below:

javascript:document.body.contentEditable = ‘true’; document.designMode=’on’; void 0

Now that you know how to modify any website, let’s get back to what’s most important.

How to edit your website and save the changes

This could not be any simpler. If your website is built and hosted with Pagecloud, you can use your browser’s developer tools to make permanent edits to any of your web pages.

Using the developer tools with Pagecloud:

  • Log in to Pagecloud.
  • Go to the page on your website you want to modify.
  • Click on the ‘edit page’ symbol in the bottom right hand corner. If you can’t see it, refresh the page. (“CMD + R” on Mac or “CTRL + R” on PC).
  • Once the editor is loaded, follow these steps.
  • Hit save in the editor or use the shortcut: (“CMD + S” on Mac or “CTRL + S” on PC).

Easy right?

How about some even better news? You can bypass the developer tools and simply make changes right in the editor.

PageCloud lets you completely customize your pages without ever having to go into the source code. Just click, and edit using the palette. If you’ve never written code, this will be a much more user-friendly interface!

Check out How to build a professional website for more tips on creating a website with PageCloud

If you’re a developer and want to take your site to the next level, you can access the JavaScript editor by using the “J + S” shortcut while logged into the PageCloud website editor.

Never heard of Pagecloud?

Try it for free today and build a custom website that offers you complete freedom to make all the changes you want! Pagecloud also offers e-commerce, which allows you to build and design an online store to sell products, services, and more! Sign up for a free trial and get started with Pagecloud!

All HTML elements are boxes made up of four components: a content container, padding, border, and margin. In our Box Model lesson we introduce these four properties and use them to position elements on a website. If you have not taken this lesson, we recommend you do so now, before continuing.

In this article, we will introduce how Google Chrome’s DevTools can be used to view the box around each element on a web page.

1. View Box Model Dimensions with DevTools

You can use Google Chrome’s DevTools to view the box around every element on a web page. There are a few different ways to open DevTools, depending on your platform:

Mac

  • command + option + i
  • View > Developer > Developer Tools
  • Chrome 3 dot menu ⋮ > More Tools > Developer Tools

Windows

  • control + shift + i
  • F12
  • Chrome 3 dot menu ⋮ > More Tools > Developer Tools

Use whichever method works best for you. When you have the DevTools open, navigate to the Elements tab.

In this tab you can view all of the elements on the current page. From this view, you can select the element of interest, which will open a new column on the right side of DevTools. Select the tab labeled Computed on the top of the rightmost column.

How to view the html source in google chrome

The selected element’s box should appear at the top of the pane. Hovering over each property of the box will cause the property to be highlighted in the web page.

If you know the element you want to inspect, going through all of the steps listed above is unnecessary. Instead, you can right click the element you want to observe and select the Inspect button. This will display DevTools on the right side of the browser with the element selected in the Elements tab. To view the element’s box, you can select the Computed tab.

If you’d like some more info or a refresher on how to use Google Dev Tools, take a look at this video.

Exercise I: View a Website’s Box Model Dimensions

Complete the following steps within the current web browser view.

  1. In a new tab navigate to the Codecademy Wikipedia page.
  2. Right click (or Ctrl and click simultaneously) the Contents navigation box displayed in the image below:

How to view the html source in google chrome

  1. Select Inspect.
  2. Select the Computed tab at the top of the rightmost column.
  3. Hover over the different properties of the logo’s box. The corresponding space on the web page should be highlighted when you do this.

2. Modify Box Dimensions

Now that you know how to view the box of an element we’ll modify the box’s values with DevTools.

To modify the values of the box double click the property value, assign it a new number, and press enter. You can also adjust the value incrementally by double clicking the value and using the up or down arrow keys.

How to view the html source in google chrome

In the image above, the border on each side is set to 1 and the padding is set to 7 . These values can be changed by double clicking the values in the box and assigning them new numbers, or using the up or down arrow keys on your keyboard.

Note: If you inspect an element and find that the border is set to – , adding a numerical value will not make a border appear. The border color, style, and width must be set in the CSS document in order to see the border.

Exercise II: Modify a Website’s Box Model Dimensions

Pick up where you left off in Exercise 1.

  1. Double click the top padding of the element.
  2. Use the up and down arrows to adjust the element’s padding. Observe how the appearance changes on the web page.
  3. Change the left margin to 200. Observe how the element’s appearance changes.

Remember the changes you make in DevTools are not saved. If you are using DevTools to make adjustments to a personal project, make sure to adjust values in the HTML and CSS documents.

The Line Wrap feature is now available in the desktop version of Google Chrome and Microsoft Edge browser. It provides you the ability to see the source code for any web page you want. In other words, you can say this feature allows to use of the line wrap option while inspecting the source code of a web page.

A common problem faced by users in the web page view is that it does not fit in the window. This is not a bug, just the right features have to be used, such visual issues can be resolved by using line wrap. It is HTML based feature that serves in providing a better visual experience.

How to view the html source in google chrome

Enable & Disable Line Wrap in Source View in Chrome or Edge

To enable the line wrap feature in Google Chrome and Microsoft Edge, follow the below suggestions:

  1. Open Google Chrome or Microsoft Edge.
  2. Go to the webpage you want to enable the feature.
  3. Right-click on the webpage and select the View page source option.
  4. Inside the View page source window, mark the Line wrap checkbox.

Let’s now see them in detail:

To get it started, open the browser in which you want to enable the line wrap feature. Open Microsoft Edge or Google Chrome and search for any webpage or the window you want to make changes.

Next, press the Ctrl+U keyboard shortcut to open the source tab directly. Alternatively, do a right-click on the webpage and select the View page source option.

Inside the View page source window mark on Line wrap. Now your web page will not overflow the text lines. Relaunch the browser.

The overflow lines issues are resolved through the above method but it is not a permanent change to the browser. This quick process has to be carried out again while browsing.

Disable Line Wrap in Source View in Edge and Chrome

  1. Open Google Chrome or Microsoft Edge.
  2. Go to the webpage you want to disable the feature.
  3. Press the Ctrl+U keyboard shortcut to view the actual code.
  4. Uncheck the Line wrap checkbox.

Launch the Microsoft Edge browser or Google Chrome. Then open the webpage where you want to disable the Line wrap feature. On the webpage, do a right-click and select the View page source option. Then simply uncheck the Line wrap option and it’s done.

How to view the html source in google chrome

Date: March 10, 2021 Tags: Chrome, Edge

Related Posts

How to view the html source in google chrome

How to automatically switch Profiles for specific sites in Edge

How to view the html source in google chrome

How to allow or block pop-up windows on specific sites in Edge

How to view the html source in google chrome

Can’t download or save images from Google Chrome on Windows PC

report this ad

[email protected]

Digvijay is a Windows enthusiast who likes to write about the Windows OS and software in specific, and technology in general. When he is not working, he would either surf the web or dives into learning tech skills.

This post includes a complete guide to copy HTML code of any website page from Chrome browser console. Complete process explained with example and steps images. So, you can understand the use of the browser “Inspect Element” feature to copy page HTML.

What do we learn from copy HTML code from a browser console example?

In this copy HTML code from the console example, we learn that, how we copy HTML code of any website page.

Here we open the page in the browser, use the browser’s inspect element feature and copy the particular section HTML code of the page from the browser console.

For the learning purpose, we copy the search button section HTML code from Google search page.

Steps to copy HTML code from Chrome browser console

Following are steps to copy HTML code from Chrome browser console.

1. Open website page in Chrome browser

In the first step, open Chrome browser and open that webpage from where you want to copy HTML code.

Here, for the learning process, we open Google home page in the browser.

2. Open Chrome developer tools

Next, open the developer tools bar in the browser. You can open developer tools from “Browser three dot menu > More tools > Developer tools”. For a quick process, you can use the “Ctrl + Shift + I” shortcut.

How to view the html source in google chrome

Open Chrome Developer tools

3. Click inspect element arrow option

Now, you will find the Developer tools bar in the bottom of the browser. From this tool’s bar top left corner click the arrow icon. This arrow icon opens inspect element option for browser.

Developer tools inspect element option

4. Move cursor on page and click on element

Once you enable the inspect element option in the browser, you need to move the cursor in the webpage.

How to view the html source in google chrome

Select page element using inspect element

Here, when you move the cursor on page different elements, inspect element tool shows light blue area on page elements.

Now, move the cursor on the element, whose HTML code you want to copy. So, move the cursor on the page and when the light blue area properly displays on the full element section, just click at the current cursor position.

5. Right click in console and choose “Edit as HTML” option

In this step, you need to come back to the Developer tools area. When you click inspect element option on page, you will seen that element HTML code line highlighted in developer toolbar.

How to view the html source in google chrome

Copy HTML code from browser console

This highlight HTML code is read only mode. To make editable, make right mouse click on the highlight line and select “Edit as HTML” option from result popup.

Once you do this, then HTML code turns in readable mode and shows in the editing box.

6. Select and Copy HTML code from console

This is the last step. In this step, you need to select all HTML code from the browser console, which shows in editable mode. Next, you can copy this HTML code and use where you want.

Can I apply copy HTML code from Chrome browser console steps on any browsers?

Yes, you can apply this copy HTML code from console steps on any browser. There are minor differences possible in the process for open Developer tools bar and in enable inspect element mode.

Web developers have to test websites on specific browsers to ensure the site’s compatibility with said browser’s specifications. Tests are run repeatedly during development to help them verify how every change to the codebase reflects in the browser. This process ensures that web developers are optimizing their sites for the real world.

However, developers must bear in mind that in 2021’s first quarter, 54.8% of global website traffic came from mobile devices. As a result, they need to ensure that websites are well-optimized to run on mobile browsers. Chrome is indisputably the leading mobile browser with a current market share of 64.06% worldwide. Hence testing mobile versions of websites on Chrome is crucial.

Source

This article aims to explain how developers can open a website’s mobile view in Chrome browser via desktop. It also explains how one can test websites on real mobile devices online.

Why test mobile version of a website on real Chrome browsers?

As mentioned above, Chrome is the most popular browser in the market. Given that a significant number of users access the internet via Chrome, any website or web app must be compatible with it to adequately serve those users. Additionally, there are multiple versions of Chrome, and a website must be able to render and operate flawlessly on each. There is also the question of how a specific Chrome version may interact with the hardware specifications of a particular device, adding another layer of verification required in the website development pipeline.

Needless to say, emulators and simulators are unable to replicate all the specifications required for accurate testing. They may not contain and utilize all the features of every Chrome version, which means that any test run on emulators and simulators will be able to provide only inconclusive results.

It is much easier and far more effective to view and test websites on real Chrome browsers. Not only does it guarantee 100% accurate results, but it also reduces a step in the testing process. No website can be released without being tested on real browsers and devices. Therefore, it is best to do away with emulators and simulators completely, and just test on a real device cloud.

Now, let’s explore 2 methods on how to view mobile versions of websites on Chrome.

Using Device Simulation in Chrome DevTools for Mobile View

Users can view the mobile version of a website by using Chrome Devtools.

Note that this is not a fully reliable method as it uses a simulator rather than a real device and browsers to get the job done. Therefore, it cannot replicate all real user conditions, which means that any tests executing by this method will be inconclusive. For 100% accurate results, use the second method – using real browsers.

Listed below are the steps to view the mobile version of a website on Chrome:

  1. Open DevTools by pressing F12.
  2. Click on the “Device Toggle Toolbar” available. (Icon turns blue when the device mode is turned on)
  3. Choose a device you want to simulate from the list of iOS and Android devices.
  4. Once the desired device is chosen, it displays the mobile view of the website.

For web developers to gain accurate test insights, extensive testing on real devices is non-negotiable. It enables them to verify websites in real user conditions.

BrowserStack’s Real Device Cloud for Live Testing

The ideal way to test a website is to test it on a real device. This helps developers monitor websites on mobile browsers that are installed on real Android and iOS devices. By doing so, QAs can evaluate how a website performs across multiple mobile devices and browsers in the real world.

BrowserStack’s real device cloud provides 3000+ real devices and browsers to test on.

Here’s a quick tutorial on how to get started with viewing the mobile version of a website on Chrome:

    for a free BrowserStack account.
  1. Navigate to BrowserStack Live.
  2. Once the dashboard opens, you’ll be able to choose from thousands of browser-device combinations.How to view the html source in google chrome
  3. Choose the device-browser combination you want to test on. In this example, it will be a Chrome browser running on Samsung Galaxy S10.How to view the html source in google chrome
  4. After selecting the device and browser, a new test session will initiate on the chosen hardware-software.How to view the html source in google chrome
  5. Navigate to the website you want to view on mobile and check how it renders.

Additionally, a few highlights of BrowserStack’s real device cloud:

  1. No setup nor download needed
  2. Latest Android devices from Samsung, Oneplus, Google, and Motorola
  3. Latest Apple devices like iPhone X, iPhone 11 Pro
  4. Multiple versions of leading browsers like Chrome, Firefox, Safari, Opera installed on real devices

QAs can test on any real Android or iOS mobile device directly from their browser. They do not have to download any browsers or emulators. To open a mobile version of a website on Chrome, QAs can simply log in, select the device-browser-OS combination and start testing. The image below is an exact representation of a live testing session (Chrome Browser Testing on Samsung S10+) on BrowserStack.

BrowserStack also provides the following features :

  1. Upfront access to DevTools that enables inspection of web elements on the page with popular bug reporting tools like Jira, Trello, and Slack
  2. Testing of features like pinch to zoom and device rotation

The methods explained above can help developers eliminate their pain points while debugging any issue. These methods also help optimize a website’s performance across multiple devices. Knowing how to open a website’s mobile view in Chrome is an essential part of a QA engineer’s skillset, and this article will help them with mastering this skill.

The Google Chrome browser is packed with tons of great tools to help you move around and perform functions on the web. One of the more useful functions that Chrome offers is the Inspect Element tool.

You can use the Inspect Element tool in Chrome to inspect the HTML source code of a visual element on any web page when you are on a computer.

Here is how to use the Inspect Element tool in Chrome.

Use the Inspect Element Tool in Chrome

There are two ways you can use the Inspect Element tool in Google Chrome.

How to Use the Inspect Element in Chrome

The easiest way to launch the Inspect Element tool is to right-click anything on a webpage. Then, just click the “Inspect” option on the bottom of the list. Usually, Element is launched by default.

How to view the html source in google chrome

If not, then you can click the “Element” tab from the top of Chrome.

How to view the html source in google chrome

If you’re using a Mac, you should be able to access this menu with CMD+click and selecting “Inspect.”

How to Inspect Elements with Developer Tools

To launch Inspect Elements is to launch the “Developer Tools” from Google Chrome. Open the “More” settings in Chrome, click More Tools, and then click Developer Tools.

Click the three-dot icon. This icon is located next to the address bar in the upper-right corner of your browser window. It will open a drop-down menu.

How to view the html source in google chrome

When you click on the three-dot menu a popup window will appear. Hover over the “More Tools” option and another sub-menu will pop out.

Click “Developer Tools” on the More Tools sub-menu. This will open the Inspector column on the right-hand side of your browser window, or below your browser window, depending on your setup.

How to view the html source in google chrome

Note: You can open the Inspector Tool with a keyboard shortcut as well. This shortcut is Option+⌘ Cmd+I on Mac, and Ctrl+Alt+I on Windows.

How to view the html source in google chrome

Now you can hover over an element on the Inspector column box. Moving your mouse to an element or a line in Inspector will highlight the selected corresponding element on the web page.

How to view the html source in google chrome

When you highlight the element you want to inspect simply click on it and the correct inspector column will automatically pop up on the right and you can look at all the source code.

How to view the html source in google chrome

That’s it. Now you know how to use the Inspect Element tool in Chrome to inspect the HTML source code of a visual element on any web page when you are on a computer.

Do you want to get the HTML source code of a webpage with Python selenium? In this article you will learn how to do that.
Selenium is a Python module for browser automation. You can use it to grab HTML code, what webpages are made of: HyperText Markup Language (HTML).

What is HTML source? This is the code that is used to construct a web page. It is a markup language.

To get it, first you need to have selenium and the web driver install. You can let Python fire the web browser, open the web page URL and grab the HTML source.

Related course:

Install Selenium

To start, install the selenium module for Python.

For windows users, do this instead:

It’s recommended that you do that in a virtual environment using virtualenv.
If you use the PyCharm IDE, you can install the module from inside the IDE.

Make sure you have the web driver installed, or it will not work.

Selenium get HTML

You can retrieve the HTML source of an URL with the code shown below.
It first starts the web browser (Firefox), loads the page and then outputs the HTML code.

The code below starts the Firefox web rbowser, opens a webpage with the get() method and finally stores the webpage html with browser.page_source.

How to view the html source in google chrome

This is done in a few steps first importing selenium and the time module.

It starts the web browser with a single line of code. In this example we use Firefox, but any of the supported browsers. will do (Chrome, Edge, PhantomJS).

The URL you want to get is opened, this just opens the link in the browser.

Then you can use the attribute .page_source to get the HTML code.

You can then optionally output the HTML source (or do something else with it).

Do you like to dive into the code of a webpage just to see how it has been put together? As an aspiring web designer once, it used to be a habit for me. I believe lots of people still go into the source code of a webpage. It is a great learning tool. I still do it sometimes just to see how a media file has been embedded; or for some interesting comment information or just to see interesting meta-tag data.

But for the serious guys, the source code is often a mine of info. It’s the backdoor into a competitor’s SEO strategies – keyword use, design optimization etc. In brief, what’s the guy doing right and what is he doing wrong.

Every browser has an inbuilt viewer, much like a notepad. Commonly found under the View menu, it displays the client side source code at the touch of a mouse. Commonly though, it is not feature rich. For instance, a feature to change the font face would have been nice. Also, a simple addition of a comment before saving the file is not possible as it is usually read only. It is merely meant to be a viewer”¦ the word “˜editor’ a bit ill-chosen.

So can we get the browser to use the editor of our choice? Thankfully, most of the browsers themselves are open to the idea. Here’s how we can foist our own choice on Firefox, Internet Explorer and Opera.

Mozilla Firefox

Firefox 3’s default viewer is accessed from View – Page Source. It has basic options to change the text size, syntax highlighting and a feature to wrap long lines. One feature I like is that Firefox lets me see the source for a selected area of the webpage (Right click – View selection source).

But to choose another editor, let’s do this:

  1. Type about:config in the address bar. Ignore the alert which comes up and go ahead.
  2. In the application preferences page, scroll to the bottom half of the page or use browser’s Find (CTRL+F) to search for two values.
  3. Find and highlight view_source.editor.external. Double click and toggle it to “true”.
  4. Next, just below it find and highlight view_source.editor.path. Double click on it and enter the new path of your preferred editor in the Enter string value box. If the path doesn’t exist or is not executable, the inbuilt viewer will be used.

Firefox has a host of add-ons which help to get under the hood of a webpage. Ann Smarty, a colleague here at MakeUseOf has covered seven of them quite comprehensively in an outside post at SearchEngineJournal.com. Of the 7 add-ons mentioned, only View Formatted Source is not updated for the latest version of the browser.

Internet Explorer

IE8’s source viewer, accessed from View – Source doesn’t add anything more than the standard options. But the inbuilt Developer Tools feature gives IE8 some extra teeth and us, an option to have an editor of our choice.

Developer Tools is a debugger which makes dissecting a webpage and its included elements like CSS, Javascript and HTML much easier. The developer tools can be opened by ““

  • Open IE8. Press F12
  • Or on the Menu click Tools – Developer Tool.

It is a powerful tool and to explain it would require a few tutorials of its own. Here, we just want to change the source code editor.

  1. Open Internet Explorer.
  2. Press the F12 button to start the Developer Tools.
  3. Click on File; Choose Customize Internet Explorer View Source.

Opera

Opera v9.64 does allow you to make changes and apply them on the fly in its source editor. The source editor is available from View – Source. Opera also gives you the option to change the default and it is easy.

    On the Menu, click on Tools – Preferences.

  • The Opera source viewer – use the inbuilt one.
  • Open with default application – specify the path of your preferred application.
  • Open with other application – here you can browse to the program of your choice, select its executable and set it as the editor. You can also fix launch parameters for the program in the Parameter field.

A short note on Google Chrome.

Google Chrome does not allow us to change the default source viewer (yet!). Chrome has a Developer‘s section under the page icon, from where you can view the source of the current page, use Debug JavaScript function and open a JavaScript console. The source viewer itself is minimalistic with syntax highlighting, line numbers and active links.

The view source option is akin to a diagnostic kit, especially for a web developer. Therefore, it makes sense to use the better ones on the table like for instance Notepad++, SourceEdit, or even dedicated but lean HTML editors like Homesite (good but not free). For more free options look at 3 Windows Text Editors For Programmers.

As we are talking about the “˜language of code’ why not also look at Damien’s post on tools to clean up CSS files.

Have you changed your source viewer/editor? Or are you sticking to the default? Also let us know your own editor of choice.

Visual Studio Code includes a built-in debugger for Edge and Chrome. There are a couple ways to get started with it.

  • Use the Open Link command to debug a URL.
  • Clicking a link in the JavaScript debug terminal.
  • Use a launch config to launch a browser with your app.

We also have more detailed walkthroughs to get started with React, Angular, Vue, and Ember, as well as other debugging recipes.

Open Link command

The simplest way to debug a webpage is through the Debug: Open Link command found in the Command Palette ( ⇧⌘P (Windows, Linux Ctrl+Shift+P ) ). When you run this command, you’ll be prompted for a URL to open, and the debugger will be attached.

If your default browser is Edge, VS Code will use it to open the page. Otherwise, it will try to find an installation of Chrome on your system instead.

Launch configuration

Launch configs are the traditional way to set up debugging in VS Code, and provide you the most flexibility for running complex applications.

In this section, we’ll go into more detail about configurations and features for more advanced debugging scenarios. Instructions for Node.js debugging with source maps and stepping over external code also apply to browser-based debugging.

Note: If you are just getting started with VS Code, you can learn about general debugging features and creating launch.json configuration files in the Debugging topic.

Launching browsers

In most cases, you’ll want to start a new instance of the browser to debug your webpage or file. To do this, you can create a file named .vscode/launch.json that looks like this:

When you hit F5 or the Start button in the Debug view, http://localhost:8000 will be opened in debug mode. If you’d like to use Chrome instead of Edge, replace pwa-msedge with pwa-chrome .

You can also debug a single file without running a server, for example:

Attaching to browsers

To attach to a running browser, it needs to be launched in a special debug mode. You can do this using the following command, replacing edge.exe with the path to your Edge or Chrome binary:

Setting the –remote-debugging-port tells the browser to listen on that port for a debug connection. Setting a separate –user-data-dir forces a new instance of the browser to be opened; if this flag isn’t given, then the command will open a new window of any running browser and not enter debug mode.

Next, add a new section to the vscode/launch.json file as below:

Now, you can press F5 or the Start button in the Debug view to attach to the running browser. You can even add a host property to debug a browser running on a different machine.

Launch configuration attributes

Debugging configurations are stored in a launch.json file located in your workspace’s .vscode folder. An introduction into the creation and use of debugging configuration files is in the general Debugging article. You can either “launch” a browser with your application, or “attach” to an existing browser that you started in debug mode.

Below is a reference of common launch.json attributes specific to browser debugging. You can view the complete set of options in the vscode-js-debug options documentation.

  • webRoot – The root directory for your source code. Most often, and by default, the webRoot is your workspace folder. This option is used for sourcemap resolution.
  • outFiles – An array of glob patterns for locating generated JavaScript files. See the section on Source maps.
  • smartStep – Try to automatically step over source code that doesn’t map to source files. See the section on Smart stepping.
  • skipFiles – Automatically skip files covered by these glob patterns. See the section on Skipping uninteresting code.
  • trace – Enable diagnostic output.

These attributes are only available for launch configurations of request type launch :

  • url – The URL to automatically open when the browser is launched.
  • runtimeExecutable – Either an absolute path to the browser executable to use, or the version of the browser to use. Valid versions include stable (default), canary , beta , and dev .
  • runtimeArgs – Optional arguments passed when launching the browser.

These attributes are only available for launch configurations of request type attach :