Yandex browser source code. How to open the source code of a page
It is necessary to quickly see all the changes on the site itself, without affecting the files and code of the site posted on the Internet. For example, change the color scheme of a block, move a moved element, etc.
To do this, many webmasters use local Denwer or OpenServer servers, running a full copy of the site on their computer. This method is universal and suitable for professionals, with it you can check the operation of various scripts and plugins, experiment with changing the design and edit all site files, and after the test, transfer the appropriate changes directly to the site.
For users who are far from webmaster art, I recommend using a browser for these purposes. Since I use Chrome, I will give instructions with screenshots for this particular browser. By analogy, you can work with Opera, Yandex.Browser, Mozilla Firefox and other browsers, the principle of their tools is similar.
Instruction 1: how to view the entire HTML code of the site in the browser
Open the required web page of your site. We right-click on the required element, a browser context drop-down menu with available commands will appear:
Figure 1. Viewing the entire HTML code of a web page in the Chrome browser
Important: Commands in the drop-down menu may differ, for example, for active elements (links, images, videos) and inactive elements (text, background, divs):
Figure 2. Chrome browser dropdown menu
Therefore, if you do not find the required command, just right-click somewhere else or use the browser hotkeys.
Returning to Figure 1, it shows the necessary command to view the entire HTML code of the original web page, it is called " View page code". We click on the command, a new tab will open with the full code of the original web page, a big plus to everything - the view is available with syntax highlighting:
Figure 3. Code snippet for this site
This tool is very useful for finding and editing the elements you are looking for.
Alternative Ways to View All HTML of a Web Page
For faster access, you can use other ways to call this tool
- In Figure 1, we also see that this command is available via a keyboard shortcut.
+ ; - Paste into the address bar of the browser view-source: site instead of my domain, paste your address;
Both methods are universal and should work in all browsers.
At first it may seem to some that this is not a necessary tool at all, but viewing the entire HTML code of a site is great for finding the necessary elements in the code, these can be links, tags, meta tags, attributes, and other elements.
Hot key combination
Figure 3. Search by site code
After you make a request to the search form, the screen will move to the first element found, using the arrows you can move between them and select the one you need:
Figure 4. Search by website HTML code
Instruction 2: How to View and Edit Website HTML and CSS Code in Google Chrome Browser
Now the most important part, in which I will show how you can edit the HTML and CSS code of the site in the browser. then transfer the changes to the browser.
Here is such a useful tool that is always available in your browser, experiment with other commands that will make it easier for you to edit the site.
The probability of looking into the initial the code web pages, received by the browser as a result of a request to the server, is in fact in every Internet browser. Access to the corresponding command is organized approximately identically, but there are significant differences in what method and in what form you will be presented with the initial the code .
Instruction
1. In the Mozilla FireFox browser, expand the "View" section from the menu and click on "Initial the code pages". The same item is also in the context menu that appears when you right-click the text pages. The keyboard shortcut CTRL + U is also allowed. Mozilla FireFox does not use external programs - the initial the code pages with syntax highlighting will open in a separate browser window.
2. In Internet Explorer, click on the File menu and select Edit in Notepad. Instead of the name Notepad, another program can be written that you have assigned in your browser settings to view the initial the code a. On Click pages with the right mouse button, a context menu pops up, which also has an item that allows you to open the initial the code pages in an external program - "View HTML- the code a".
3. In the Opera browser, open the menu, go to the “Page” section and you will likely prefer the “Initial” item in the “Development Tools” subsection. the code” or the item “Initial the code frame". The hotkeys CTRL+U and CTRL+SHIFT+U are assigned to this selection, respectively. In context menu attached to click pages right-click, there is also the item "Initial the code". Opera open source pages in an external program that is assigned in the OS or in the browser settings for editing HTML files.
4. The Google Chrome browser, without any doubt, has the best organization for browsing the initial the code a. By right-clicking a page, you may prefer the View the code a pages” and then the source code with syntax highlighting will be opened in a separate tab. Or you can prefer in the same menu the line "View the code a element" and the browser in the same tab will open two additional frames in which you can inspect HTML and CSS the code any element pages. The browser will respond to moving the cursor across lines the code and, highlighting the elements on the page that correspond to this section of HTML- the code a.
5. In the Apple Safari browser, expand the "View" section and select the line "View HTML the code a". In the menu that appears when you right-click the open pages, the corresponding item is titled "View Source". The hotkeys CTRL + ALT + U have been assigned to this action. the code opens in a separate browser window.
For a long time, the “show page source code” option was useless and uninteresting for me. While learning HTML on codecademy and layout of my own sites did not grow into my new hobby. Here the question arose: where to find real cases and borrow interesting solutions for your “piggy bank”? The answer was surprisingly simple, like all genius: view the source code of the page in Google Chrome! I share with you my modest findings.
What is page source code
If you, like me, are just taking your first steps in HTML programming, it will not be superfluous to know what the source code of a page is.
The source code, also known as the HTML code of the page, is text in Hyper Text Markup Language (HTML). It includes the actual page content (text, tables) and tags. The latter play the role of instructions for the browser: how to display content, what kind of formatting to use, where to insert a hyperlink or media file. Well, for us, novice programmers, the source code is the best training ground: we find an interesting site and peep, save, use successful fragments. How?
How to View Source Code in Google Chrome Browser Page
Find the page you like. For example, I was interested in the design of the site menu. There are three ways to open the source code in the Google Chrome browser:
- Click on the icon menu in the upper right corner of the browser and select "More Tools". Among others, there is an option to "View Source Code". Frankly, I rarely use this method: a lot of unnecessary movements. It can be made even easier.
- Press the key combination Ctrl+U- opens a new window with the source code;
- For the context menu fans: right-click on the page and select the "View Page Code" option.
We coped with the task of viewing the HTML code of the page in the browser. We pass to the most interesting stage.
How to edit and save source code
To learn how to create websites, it is not enough to read someone else's HTML code. You need to play with it, experiment, make changes and check the result. You can even start by compiling a few successful samples. How to edit and save source code?
Option 1. "Manually"
After we have opened the source code of the page, we call the context menu and select the "Save As" option and save the file to the hard drive. We edit the file in Notepad or Notepad, save the changes and open through the browser. The results of our changes (successful and not so good) will be reflected in the browser window.
Option 2. For the pros
When you "play" with source code every day, the "save-open-modify-save-verify" process is tiring. For myself, I found a solution in the form of installing a plugin for Google Chrome - Firebug Lite. It allows you to edit and save the source code without leaving your browser window.
Browser developers have taken care of the convenience of those who create sites that open in these same browsers, namely, webmasters. They added developer tools to the standard features, with which you can easily open and view the source code of the site page in the browser: HTML, CSS, JavaScript (JS), get various useful data about the structure of the site, conduct its 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 by ordinary users, to whom the source code allows you to see various useful data.
From this article you will learn how to view the source code of the site page in the browser (how to open the HTML, CSS, JavaScript code of the 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:
In order to quickly find the 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, which will be discussed below.
How to view the code of an element on a page:
In addition, you can use keyboard shortcuts to quickly access 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 source code of the web page will open in the same browser window:
All HTML code will be in the left large column. And CSS styles are on the right.
The advantage of 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 a program 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/