Not only regular users can enjoy all the functions and benefits of Google Chrome. Developers also have a variety of options and settings to customize. In this article, we will review all the possibilities for developers in Google Chrome.
Developers & Google Chrome – What functions can the browser offer? Google Chrome includes a huge set of functionality for testing websites by a web developer. The developer panel opens by pressing F12.
The HTML Code
Changing the HTML tree is quite simple, choose the tag you need and press F2, then change the HTML code of the block, where you can not only change its content but also add other attributes to this tag, as well as add another tag before or after this tag. When you hover the mouse on this tag on the screen will highlight the area of this tag, where padding and margin are marked in orange and green. It is worth to note one important feature if the developer makes a mistake and does not use clear: both after float: left than disrupts the layout, the area of the specified tag will not be visible or will be displayed with an error. The most common mistake, by the way!
Finding the right tag in the tree is not difficult, there are two ways. The first method is that there are 2 icons in front of Elements in the menu, the second of which is the translation of a site into a mobile version (you don’t even need to buy a phone, everything is visible to the maker-up), and the first is to select an element on the page. It is enough to click on the first button, select the necessary block, and click on it with the left mouse button, so this particular tag for correction will open in us. The second, faster method is to right-click on the required site section and select “View Code.” For those who like to experiment with various codes, it is recommended to download google chrome for windows 10 64 bit and test every single part of the code.
If you look closely, you can replace the interesting feature that almost all tags have the same properties with different values, which means that almost the entire site can be composed using only 1 or 2 tags, which seems absurd, but possible. In the very first Styles column, it is the styles that we changed (our style sheets). In this tab, we can change the influence of styles on the given tag while working in the element. Style block, or change the id and class for all elements on the site.
The Main Console for Developers
Absolutely all WARNING and ERROR are written to this block. Make sure that all errors are displayed in you as follows: click on the filter icon in this section and select the “all” tab, that is, display all errors. The default is always “all.”
Logs are stored within this page from the moment you open the console, rather than loading the page. Therefore, if you load the page, and then open the console, then you will not see any errors, although there are errors on the page! Therefore, we first open the console, and then reload this page! Now to the right of the error will be indicated the file on which the error occurred and even the line itself. It should be mentioned that errors of various installed plug-ins and extensions for Google Chrome including viruses also fall into the console (they are also written as a plugin or extension), as well as when running Ajax and other external scripts, line 1 or 0 can be specified in the executable file, but not the line from which this same AJAX was executed. It is worth taking into account!
Working with JavaScript, we can encounter the fact that a click on a redirect occurs to another page in the format: click – error – redirection, and the error occurred before the line that was supposed to block the redirection and therefore in the console is empty. Everything is solved very simply, check the Preserve Log box, and then the logs will not be cleared after reloading or redirecting the page.
The Network and Sources
A great way to monitor all incoming and outgoing requests and their results. In the Sources tab, we can see all the additional uploaded files, namely images and scripts. The easiest way to get the desired picture, look at its size, save it to your computer.
You can also open JavaScript files there. By clicking the right button on the desired file, you can select the item “Open link in a new tab,” and from the new page, you can save the file by pressing ctrl + c.
Network more complex functionality, here is a list of all requests and their responses with the server. Please note that there is also Filter – All, as well as Preserve log, this is very important!
Your appearance of this section may be slightly different, and there may be included overview (the corresponding icon with graphs), which I usually turn off. In the left column, we have a list of requests, in the right, there are answers. In this case, the answers are also divided into subsections.
The first request always goes to the executing file (URL is specified), if you close the right column, you can see the details of the request, namely, the request method, how long it took to complete (which will indicate how well the network and the site work well, the file size. By closing the right one, The column can be re-opened by clicking on the file of interest to us for analysis.
