Communications and Internet 

Inspect the VKontakte element. How to view the page source code and element code. How to view the code of an element on a page

3.7 out of 5

Hello. Today I want to talk about additions to browsers essential for every web developer. Everyone knows FireBug - the most powerful and convenient add-on for FireFox.

But Firebug can't help you with anything when working with IE, Opera or Safari.

So, on the agenda:

  • FireBug for Firefox;
  • Web Developer Toolbar for Firefox;
  • IE Developer Toolbar;
  • DebugBar for IE;
  • DragonFly for Opera;
  • WebInspector for Safari;
  • Developer Tools in Google Chrome.

There are, of course, others - I will definitely mention them.

Firebug for Firefox

I don’t know for sure whether firebug is the ancestor of other tools for developers, but it is definitely the most popular, convenient and functional.


Firebug is an add-on for Firefox, which means you need to download it from the Firefox add-ons website and install it.

To trigger a firebug, just press F12.

Features of this add-on:

  • Inspection and Editing dynamically changing HTML;
  • On-the-fly CSS editing;
  • Debugging JavaScript, command line to execute scripts;
  • Monitoring network requests - you can see the sizes and download times of files and scripts, request headers;
  • DOM parser.

We can talk for a long time about these possibilities in detail, but I think that all our readers know them, and if not - detailed information is on Firebug's home page or the same thing in Ilya Kantor's translation.

In addition to the firebug itself, you may need a useful add-on for it - FireCookie, with which (surprise :-) you can view and change cookies.

Web Developer Toolbar for Firefox

Another useful addition to Ognelis. It looks like this:

Let's look point by point.

Disable
Allows you to turn off javascript and disable the use of the cache, which is very useful during development (allows you to be sure that the page loaded along with latest updates), cancel the colors used on the page and replace them with standard ones, prohibit sending in the referrer header (the page from which the referral was made).

Cookies
A useful option for working with cookies: you can view, delete, deny and add them.

CSS
This menu stores the coolest feature of the Developer Toolbar - editing CSS on the fly. In addition, it is possible to view css, disable, etc., etc. In my opinion, it is very useful to have shortcut keys(CTRL+SHIFT+C, for example, allows you to go directly to the page styles view)

Forms
Everything for working with forms: show passwords, show information about forms, convert form methods (GET -> POST and vice versa) and much more. Useful function "Populate Form Fields" for automatic filling form fields (for example, when testing a site, when the function of remembering passwords in FF is disabled. Otherwise, I don’t see anything useful in this point.

Images
There is a useful function to disable images - to see what your site looks like without images. You can circle pictures, show their sizes, and show alt attributes.

Information
There are a lot of options in this menu. The function of displaying the class and id attributes on the page may be useful. In addition, the “View Color Information” item is interesting - to quickly get information about the colors that are used on the page. “View document size”—view the page size. “View Response Headers” - view page headers.

Miscellaneous
The most frequently used function is clearing the cache. In addition, the functions available here are “Page ruler” - a ruler, “Page Magnifier” - a magnifying glass and “Line guides” - several lines that can be useful for trimming a template.

Outline
Highlighting different page elements - tables, headings, links, frames, blocks. Resize
Allows you to resize the browser window to fit any standard screen extensions. Tools
Features for page validation are stored here. Both local and external. Convenient and quick access to validation of HTML, CSS, and more. To validate HTML, you can use the keyboard shortcut CTRL+SHIFT+H.

View Source
View source code. Possibility of viewing in an external application, viewing the generated code.

I like the one in the right corner the most. It is a fast HTML, CSS validator and JS error indicator. If there are no problems, the icon is green, and if there are problems, the icon is red.

Internet Explorer Developer Toolbar


In appearance, this toolbar, of course, looks like firebug, but, alas, it has not yet matured to it. Although, on the other hand, it has some capabilities that firebug does not have. I would call IE Developer Toolbar a kind of hybrid of Firebug and FF Web Developer Toolbar.

As in firebug, it is possible to inspect an element with a simple click. But, if in FF we can immediately see padding and margins, here there is no such opportunity.

Additionally, IE Developer Toolbar does not dynamically update the element tree like Firebug does. That is, if we change anything on the page using js, we won’t see anything using this toolbar.

From what you can rejoice - changing css on the fly ( easy way find what to hack :), the ability to disable CSS and images, the ability to quickly clear the cache and play with cookies, quick access to validation.

The best part: there is a built-in color picker, which allows you to get any color from the page using a pipette. (there is a separate ColorZilla plugin for ff).

DebugBar for IE

An interesting extension in its own right. Installed as additional panel to browser:

For some reason there is a built-in search engine, an eyedropper, the ability to change the size of the window and, again, for some reason the ability to send a page to a friend for soap. Although this may be useful. But I was unable to take advantage of this opportunity =(.
In addition, there is an inspector:

The developers were not satisfied with the method of inspection by clicking or pointing: they came up with a more interesting thing. In DebugBar you need to drag the crosshair onto the desired element to see it in the tree.
There is no ability to edit CSS. But there is a validator and a built-in js console.

And if you dig into the settings you can find this:

Both funny and sad.
It is known that the Developer Toolbar will be built into the eighth explorer. It will be similar to the one described in the third paragraph, but we hope that it will be better.

DragonFly for Opera

DragonFly is built into Opera starting from version 9.5, so there is no need to install it. In order to activate Dragonfly, go to Tools → Advanced → Developer Tools. And if in English, then Tools → Advanced → Developer Tools.
I’ll warn you right away that DragonFly is in the Alpha2 stage, this explains many of its glitches.

Features list:

  • DOM inspector;
  • Inspection by click (again, we won't see indentation like in FF);
  • Editing CSS;
  • Quick access to the error console.

DF - something like separate page in the frame. If you open it, it will be open for all tabs (unlike firebug). Therefore, before inspecting an element, we must select from the list the page that we want to view.
Unfortunately, here, as in IE, the Dev Toolbar is not displayed dynamically created elements. And in general, when we inspect the page, no js is launched: links and buttons are not clicked. Let's hope we see all of these features when DragonFly gets closer to release.

Web Inspector in Safari

In order to enable the “Development” item in the Safari menu, you need to enable the corresponding item in the settings (the “Advanced” tab):

In the “Development” menu the following functions are available to us:

Let's take a closer look at the web inspector:

By default, the inspector opens in HTML view mode. But it can be switched to DOM view mode. For this purpose, there is a switch on the top plate. When you hover over an element in the inspector, it will be highlighted on the page itself. You can't see padding, change markup or CSS on the fly, or see dynamic changes in DOMe on the fly like you can in FireBug. But, you must admit, it looks very cute.

If you want to work with the inspector in a browser window, you can click on the button in the lower left corner.

Even in Safari, a function such as “Network Timeline” is available (the “Network” button in the inspector):

You can clearly see when and how long it takes to download files. You can also view request headers, but, unfortunately, you cannot view the content itself.

All sorts of things for developers in Google Chrome

Lame was born in an advanced form, and it immediately has, albeit crooked for now, but still tools for developers.

  • DOM Inspector;
  • JS Debugger;
  • JS Console.

In order to inspect any element, you need to click on it right click and in context menu select “View element code”.

Ctrl+U

How can I view the source code of an element?

Right-click on the page element of interest.

Google Chrome: “View element code”

Opera: “Inspect element”

FireFox: “Analyze element”

In other browsers, look for a menu item with a similar meaning.

Hi all!

I especially laid out the whole point at the beginning of the article, for those who are looking for a quick answer.

The information may be known to many, but since I am writing for novice bloggers, web programmers and other prospectors, this reference article is a must-have.

In the future you will definitely study source pages and individual elements.

Let's look at specific example how you can use viewing the source code of a page.

For example, we want to see what keywords(keywords) are used for a specific page. We go to the web page we are interested in and press Ctrl+U. The source code of this page will open in a separate window or in a separate tab. Press Ctrl+F to search for a code snippet. In this case, we type the word “ keywords". You will be automatically redirected to a piece of code with this meta tag and the searched word will be highlighted.

By analogy, you can search and study other code fragments.

Viewing the entire source code of a page is not very convenient in most cases, so it is possible to view the code in all browsers individual element or fragment.

Let's use a specific example of viewing an element's code. For example, let's see if the link has nofollow attribute. Right-click on the link that interests us and in the drop-down context menu, left-click on the item “View element code” or similar (depending on your browser). Below, in a special window for code analysis, we get something similar.

We see that the link code contains rel=”nofollow” . This means that PR will not “leak” through this link. We will talk about this in more detail in the following articles. Now the important thing is that you now know how to view the source code of the page and the source code of an individual element.

The note: The adaptive version of the site is activated, which automatically adapts to the small size of your browser and hides some details of the site for ease of reading. Enjoy watching!

Hello, dear blog readers Site on! In this article we will discuss something without which I simply cannot imagine success, we will talk about fully functional web developer tool sets such as, Mozilla Firefox with his plugin Firebug and similar web inspectors. Since for surfing the Internet I prefer to use Opera browser, then in this article I will focus specifically on, but the most important thing for you is just to find out that such tools exist, there are quite a lot of them and they exist for every browser, and therefore it would be a sin not to use them.

In order to make a detailed view (inspection) of an element on the page, you need to right-click (right-click) and select one of the following items from the drop-down menu: “inspect element” (Opera); “inspect the element”, or better yet, “inspect the element using Firebug” (Firefox); "view element code" (Chrome). Hotkeys for calling the inspector at Opera: Ctrl + Shift + I.

You should see something like this:

So, we have before us the most powerful weapon for layout, with which we can view, and thanks to its clarity, understand how and what works for us. We can view the CSS, and JavaScript code s, and also change them on the fly! Yes, dear readers, one of the most interesting features of inspecting elements is that we can, so to speak, edit any site “online” and see what would happen if the developers did this here and that way here. We can connect, disconnect or change this or that, play JavaScript, even add our own text in the middle of someone else’s article and the like, of course, all this is visible only to us.

Thanks to built-in element inspection, training practical aspects website layout can become a real game for you. Personally, therefore, I very often look through the original backgrounds of sites that I like (pictures enclosed in CSS property background), and also look at all the ins and outs of the layout of this or that site in order to learn new techniques, which I advise you to do.

Tracking available in Opera Dragonfly network traffic, there is an error log, a built-in console, intelligent highlighting of code and elements on the page, a JavaScript debugger, viewing page resources and much more.

I suggest watching this short and beautiful video about the built-in web inspector from Opera -:

It is worth noting that Opera Dragonfly is natively built into every version of Opera and is updated automatically, without notifications or your participation.

I would also like to demonstrate such an interesting feature of the built-in Mozilla Firefox web inspector as 3D viewing, which really pleased me:

The most important thing that you should have learned and understood about inspecting page elements I have already written above, the rest, in my opinion, is a matter of practice, not theory, so that’s all for today, thank you for your attention, successful website development!

There are, of course, others - I will definitely mention them.

Firebug for Firefox

I don't know for sure whether it is FireBug The ancestor of other developer tools, but it is definitely the most popular, convenient and functional in .

Firebug is an add-on for Firefox, which means you need to download it from the Firefox add-ons website and install it.

To trigger a firebug, just press F12.

Features of this add-on:

  • Inspecting and editing dynamically changing HTML;
  • On-the-fly CSS editing;
  • Debugging JavaScript, command line for executing scripts;
  • Monitoring network requests - you can see the sizes and download times of files and scripts, request headers;
  • DOM parser.

You can talk for a long time about these possibilities in detail, but I think that all our readers know them, and if not, detailed information is on the Firebug home page or the same thing in Ilya Kantor’s translation.

In addition to the firebug itself, you may need a useful add-on to it - FireCookie, with which (surprise:-) you can view and change cookies.

WEB Developer Toolbar for Firefox

Another useful addition to Ognelis. It looks like this:

Let's look point by point.

Disable

Allows you to turn off JavaScript, disable the use of the cache, which is very useful during development (allows you to be sure that the page has loaded with the latest updates), cancel the colors used on the page and replace them with standard ones, disable sending in the referrer header (the page from which the referral was made) ).

Cookies

A useful option for working with cookies: you can view, delete, deny and add them.

CSS

This menu stores the coolest feature of the Developer Toolbar - editing CSS on the fly. In addition, it is possible to view css, disable, and so on and so forth. In my opinion, the presence of shortcut keys is very useful here (CTRL+SHIFT+C, for example, allows you to go directly to viewing page styles)

Forms

Everything for working with forms: show passwords, show information about forms, convert form methods (GET » POST and vice versa) and much more. A useful function is “Populate Form Fields” for automatically filling out form fields (for example, when testing a site, when the function of remembering passwords is disabled. Otherwise, I don’t see anything useful in this item.

Images

There is a useful feature to disable images - to see what your site looks like without images. You can circle pictures, show their sizes, and show alt attributes.

Information

There are a lot of options in this menu. The function of displaying the class and id attributes on the page may be useful. In addition, the “View Color Information” item is interesting - to quickly obtain information about the colors that are used on the page. “View document size” - view the page size. “View Response Headers” - view page headers.

Miscellaneous

The most frequently used function is clearing the cache. In addition, the functions available here are “Page ruler” - a ruler, “Page Magnifier” - a magnifying glass and “Line guides” - several lines that can be useful for trimming a template.

Outline

Highlighting different page elements - tables, headings, links, frames, blocks. Resize allows you to resize the browser window to fit any standard screen extensions. Tools features for page validation are stored here. Both local and external. Convenient and quick access to validation of HTML, CSS, and more. To validate HTML, you can use the keyboard shortcut CTRL+SHIFT+H.

View Source

View source code. Possibility of viewing in an external application, viewing the generated code.

I like the one in the right corner the most. It is a fast HTML, CSS validator and JavaScript error indicator. If there are no problems, the icon is green, and if there are problems, the icon is red.

Internet Explorer Developer Toolbar

Starting from 8.0, error debug is already built into this browser. It can be easily called F12 key. True, it’s as poor as a program from the 90s.

But there is a much cooler tool for this browser, the so-called Internet Explorer Developer Toolbar, which can be downloaded from the link.

In appearance, this toolbar, of course, looks like firebug, but, alas, it has not yet matured to it. Although, on the other hand, it has some capabilities that firebug does not have. I would call Internet Explorer Developer Toolbar is some kind of hybrid of Firebug and FireFox WEB Developer Toolbar.

As in firebug, it is possible to inspect an element with a simple click. But, if in we can immediately see padding and margins, here there is no such opportunity.

Additionally, Internet Explorer Developer Toolbar does not dynamically update the element tree like Firebug does. That is, if we change anything on the page using js, we won’t see anything using this toolbar.

What you can enjoy is changing CSS on the fly (an easy way to find what to hack :), the ability to disable CSS and images, the ability to quickly clear the cache and play with cookies, quick access to validation.

The best part: there is a built-in color picker, which allows you to get any color from the page using a pipette. (there is a separate ColorZilla plugin for ff).

Debug DebugBar for Internet Explorer

DebugBar for Internet Explorer can be downloaded from the given link.

An interesting extension in its own right. Installed as an additional panel to the browser:

For some reason there is a built-in search engine, an eyedropper, the ability to change the size of the window and, again, for some reason the ability to send a page to a friend for soap. Although this may be useful. But I failed to take advantage of this opportunity.

In addition, there is an inspector:

The developers were not satisfied with the method of inspection by clicking or pointing: they came up with a more interesting thing. In DebugBar you need to drag the crosshair onto the desired element to see it in the tree. There is no ability to edit CSS. But there is a validator and a built-in js console.

And if you dig into the settings you can find this:

Both funny and sad.

It is known that the Developer Toolbar will be built into the eighth explorer. It will be similar to the one described in the third paragraph, but we hope that it will be better.

Debug DragonFly for Opera

DragonFly is built into Opera starting from version 9.5, so there is no need to install it. In order to activate Dragonfly, go to Tools → Advanced → Developer Tools. And if in English, then Tools → Advanced → Developer Tools.

I’ll warn you right away that DragonFly is in the Alpha2 stage, this explains many of its glitches.

Features list:

  • DOM inspector;
  • Inspect by click (again, we won't see indentation like in FireFox);
  • Editing ;
  • Quick access to the error console.

DF is something like a separate page in a frame. If you open it, it will be open for all tabs (unlike firebug). Therefore, before inspecting an element, we must select from the list the page that we want to view.

Unfortunately, here, as in Internet Explorer Dav Toolbar, dynamically created elements are not displayed. And in general, when we inspect the page, no JavaScript is launched: links and buttons are not clicked. Let's hope we see all of these features when DragonFly gets closer to release.

Debug WEB Inspector in Safari

I’ll say right away that it’s about the browser Safari I missed the information, so I am not responsible for the adequacy of the material, as they say.

In order to enable the “Development” item in the Safari menu, you need to enable the corresponding item in the settings (the “Advanced” tab):

In the “Development” menu the following functions are available to us:

Let's take a closer look at the WEB inspector:

By default, the inspector opens in HTML view mode. But it can be switched to DOM view mode. For this purpose, there is a switch on the top plate. When you hover over an element in the inspector, it will be highlighted on the page itself. You can't see padding, change markup or CSS on the fly, or see dynamic changes in DOMe on the fly like you can in FireBug. But, you must admit, it looks very cute.

If you want to work with the inspector in a browser window, you can click on the button in the lower left corner.

Even in Safari, a function such as “Network Timeline” is available (the “Network” button in the inspector):

You can clearly see when and how long it takes to download files. You can also view request headers, but, unfortunately, you cannot view the content itself.

Debug for developers in Google Chrome

Lame was born in an advanced form, and it immediately has, albeit crooked for now, but still tools for developers.

  • DOM Inspector;
  • javascript debugger;
  • JavaScript Console.

In order to inspect any element, you need to right-click on it and select “View element code” in the context menu:

The functionality is the same as in Safari: elements are highlighted when hovered, but CSS and HTML editing is not available, and changes in the DOM are not tracked. But the button in the lower left corner, which should attach the inspector to the browser window, does not work.

In the “Resources” tab we can see the following:

Slightly different from the scale in safari. Translucent in this diagram shows the relative file sizes, and full color shows the loading time. One way or another, it is obvious that this part of Chrome is far from finished.

In this article, I looked at the most famous browser extensions and built-ins.

There are others, for example:

  • Internet Explorer WEB Development Helper - a good assistant for ASP.NET developers (Internet Explorer);
  • WEB Developer Toolbar - toolbar for Internet Explorer and FireFox. There are a few useful functions;
  • WEB Accessibility Toolbar - toolbar for Internet Explorer. Nothing interesting.

If there are add-ons that I didn’t mention, but they should, or there are functions for the mentioned extensions that I missed, please write.

Enjoy it for your health!

Browser developers have taken care of the convenience of those who create sites that open in these same browsers, namely webmasters. They added in standard features developer tools that make it easy to open and view the source code of the site page in the browser: HTML, CSS, JavaScript (JS), obtain various useful data about the structure of the site, conduct its technical analysis. In general, see a lot of useful things.

Of course, these tools are used not only by website creators for work, but also by ordinary users, for whom the source code allows them to view various useful data.

From this article you will learn how to view the source code of a website page in a browser (how to open the HTML, CSS, JavaScript code of a website).

How to open a page's source code in a browser

There are two ways to open the source code of a web page in a browser:

  1. Using hot keys;
  2. Open from context menu.

Ctrl+U– a hotkey combination to view the source code of the entire site page 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 a 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 area on the page, then the previous tool will not work. For this purpose, the developer tools have another function, which will be discussed below.

How to view the code of an element on a page:


You can also use keyboard shortcuts to quickly access element inspection.

Hotkeys (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 these steps, the source code of the web page will open in the same browser window:

All HTML code will be in the large left column. A CSS styles- on the right.

Advantage this method, of course, is that the user has the opportunity to change the source code and 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 located on the hosting servers. To change or add program code, you need to double-click on the desired fragment or area. Of course, the code correction 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 into files.

This video instruction describes in detail and shows how to work with the developer tools:

Just like that, just online, right in your browser, you can view the source code of the site page, get basic data 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 disappear. This is not enough to hack the site :)

How to View Source Code on Android Phone

I would also like to note that the 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 page being inspected:

For example:

view-source:https://site/turbo-rezhim-opera/