Browser developers have taken care of the convenience of those who create sites that open in these same browsers, namely, webmasters. They added to standard features developer tools with which you can easily open and look source website pages in browser: HTML, CSS, JavaScript (JS), get various useful data about the site structure, host it technical analysis. In general, to see a lot of useful things.
Of course, these tools are used not only by the creators of sites for work, but also ordinary users, which the source code allows you to see various payloads.
In this article, you will learn how to view the source code of a website page in a browser (how to open HTML, CSS, JavaScript code site).
How to open page source code in browser
There are two ways to open the source code of a web page in a browser:
- Using hot keys;
- Open from context menu.
Ctrl+U- a combination of hot keys to view the source code of the entire page of the site in a separate new window. Standard for all browsers: Google Chrome Opera, Mozilla Firefox, Yandex browser, IE.
You can also enter the developer tools as follows:
To quickly find desired code, word or text on the page, you can use the standard search hotkey combination for all browsers: Ctrl + G.
Video instruction:
View element code | explore element | inspect element
If you suddenly need to view not the entire source code, but display only a separate part of it, some section on the page, then the previous tool will not work. To do this, there is another function in the developer tools, about which will be discussed below.
How to view the code of an element on a page:
You can also use keyboard shortcuts to quick access to element inspection.
Hot keys (buttons):
Google Chrome: Ctrl+Shift+I and Ctrl+Shift+C
Opera: Ctrl+Shift+I and Ctrl+Shift+C
Mozilla Firefox: Ctrl+Shift+I and Ctrl+Shift+C
Yandex browser: Ctrl+Shift+I and Ctrl+Shift+C
After the done actions, the original window will open in the same browser window. web code pages:
All HTML the code will be in the big left column. And CSS styles are on the right.
advantage this method, of course, is that the user has the opportunity to change the source code, edit styles. That is, you can edit the styles on the site and see how it will look with certain styles, without having to immediately make changes to the files that are on the hosting servers. To change or add programming code, you need to double-click on the desired fragment or section. Of course, the correction of the code in the browser will not be made on the hosting servers. Therefore, in the future, in any case, you will have to copy this code and write it to files.
This video tutorial details and shows how to work with developer tools:
So just online, right in the browser, you can view the source code of the site page, get basic information about the HTML and CSS code, change and copy them, without having to download the files of this site to your computer.
By the way, inexperienced Internet users who have changed the page code and expect it to be saved will be disappointed. After all, after refreshing the page, all changes on it will be lost. This is not enough to hack the site 🙂
How to View Source Code on an Android Phone
I would also like to note that developer tools are available not only in the desktop version of browsers, that is, on computers and laptops. On phones and tablets (Android, IOS) you can also view the source code.
To do this, add the view-source prefix to the URL of the inspected page:
For example:
view-source:https://website/turbo-mode-opera/
1 vote
Good day, dear readers of my blog. Sometimes you find some beautiful feature on the site and the question begins to torment how the creator achieved such an interesting effect.
It turns out the answer is pretty easy. And if you have some skills, you can collect a lot of such chips and create your own unique website in a short time.
Today we will talk about how to open the code of a page, a certain element and learn how to use this skill to your advantage.
Basic knowledge about code
My site is for beginners and first I would like to briefly talk about sites and code in general.
To draw a picture, then cut it into small pieces, write code, thanks to which the browser will again collect all the elements into a single whole. Everything seems to be very complicated, doesn't it? Not at all, and it's not worth worrying about it.
That's how quality websites are built. If you want - get into this business and study, there is no desire - no one can force you.
I will only say one thing... there is nothing more pleasant than to see how incomprehensible words written by you are transformed into a single whole and come to life: links work, buttons move, pictures move, text crawls. I think I know how Victor Frankenstein felt.
When you begin to comprehend the secret language and see that everything is actually much simpler than it seemed initially, you cannot help but believe in own forces and capabilities of the brain. It is very cool.
How are websites made? Ideally, first. He's just painting a picture. For example, as shown in the figure below. So far, this is just an image, a photograph. No links work, when you click you do not go anywhere, the search is not carried out.
According to this drawing. Look at the screenshot below. You may think that this is a ridiculous and very complex set of characters. In fact, everything is not so difficult, there is a certain algorithm.
There are only about 150 tags and each of them is responsible for a specific action: link, transfer, bold, color, title, and so on. Understanding them is not so difficult if you have the desire and do not mind the time.
Thanks to the knowledge of these attributes, almost any problem can be solved. Here are just ways to achieve the goal, each developer finds his own.
Experienced creators immediately see how to achieve results, while others have to think, look for an answer in articles or in the source code of competitors. They simply take the necessary part on a third-party site and edit it for themselves. This significantly shortens the work process.
A little later, I will show you a specific example.
View code
So, let me first show you how to proceed if you need to learn someone else's html. Then we will take a closer look at all the other issues.
The best way
The method that I will describe first is a little complicated for beginners, but as an introduction, read on. Open the page and click on the right mouse button. Select "Save As..."
Save the entire web page. As you can see in the screenshot, I have already downloaded everything in advance. Here we have two folders.
Everything you need is here. Every element. If you understand this, you can quickly get everything you need. But, such a task is increasingly becoming impossible. Download is not carried out. What to do if it is forbidden to copy the page?
It's google chrome
As you may have noticed, I most often use Google Chrome and it's easy to recognize someone else's code in this browser. As in principle and in any other. The scheme will not be similar, but identical. We open the page whose code we want to know, and click anywhere with the right mouse button. In the window that appears, click "View page code".
A sheet of code will open in a new window, which is quite difficult for a beginner to understand. But, do not be afraid ahead of time.
If you need to know the code of only one element, just hover over it with the mouse and right-click. We select another chrome function: "View element code".
For example, I might be interested in how the logo was made, using a picture or a programming language? After all, you can draw a square with css help. Many experts advise more information write in code. And how do popular sites work?
Here it appeared necessary information. Top html, bottom css. These are two languages. The first is responsible for the text component, and the second for the design. If there was no css, then you would have to prescribe the color, font size each time. For each page, it is very long. But if there was no html, then we would not have texts. Roughly explained, but in general, everything is so.
By the way, if you are interested in how it works here, you can see the link to the picture below. Here is your answer.
Mozilla Firefox
If you like to work in a muzzle, then everything will be exactly the same. Open the page and click on the right mouse button. "Page source code" if you want to see the entire code.
When you hover over an element, you can open its code.
Here the data is displayed at the bottom of the screen, but everything else is exactly the same.
Yandex browser
In the Yandex browser, everything is exactly the same as in the previous two options, we open the page, right key mouse, view the page code.
We hover over the element if we want to find out exactly its code.
Everything is displayed here in the same way as in chrome.
Opera
And finally, Opera.
By the way, you may have noticed that it is not necessary to use the mouse. To open the code is quick combination keys and for all browsers it is the same: CTRL+U.
For elements: Ctrl+Shift+C.
This is what the result looks like.
It will be interesting for beginners
Now see how it all works. You find a site and you really like some element. For example, this one. You already know how to open the element code.
Now copy it.
I use , paste this code into a new one html file, in body tag(body in English).
Now let's see how it all looks in the browser.
Ready. In order for the text to be aligned along the edges and acquire a greenish color, you need to connect to this css document and copy another code from the site from which we stole this one.
Now I won't do it. It takes more time: both mine and yours. I think that I will describe all the details in my future publications. Subscribe to the newsletter and be the first to know when an article appears.
If you can’t stand it, but you want to learn more about html and css right now, then I can traditionally recommend you free training courses.
Here are 33 lessons that will allow you to master html - « Free course by HTML" .
And here full information about css - "Free CSS Course (45 Video Lessons!)" .
Now you know a little more. I wish you success in your endeavors. See you soon!
Skill change page source code – useful skill for the advanced Internet user. With the help of HTML code substitution, you can change open web page as you please. In this article, we will tell how to change page code in Google Chrome. However, in other browsers everything is done in the same way, so there should be no difficulties.
What is the HTML code of a page?
Each page that you open in the browser has its own code in the language HTML markup. This code is tags and text. Tags are a kind of labels that tell the browser how to display a particular part of the site. Text is the content of the page, what the user sees. Also, CSS styles can be connected to the page, which set appearance page elements. To change site source code you do not need to know HTML and CSS thoroughly and you will soon see it for yourself.
Why change a web page?
You can change the data on the site, change the text of the message, take a fake screenshot. Please note that all changes are visible only to you and will disappear when you reload the page. Also the changed data will not be real. For example, if I don't have $10, and I change it to $100, then I won't have any more money. It's just the rendering of the page by the browser. Example:
After:
For example, I will take the same site and change the previous announcement of the article “” I open home page in Google Chrome. I right-click on the element that I want to change, for example, the title of the announcement and select “View Code”.
In the window that opens, go to the Elements tab and see the HTML code of the page. We need to find the text we are interested in. (highlighted in red)
Now I will delete the old text and enter the new one.
That's it, the name of the announcement has been changed. Now I will change the announcement itself, tags and category.
You can insert another image by changing the src attribute in the img tag.
So, today we will look at a few useful tools for Web wizards that make life easier when building a site. Let's start with the console for web masters in Google Chrome. And let's go over the questions that most often arise from the webmaster during the layout of the site.
To get to the console, open your site in Google Chrome, click right click mouse anywhere on the web page, and select "View Page Source" from the context drop-down menu, or on a specific element to explore by selecting "View Element Source".
At the top you will have several tabs listed. Today we will talk about the "Elements" tab , which presents the elements of a web page with highlighting of tags, properties, highlighting the nesting of elements, representing the element hierarchy in DOM tree(hint at the bottom, from the root parent to the current explored), the ability to edit elements, a list of their properties, consider searching by elements, and also get acquainted with viewing css styles associated with elements, etc..
How to view all styles that are associated with a particular element? Which one is in use now? What files are they in?
So, there is nothing easier! We open Google browser Chrome, open our site - the source of questions, right-click on the desired element if it is visible in the context of the page, and select in context menu"View element code" item.
At the bottom, we have a console with a highlighted tab on the left " Elements"And all the styles associated with the element on the right, where: Computed Styles are the general "summary" styles that have been assigned to the element from css rules and the user's browser settings (his environment), while the tab is collapsed.
But we are interested in the “Styles” tab deployed below it, which lists in turn all the styles assigned to the element, as well as files where these rules are specified for this element by its type, id, class, name, property, attribute, etc. . At the same time, if the css rule is crossed out, it means that it was redefined earlier / next (which makes it easy to track which of the css rules is a priority and is applied in this case to the element).
Below the console is a line that shows the element in the document hierarchy, easily allowing you to view the entire list of parent elements from the root to the selected element. Something like breadcrumbs.
Html tag not visible in page context? Or do you need to find all tags, for example, by a certain class, name, property, type?
Open the site in Google Chrome, right-click, call the context menu, select « View page code » . Press the key combination "CTRL + F" at the same time, enter the phrase we need ( for example: class=”padding”) and move through the list of found results, simultaneously looking through all the styles associated with the desired elements on the right side of the page.
How to view the html code of the element (elements) loaded dynamically (for example: by Ajax)
Waiting for the page to load in Google Chrome. We carry out necessary actions for Ajax to work. We right-click on the downloaded data, select "View element code" in the context menu, examine the result in the console on the " Elements" tab on the left.
View css style changes in real time
By the way, it is also convenient to observe, if necessary, what styles are assigned to an element on the fly, for example, when scrolling through the gallery and other timer events. All styles assigned via javascript in real time will be displayed in the property style selected element in the window on the Elements tab.
Interactive view of the impact of css rules on the presentation of html tags
Google Chrome provides an interactive console for css styles. And this means that you can not only see which styles are applied to the element, but also hover the mouse cursor over a certain css properties, enable it using the pop-up checkbox on the right, or disable it by unchecking the flag and viewing the result on the page.
We change the structure of the presentation of html elements on the fly (right in the browser)
So, we have already learned how to explore the structure of a web document in Google Chrome, now let's take a quick look at editing elements on the fly. We go to the console in any way convenient for us. We find desired element in the "Elements" tab, right-click on it, thereby calling the pop-up context menu:
- Add attribute- Adds an attribute to the specified element. As soon as the cursor becomes active, we begin to set the desired property. For example: Let's write name="itemImage", which will be immediately added to our element.
- Edit attribute– if you right-click on an attribute of an element, the item becomes available editattributes. Click, edit.
Usage example: we have forgotten the password saved under the asterisks in Google Chrome (if the password was saved in this browser). Right-click on the element with the password entry, click on "View Item Code» , in the console on the left side of the tab Elements right-click on the type=”password” attribute, left-click on Editattributes, change attribute type=”password” on the type=”text”, and here we already have the same password in the form of text instead of asterisks.
- Edithtml- right-click on an element in the console Elements, choose Edithtml, change the code to your liking.
- CopyasHTML- copy the portion of HTML we need for further research, say, in a notebook, or for other purposes where we need to apply exactly the same layout. We save time.
- CopyXPATH– copies the XPATH representation of the structure from the root parent element to the selected element.
- Deletenode– if you need to remove the current selected element and all its children from the context web pages, and see the result.
- Wordwrap- will render the web page view in the context of the console Elements more readable.
In the following articles, we will continue to look at the webmaster tools, and in particular, we will get acquainted with the rest of the webmaster tools tabs in Google Chrome and also consider debugging javascript errors using different browsers
