Google Chrome Developer Console: ten unobvious usefulness. Styling dev tools in Google Chrome

Translation

Today Google Chrome is the most popular browser among web developers. With a fast six-week release cycle and a powerful set of ever-expanding developer tools, the browser has become a must-have tool. Most of you are probably familiar with many of its features, such as live CSS editing using the console and debugger. In this article, we'll look at 15 exciting tips and tricks that will improve your productivity even further.

1. Quickly change files

If you've used Sublime Text, then you probably couldn't live without "Go to anything" ( Translator's note: For Idea users, this feature is called "Searching Everywhere" and is accessed by double-clicking the Shift key). You'll be happy to know that there is a similar feature in the developer tools. Press Ctrl + P (Cmd + P for Mac users) while the Developer Panel is open to quickly find and open any file in your project.

2. Search in source code

But what if you want to search in the source code? To search all downloaded files on a page, press Ctrl + Shift + F (Cmd + Opt + F). This search method also supports regular expression search.

3. Go to line

Once you've opened a file in the Sources tab, the developer tools allow you to jump to any line in that file. To do this, press Ctrl + G for Windows and Linux (or Cmd + L for Mac), and enter the line number.

Another way is to press Ctrl + O, but instead of the search text, enter ":" and the line number ( Translator's note: or you can go even further and enter the file name and line number using ":" as a separator between them, while entering the entire file name is not at all necessary, this is a search).

4. Fetching DOM elements using the console

The Developer Tools console supports several useful magic functions and variables for DOM fetching:

$() - equivalent to document.querySelector(). Returns the first element matching the CSS selector, for example $("DIV") will return the first DIV element on the page.
$$() - equivalent to document.querySelectorAll(). Returns a list of elements ( Translator's note: namely NodeList) that match the given CSS selector.
$0 - $4 is the history of the last five DOM elements you selected in the Elements tab, where $0 will be the last.

You can find out more functions of the console.

5. Using multiple carets and selections

When editing a file, you can set multiple carets by holding Ctrl (Cmd for Mac) and clicking where you want, so you can set the caret in many places at once.

6. Preserve Log

By enabling the Preserve Log option on the Console tab, the results will be saved rather than cleared each time the page is loaded. This is convenient if you want to view a history of errors that appear before leaving the page.

(Translator's note: a similar property is available on the Network tab. When enabled, the query history is no longer cleared when switching between pages. However, if a page has been redirected using JavaScript and any other request has been made, then it is almost always impossible to view the result of that request. Don't forget to disable such properties when debugging for a long time! Developer tools almost always consume more system resources than the page itself!)

7. Preening minified sources

Chrome's Developer Tools have a built-in "spruce-up" of minified source code into a more human-readable form. The button is located in the lower left corner of the currently open file in the Sources tab.

(Translator's note: sometimes it is not enough to enable this property automatically, as for example it is done in FireFox)

8. Device mode

Developer tools include a powerful mode for developing pages optimized for mobile devices. This video from Google demonstrates most of its advanced features, such as changing screen resolution, emulating touch screen touches, and emulating low-quality network connections.

9. Emulate device sensors

Another cool feature of Device Mode is the ability to simulate mobile device sensors such as touchscreens and accelerometers. You can even enter your geographic coordinates. The object is located at the bottom of the Elements tab in Emulation -> Sensors.

10. Color selection

When choosing a color in the style editor, you can click on the color swatch and a color selection window will appear. While this window is open, your mouse pointer turns into a magnifying glass for choosing colors on the page, with pixel precision.

11. Forced element state

Development tools allow you to simulate CSS DOM element states such as:hover and:focus, making it easier to write styles for them. This feature is available in the CSS Property Editor.

12. Display shadow DOM

Browsers create elements such as input fields and buttons from other basic elements that are usually hidden. However, you can go to Settings -> General and enable Show user agent shadow DOM to display these basic elements in the Elements tab. This will give you the opportunity to design them separately.

13. Select next occurrence

If you press Ctrl + D (Cmd + D) while editing files in the Sources tab, the next occurrence of the current word will additionally be highlighted, allowing you to edit them simultaneously.

14. Changing the color format

By Shift + Click on the color swatch, in the CSS editing panel, the color format will be changed to RGBA, HSL hexadecimal ( Translator's note: at the same time, both the hexadecimal abbreviated form and the full one, and even in capital case. If this does not suit you, the browser will try to find this color in the list of standard color constants. The only drawback of this feature is that in order to select the desired format, you often have to “click” through all the other possible options).

15. Editing local files in the workspace

Workspaces are a powerful tool in the Developer Dashboard that turns developer tools into an IDE. The workspace contains a file structure in the Sources tab that matches the structure of your local project, so you can now edit and save directly without having to copy and paste changes into an external text editor.

To configure workspaces, go to the Sources tab ( Translator's note: enable the navigation panel if it is hidden, to do this, click on the Show navigator button in the upper left corner of the tab) and right-click anywhere in the navigator panel, or simply drag the entire project tab into the developer panel. Now, the selected folder, its subdirectories and all the files in them will be available for editing no matter what page you are on. For even greater convenience, you can use the files that are used on this page, which will allow you to edit and save them.

UPD. Translator's note:

The added folder will be available from all tabs. Therefore, if your project has more than one HTML file, then it will be enough to open it in the next browser tab.

You can learn more about workspaces

Find out what Chrome DevTools can do for you and learn how to use them to their full potential.

Of all the computer programming disciplines, web development certainly has the lowest barrier to entry. Almost everything you need to create a simple web page is Notepad and a browser.

However, as the layout becomes more complex, keeping track of changes in the page code in a regular Notepad becomes more and more difficult. I know from myself that a novice web developer can spend more than one hour just trying to find a rule in the style sheet to change the appearance of this or that element...

You can, of course, search at random, but experts already taught by bitter experience do not rely on their vigilance. They just use special ones developer tools, which are built into most browsers and allow you to quickly inspect the code and test certain options for its operation.

A similar type of tool appeared in Internet Explorer. The old Opera used the Dragonfly panel for these purposes and even had its own built-in analogue of Notepad with code highlighting, which allowed you to type directly in the browser environment:

Today, they have moved away from this practice and provided web browsers with special code inspectors. Browsers based on the Chromium engine, and more specifically Google Chrome, can boast of the most functional developer tools. Let's look at everything using his example.

Calling developer tools and page views

You can call the developer tools in Chrome in several ways:

From the main menu. Click on the menu button (three dots in the upper right corner of the browser window), hover over the drop-down list "More Tools" and click on the item "Developer Tools".
Hot keys. You can press the button to call F12 or combination CTRL+SHIFT+I.
From the context menu(most convenient for inspecting specific page elements). Right-click on the desired object on the web page and select "View code"(or "Inspect Element" in some earlier versions of Chrome).

The developer toolbar is a set of tabs on which certain functional modules are located, as well as control and configuration buttons. The first thing you should pay attention to is the common buttons. On the left you can find a page element selection button and a page view selection button:

We will still study the behavior of the first, but as for the second, it allows you to emulate the display of a web page on the screen of one of the available mobile devices (for example, an iPhone) or on a display of a given resolution in pixels. All you need to do is press it and select the desired device:

There are also several buttons and indicators on the right side. Indicators display the number of errors (in red) and warnings (in yellow) in the operation of scripts. The main button here can be called settings menu. It allows you to change the binding of the panel itself relative to the frame with the page, as well as enable and disable additional tabs with tools (section "More tools"). By default, it is located at the bottom under the page being inspected, but it can also be placed to the side or even docked into a separate window:

The menu also has a "Settings" section, which gives access to numerous developer tool settings. But to begin with, you are unlikely to need them, so just knowing about them is enough. And we will look at the main tabs with useful functions.

Elements Tab

By default, Chrome DevTools opens in a tab "Elements". This is one of the most useful tabs because it allows you to view and quickly change the HTML and CSS code of various elements of a web page. To select an element, just activate the first button on the left side of the panel (“Select an element in the page to inspect it”) and point the mouse cursor at the desired fragment of the page. On the page itself, the selection and block size in pixels will be displayed around the selected element, and in the “Elements” tab the HTML code will expand to a line describing the selected fragment:

Having selected an element, we can edit it and the styles associated with it as we need. For example, we want to change the text and appearance of the “cloud” block with Frida’s phrases on our website. To do this, select the block itself and look at its contents:

As you can see, inside it there are three blocks with different replicas and a script that switches these replicas after certain periods of time. To write something of our own, we can stop the script and write our text in one of the blocks (HTML editing is available after double-clicking on the element). Although, why waste time on trifles? We can remove all unnecessary blocks, leaving only one (and at the same time we can demolish the script :)):

So, we changed the text in the block, but it looks a little small... We need the scale of our “crime” to be visible at first glance :) And here the style editing function, which is available in the additional part of the “Elements” tab, will help us . Select the desired block in the code and by double-clicking in the side panel you can either edit the styles that already exist or add new ones. This way you can achieve very noticeable results :)

Please note that all elements that we add to the styles panel are automatically registered as inline styles (parameters of the "style" attribute) of the selected block of HTML code. Moreover, each of them can be quickly disabled by unchecking the checkbox on the left (in the code, the disabled parameter is automatically removed as a comment).

And, perhaps, the most useful thing is that for each selector with a description of the styles there is an exact link to the line in which it is actually written in the CSS file. This allows you to open the file and make the necessary edits in a known location instead of searching manually! That is, you can use the developer tools on the "Elements" tab to enter and evaluate preliminary temporary edits code ( all edits disappear after reloading the page) followed by introducing the most successful changes to the code on an ongoing basis.

It is also worth noting finally that the panel for editing styles has a number of its own tabs, of which “Styles” is only the first. Here are the additional sections there:

Computed- displays the model of the selected block and automatically calculated styles for it, which are not explicitly specified or were inherited from parent blocks;
Event Listeners- displays a list of functions that “listen” to certain events for the entire page or a specifically selected block (you need to uncheck the box;
DOM Breakpoints- contains so-called “break points” DOM (abbreviated English “Document Object Model”), which can be created from the context menu of the HTML code (group “Break on”) when modifying it for quick cancellation/ applying the changes made;
Properties- allows you to view the full list of JavaScript properties for the selected block on the page;
Accessibility- shows the hierarchical level of nesting for the selected block without taking into account block types, their classes, identifiers or other characteristics.

The presence of all these additional tools does not oblige you to use them. Usually, the ability to edit HTML and CSS code is enough. However, if you need to work with JavaScript, then the listen list, DOM breakpoints and block properties can be very useful to you!

Console

Since we're talking about JavaScript, we can't help but mention a tool built into Chrome DevTools called the console. You can find it on a separate "Console" tab, and it is also displayed by default as an additional bottom panel on all other tabs (you can disable the display in the settings by selecting "Hide console drawer" or pressing the ESC button):

The console can perform two functions at once: event monitoring on the page displaying warnings and errors, as well as execution of JavaScript commands entered by the user. The first function is clearly executed. In the console output, all events are grouped into three categories with different background colors:

White- “knockouts” about successfully completed events.
Yellow- warnings about possible non-critical errors and failures.
Red- errors in script execution or in accessing certain requested resources.

Errors and warnings contain a brief description of the problem and a link to the file and line in it that causes the problem. Knowing the exact location of the problem (assuming it occurs in a file on your server), you can quickly localize and fix the error.

As for executing custom code, this feature is used very often to quickly debug code and conduct various experiments with JavaScript. For example, when learning this language, you don't always need a separate Notepad or even a full-fledged development environment. You can execute simple scripts directly in the console (especially since it supports command completion).

For console programming, it is best to open a non-existent internal page in Chrome (for example, chrome://blank/) or a new empty tab (chrome://newtab/). This will avoid overlaps in the execution of scripts already running on the page. In fact, that’s all - we can write code in the console and execute it by pressing Enter. The only thing you need to remember is that for output, instead of the traditional "document.write("");", the construction "console.log("");" is used. Here is the most primitive example for displaying a text string:

console.log("My first text output in the Chrome console:)");

The console supports a number of specifiers that allow you to explicitly define the output type (string/number/DOM element/JavaScript object), perform data substitution of the designated type, or apply formatting:

Here are some examples of using specifiers:

*** Example 1 ***

console.log("I'm counting to five: %d, %d, %d, %d, %d \n%s", 1, 2, 3, 4, 5, "I'm going to look!");

*** Example 2 ***

console.log("%cThis will be written in big red letters on a blue background", "color: #f00; font-size: 30px; background: #00f; padding:10px; font-weight:bold");

*** Example 3 ***

var curDate = new Date();
var day = curDate.getDate();
var month = curDate.getMonth();
var arr = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"November",
"December",
];
console.log("%cToday: %s - %d number", "color: orange; font-size: 30px; background: blue; padding: 20px", arr, day);

As you can see, the console can be successfully used not only for inspecting existing code, but also as an environment for learning JavaScript. It supports both single-line expressions and more complex multi-line constructs with variables, arrays, and loops. To feed a line in the console, instead of Enter, you need to press SHIFT+ENTER, and to feed lines in the output results, use the line feed character - "\n".

Sources Tab

At first glance, the purpose of the third tab of developer tools "Sources" not quite clear. By default, in the center of the workspace, the source code of the page is also opened here, which, for some reason, cannot be edited. There are two panels on the sides: “Page” (left) and “Threads” (right). And it is precisely the left panel that is the main “wealth” of the “Sources” tab!

This panel allows you to view all the resources that are loaded along with the page. Pictures, scripts, style sheets - all this can be selected and viewed in the work area (and scripts can also be edited):

In addition to viewing resources and editing JavaScript (by the way, you can use the tools from the right panel), the "Sources" tab allows you to download any files to your computer. This feature can be used to download, for example, photos from Instagram and other web resources where direct saving of images is not available! Just open the developer tools, look for the necessary images in the list of resources, and then save them:

Similarly, you can download, for example, your favorite fonts, SVG graphics and similar resources, the direct saving of which may not be available.

Testing and Audit Tools

The three tabs discussed above are, one might say, the main ones in the development tools. The composition and number of others may change from version to version of Google Chrome (as, for example, happens with the “Memory” tab, which appears and disappears). In addition, the number of tabs can be increased due to installed extensions that add their own toolbars.

At the moment, the current version of Google Chrome is the recently updated 69th branch. Therefore, we will consider additional tabs using its example.

Network tab

The "Network" tab allows you to view loading statistics for all elements of the inspected web page, as well as monitor the requests sent by it during operation. To start tracking, you need to click the record button on the left side of the tab and reload the page (F5). You can stop recording at any time, however, it is advisable to do this after the page has fully loaded all the required resources:

The results obtained can be studied using event filtering by types of data transmitted, by their size, loading time, etc. In addition, you can emulate loading a page with an artificial speed limit corresponding to certain mobile networks (the "Online" drop-down list). All this can be used to identify the most “heavy” files and optimize their loading (or eliminate them altogether) to save traffic and speed up your site.

Performance Tab

If the previous tab allowed us to track the purely network activity of the page, then “Performance”, working on similar principles (recording actions), allows us to assess what kind of load a web resource creates on the user’s computer. To obtain a sufficient amount of data for analysis, it is enough to record the operation of the page for a minute, after which we stop and look at the results:

The graphs have multi-colored labels that allow you to see which processes take up the most time and computer resources throughout the entire scan. And you can summarize the data obtained by looking at the pie chart below, which displays the total test time, as well as the percentage spent on running scripts, rendering page elements, drawing images, loading other elements (for example, third-party scripts) and downtime. All this data can also be used to optimize web pages.

Memory Tab

One of the most inconsistent tabs in Google DevTools, which disappears on and off. It can work in two modes. By default, it displays a summary of the current memory consumption of the open page. If you need a detailed report, you can start the recording process similar to that on the previous tabs. As a result, you will receive data about all processes consuming the computer's RAM:

Interestingly, memory consumption is displayed not only by the page itself, its scripts and loaded resources, but also by Chrome extensions that are currently active! This can be useful in cases where the browser has become very slow due to “overgrowing” with unnecessary plugins. Knowing the main “eaters” of resources, you can remove them, returning your Chrome to its former lightness.

Application Tab

If you need to find out what a web page stores in sessions, cookies or other local storage, go to the "Application" tab. Here everything is as simple as possible - in the left panel we select the data storage we are interested in, and in the main area we look at its contents. And, which is typical, here we can immediately edit this content and even completely delete it (the “Clear all” and “Delete selected” buttons):

Security tab

Now it has become almost necessary to use the secure HTTPS protocol on websites. To evaluate its performance and potential gaps in the security of web pages, you can use the "Security" tab. Here, after reloading the page, we will see a report on safe and dangerous resources and, accordingly, we will be able to take further measures to eliminate the identified deficiencies:

Audits tab

Finally, to top it all off, Google Chrome can give us practical tips to improve the website's performance. To do this, go to the "Audits" tab, start testing and wait for it to complete. Based on the audit results, charts and specific recommendations for further page optimization will be generated:

conclusions

Google Chrome provides the user with a pretty good set of developer tools. It has almost everything you might need to inspect and optimize web pages. At your disposal are tools for editing HTML code, managing styles, and even complete control over scripts. In addition, in Chrome DevTools you will find tools for testing site performance, which will allow you to identify ways for further optimization.

And all this does not require installing any additional programs or extensions. Although, some extensions can add their own tools to the already rich arsenal of Chrome. If you master at least half of what DevTools provides, you can significantly increase your productivity and improve the quality of the web pages you create!

P.S. Permission is granted to freely copy and quote this article, provided that an open active link to the source is indicated and the authorship of Ruslan Tertyshny is preserved.

May 6, 2015 / Frontend

Styling dev tools in Google Chrome

Just recently I found out that Chrome supports themes for dev tools. I immediately wanted to try this. I’ll say right away that I wasn’t entirely pleased with the result :-)

Preparation

In order to install the theme for dev tools, you need to enable experimental features. To do this, enter chrome://flags/#enable-devtools-experiments in the Google Chrome address bar. Near the point Enable Developer Tools experiments click Enable. Now restart your browser (there should be a button at the bottom).

Open developer tools (cmd + shif + i / F12), go to settings (gear icon), go to the tab Experiments and check the box next to “Allow custom UI themes”.
Now you can safely install themes from the store.

Finding and installing themes

You can find themes in the Google Chrome store. Search for dev themes. But this is not very convenient; almost all themes are collected on the website devthemez.com. And there are also topics for dev tools.

Now go to the store, select the theme we need and install it. Now when you open Developer Tools you will see your theme.

Now a little about the unpleasant. Themes often look poor. There is also a problem with getting used to it. For example, I’m used to the fact that if the number in the console is blue, it’s Number, and if it’s red, it’s String. But each topic has its own colors, and it becomes more difficult to navigate them.

In recent years, the Google Chrome browser has become the most popular among both ordinary Internet users and users involved in web development.

In six weeks, Chrome has undergone several key releases, and the system itself is constantly updated with new developer tools, thanks to which the browser has acquired a very flexible system of settings. Many people have long become familiar with all the browser's functions, for example, with the live CSS editing function, using the console, as well as the debugger. This article is intended to demonstrate the eleven main tricks and worthwhile tips that can improve the performance level of the entire system and make working with the browser as comfortable as possible.

If you've ever used the Sublime Text feature, then you probably always need the Go to anything option. The developers note that a similar function for those who actively use Idea may have a different name - “Search Everywhere”, and you can call it by simply pressing the “Shift” key twice.

The good news is that a function of this kind is in the developer toolkit. To activate it, you need to hold down the combination of two keys Ctrl and P (if you use an Apple Mac, you will have to hold down Cmd and P) while the PR is presented to your attention in order to quickly search and open any file in the project you are using .

Performing a search in source type code

However, what if the search needs to be done in the source type code? To search in each file that was downloaded on the browser page itself, you will have to hold down three keys: Ctrl, Shift and F - for the Windows operating system; Cmd, Opt and F. This search technique is capable of supporting regular expression searches.

After opening the file you need in a special “Sources” tab, the full developer toolkit will allow the user to navigate to a line of absolutely any type for a given file. In order for this procedure to be implemented, you will have to hold down the Ctrl and G keys – for Windows software; Cmd and L if you are using an Apple Mac. After that, enter the number that the line has.

You can also use an additional method by pressing the combination of two keys Ctrl and O, however, you will not have to enter text to search, but enter a colon, and then the number that the line has. The user can also take the procedure much further. You need to enter the file name, as well as the number, using a colon as a division sign between individual values. In this case, the file name can be entered with an abbreviation.

Fetching DOM elements when using the console

The console, which is responsible for the developer tools, can easily support some useful functions, as well as variables to fetch the DOM:

is equivalent to document.querySelector(). Can return the first element that exactly matches the CSS selector data. Let's say $(DIV) - can implement returning the first DIV element directly in the main page area.
$$() is the equivalent value to document.querySelectorAll(). The option is capable of returning the entire list with elements (this list is called NodeList). Almost every element is in full compliance with the CSS selector.
$0-$4 - These values save the history of those DOM elements that belonged to the last five. You selected them in the special “Elements” tab, and here the value $0 appears as the most recent one.

How to use multiple carets and selections

While editing the file, you have the opportunity to install carriages. This can be done by holding down the Ctrl key and then clicking on the area that you need. Carriages can be installed at one time in several places.

When this parameter is activated on the console tab, each individual result will be saved. The data will not be cleared the next time the page is launched in the browser. Such a system brings a lot of convenience to working with the system, especially when you need to check the full history of errors that occurred before you leave the page.

Improvement of sources that have been minimized

Chrome Developer Tools has an integrated “prettener” for those source codes that have been minimized to make them easier to read. The button itself is located at the very bottom left of the file that is currently open (special “Sources” tab).

How to use device mode

The developer toolkit has the ability to use a powerful mode, which is designed to work on creating pages that are optimized for smartphones and tablets. If you type information regarding this issue into a Google search engine, you can easily find a video where the developers demonstrate most of the auxiliary functionality, for example, enlarging the screen format, implementing touch screen touch emulation, and the ability to emulate a low-quality Internet connection.

How are device sensors emulated?

The system boasts such an important feature of the instrument mode as imitation of special sensors of portable devices (accelerometers and touch screens are examples). You can also specify geographic coordinates. Usually the object itself is located in the “Elements” tab at the very bottom, where the “Emulation” tab is located, and then “Sensors”.

When choosing a color while working with the style editor, you have the opportunity to click on the color swatch, and after that a window will appear where the user can select the color shade he needs. While the window remains in active mode, your mouse pointer becomes a magnifying glass to make it easier to select a color. The entire procedure is carried out clearly and quickly.

Force element state mode

The development toolkit provides the ability to induce DOM element CSS states. As an example, :hover and :focus could be used. At the same time, writing their styles is simplified. This kind of feature may be available in accessible mode where the CSS editor is located.

Google Chrome includes a huge set of functionality for testing websites by a web developer. The developer panel opens by pressing F12:

Elements

Before us is our HTML tree of the site, divided into sections. The layout of the internal content may differ, in this case I divided it into 2 columns, where on the left is the HTML tree, and on the right is the CSS properties of the selected element (tag or tag, both options apply). Changing the HTML tree is quite simple, select 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 your mouse over this tag, the area of this tag will be highlighted on the screen, where padding and margin are marked in orange and green. I also want to note one important feature: if the developer makes a mistake and does not apply clear:both after float:left, which disrupts the layout, then 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 2 ways. Method one - in front of Elements in the menu there are 2 icons, the second of which is to transfer the site to the mobile version (you don’t even need to buy a phone, everything is already visible to the layout designer), and the first is to select an element on the page. It is enough to click on the first button, select the desired block and left-click on it, this way we will open this particular tag for adjustment. The second method, which is faster, is to immediately right-click on the desired section of the site and select “View code”.

Having selected the desired tag, we can easily adjust it to the form we need. I would like to note that this is how I always adjust the layout, I simply take the necessary tags and change their properties in the browser, and when I settle on the last option I like, I copy the result into my html and css. Now let's talk about the right column - styles and computed. computed - the final version of all styles applied to the tag. Remember, I said that the browser by default has a list of properties for the tag, and we only change them to the ones we need, so here is this very list of the final version, that is, along with the properties we changed. If you look carefully, you can replace the interesting feature that almost all tags have the same properties with different values, and this suggests that almost the entire site can be laid out using only 1 or 2 tags, which seems absurd, but possible :) In the first column, Styles, the styles we changed (our style sheets) are indicated. In this tab, we can change the influence of styles both on this tag by working in the element.style block, and change the id and class for all elements on the site.

So, a practical task, create 3 columns using float:left with the content of an image + text with one class. Next, through the developer panel, add frames, adjust the distance between blocks and text using internal and external margins (changing class properties), change the color of the text in each block to your own color (here element.style). This will be quite enough, although you can experiment for yourself by changing the code of other sites in this way. But remember the most important thing, you do not change real html and css files, but only temporary ones for this particular page, and as soon as you refresh the page, all your settings will be lost!

Console

Without it, life is not sweet for any programmer :) Absolutely all WARNING and ERROR are recorded in this block. Make sure that all errors are displayed by checking 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", but knowing you, my students... :)
Logs are saved within this page from the moment the console is opened, and not from the page loading. Therefore, if you load the page and then open the console, you will not see any errors, although there are errors on the page! Therefore, first we open the console, and then reload this page! Now, to the right of the error, the file on which the error occurred and even the line itself will be indicated. I would like to note that the console also receives errors from various installed plugins and extensions for Google Chrome, including viruses (they are also registered as a plugin or extension), and also when Ajax and other external scripts are running, line 1 or 0 may be indicated in the executable file, and not the line from where this AJAX was executed. This is worth taking into account!

When working with JavaScript, we can encounter the fact that when clicked, a redirection 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 the console is empty. The solution is extremely simple, check the Preserve Log box, and then the logs will not be cleared after reloading or redirecting the page. If you forget about this feature, you will spend half a year looking for a mistake :)

I won’t write about the fact that our notes get into the console from console.log, you already know this from the general course :)

Sources and Network

A great way to monitor all incoming and outgoing requests and their execution results. In the Sources tab we can see all the additional files loaded, namely pictures and scripts. The easiest way is to get the image you need, look at its size, and save it to your computer. You can also open JavaScript files there. By right-clicking on the desired file, you can select “Open link in new tab”, and save the file from the new page by pressing the combination ctrl+s. Agree, it’s convenient :)

Network has more complex functionality, there 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; overview (the corresponding icon with graphs) may be turned on, which I usually turn off. In the left column we have requests, in the right we have answers. At the same time, the answers are also divided into subsections. The first request always goes to the executing file (the url is indicated), if you close the right column, you can see the details of the request, namely: the request method, how long it took to execute (which will indicate how well the network and site work, the size of the file. By closing the right The column can be reopened by re-clicking on the file of interest to us for analysis.

In the header tab we have the type of our request (file, method, ip and response status), Response header and Request header. Request header is what your browser sends to the server, it not only requests a page, it also sends existing cookies, the preferred language of the page, whether gzip compression allows files, the full name and version of the browser, and the page from where it sends the request . I would like to note that when you study CURL in PHP in the future, you can also send all this data! The Response section contains the response headers. Remember the theory of how PHP works, the sent data is divided into 2 blocks, first the headers are sent, then the content, when the content is sent, then the headers cannot be sent. In the headers, the server sends cookies, if they need to be changed, the page encoding, the server version (which is a vulnerability and must be hidden, as is done on the site site, ya.ru, google.ru, etc.), file date (for the purpose of do not download it again if no changes have occurred since the last time the browser was used).

I want to dwell on the file update date in more detail; it happens that although the file has been changed, the browser still does not check its version, it simply loads the old version saved in the cache. To clear the client's browser cache, just change the file name from scripts.js?v=1 to scripts.js?v=2. As you can see, we only changed the data sent by GET, and almost everyone will have a new script loaded (not 100%, but quite acceptable for most sites). But after editing a comma in the script during development, it is not so convenient to run and change the html with the connection of this same js file, here another important checkbox “Disable cache” comes to the aid of the developer; if it is enabled, then all files will not be cached and new ones will be uploaded every time! We develop a site with this checkbox, and when downloading a new version of the scripts for all users, we only change the version?v=3.

Preview and Response

After the request, the server returns something to us, a human-friendly view will go to Preview, and the unformatted source will go to Response. Using the example of an image request, the picture itself will appear in the Preview tab, and the source code of the picture will be hidden for moral reasons, but if you requested HTML, JS, PHP files, then you should definitely look at the Response tab to make sure that there The content we requested and expect to see is back! When working with Ajax in Preview, we will receive a convenient view of the JSON response similar to the HTML tree in the Elements section, which will also simplify our site development.

Ajax and developer panel

When developing code with Ajax we do the following:
1) We write the code, attach an event to the button.
2) Open the developer panel and refresh the page.
3) We check that there are no errors, set Preserve log, since in case of redirection we need to intercept the error.
4) Click on the button that calls the Ajax request. Now, if there was no redirection, first look carefully at the Console tab and make sure that an error has occurred. The error can be of any kind, not only an incorrect response from the server, but also a typo in the code itself. If there is no error in the console, or it is not clear, such as, for example, line 0 or 1, then we continue to analyze the Network tab.
5) In the Network tab, we make sure that the request was sent to the correct URL, the response status is 200, not 404, we analyze the request itself, that is, open the Response tab and look carefully to see if the file sent us is the correct answer, exactly the one we expect, or the response contains garbage in the form of unnecessary code, errors, etc. If you understand what response you expect from the server, then you can easily compare what you expected with reality, see the error and correct it!

P.S. I wish all my guests successful programming, and I demand from my students a perfect understanding of what I have written here. And if I ever ask you whether an AJAX request was sent to the server and what response came, then you must give me the correct answer, and not blink your eyes like a “blonde”. :)
This article will be further developed in the future, perhaps!