If evaluating the effectiveness of content on the application page in the store is a dark forest for you, pay attention to the Google Play Developers Console. I will tell you how to work with this tool.

What is the Google Play Developers Console?

After the apk file of your application is ready, it must be added to the Google Play app store.

The number of new users is not equal to the number of installs in the same period.

There are two criteria available in the report: data by traffic source and data by country. You can generate a report for a day, a week, or a month; unfortunately, you cannot choose a period arbitrarily.

The report is presented in the form of a funnel.

1. Unique visitors to the app store page.
2. The number of users who installed the app after viewing.
3. The number of buyers.
4. Repeat buyers.

The data is generated in the form of a cohort, that is, only those users who visited the page and installed the application during this period of time will be included in the report for the selected time range. We wrote about what cohort analysis is and why it is important for marketing research.

The Play Store metric is the results of your ASO, i.e. the results of page optimization and its indexing in the app store.

In essence, these are unique users who landed on your app page as a result of searching or viewing apps in the Play Store.

3. Section "Ratings and reviews"

The "Ratings" subsection is a report that allows you to see the dynamics of ratings by day, week, month and evaluate how users perceived the introduction of a new feature.

“Reviews” is a field for the activity of your reputation manager, SMM specialist or any other person who is responsible for communication with users who write requests/complaints to you in reviews in the store.

In this section, the Google Play Developers Console system voluntarily-compulsorily asks you for something and shows what you have already done. For example, add screenshots for tablets if your application supports such devices.

5. Section "Data for Google Play"

This section complements the previous report as it shows what is displayed on the store page - language, short description, long description, icon, graphics.

It is highly desirable to add a promotional video to the Google Play page, as this affects the attractiveness of your page for the store and the user.

conclusions

Google Play Developers Console is a tool that can and should be used when marketing a mobile app. Having understood the Google Play Developers Console, you will understand:

• how the store perceives your application;
• how the store shows the effectiveness of your content on the app page.

In fact, this is an important link between the product developer and its users.

The first illustration is a photo of Freddie Fabrice from The Renaissance Series project.

Modern browsers provide built-in development tools for JavaScript and other technologies. These tools include a console that looks like a shell interface, as well as tools for inspecting the DOM, debugging, and analyzing network activity.

The console can be used to log information as part of the JavaScript development process. The console also allows you to interact with a web page by executing JavaScript expressions in the context of the page. In essence, the console provides the ability to write JavaScript code and manage it if necessary.

This tutorial will teach you how to use the JavaScript console in your browser and introduce you to other built-in development tools that you might find useful.

Working with the JavaScript Console in the Browser

Most modern web browsers that support HTML and XHTML provide access to the developer console by default, where you can work with JavaScript in a terminal shell-like interface. In this section, you will learn how to access the console in Firefox and Chrome.

Firefox browser

These tools allow you to inspect and edit DOM elements, as well as look up HTML objects associated with a particular page. The DOM can indicate whether a piece of text or image has an ID attribute, and can determine the value of that attribute.

In addition, in the sidebar or below the DOM panel, you can find CSS styles that are used in an HTML document or style sheet.

To edit the DOM in real time, double click on the selected element. For example, you can try to turn the tag

in

.

Again, after the refresh, the page will return to its previous form.

Network Tab

The Network tab allows you to monitor and record network requests. This tab shows the browser's network requests, including requests to load a page, request service times, and details about each request. You can use this data to optimize page load performance and debug queries.

You can use the Network tab along with the JavaScript console. For example, you can start debugging a page using the console, and then open the Network tab and view network activity without reloading the page.

Responsive Design

Responsive websites quickly adapt their look and feel to different devices: mobile phones, tablets, desktops and laptops. Screen size, pixel density, and response to touch are factors to consider when designing responsive websites. It is also important to consider the principles of responsive design in order for the website to be accessible and productive, regardless of the device on which it is opened.

Modern browsers (including Firefox and Chrome) provide models for adhering to responsive design principles when developing websites and applications. These models emulate the behavior of a particular device, which allows you to test and analyze all the functions of the site.

You can learn more about this in the browser manuals:

• Responsive Design Mode in Firefox

Conclusion

This guide provides a brief overview of working with the JavaScript console in modern web browsers. You can also find information about other useful development tools here.

If you are a fan of computer games, then you have most likely heard that there is some kind of developer console. But what is it? How to use it? It turns out that it exists not only in computer games: for example, it can be found in every Internet browser. And it can be incredibly useful not only for developers, for whom it was originally intended. In this article, you will learn, the developer, what you can do with it, as well as what benefits it can bring to gamers.

What it is?

So, first of all, of course, it is worth talking about what the developer console is in general. This is a special tool designed, respectively, for software developers. When you call such a console, you have the opportunity to enter certain commands that greatly expand your capabilities. Therefore, for its competent use, you need to know exactly how to call it, how to use it, as well as what commands you can write there and what actions to perform. At first glance, it may seem that the developer console is a fairly simple tool to use, but in reality it is not. You will need a lot of practice to master the console and quickly get the result you want. But what should be the result?

It's time to talk about why the developer console exists at all. Its main purpose is to debug software that has been created by a programmer. This means that by using this console you will be able to find and fix bugs in the program, as well as make the program do what you want to check absolutely every aspect of it before releasing it for sale. Accordingly, this console plays a very important role in the work of a software specialist.

Most often, you can encounter such a console in computer games and Internet browsers, and it is about them that we will discuss later in our article. First, you will learn how to open the developer console in an Internet browser, and understand what this can give you, and then you will understand how important it is to be in a computer game.

How to open console in browser?

Naturally, you are looking forward to the moment when you can find out why you need this console in the Internet browser that you use on a daily basis, but first it is worth studying exactly how it opens. It turns out that it is available in all browsers and opens the same way almost everywhere. This is done either with a combination of the keys Ctrl, Shift and I, or by pressing a single F12 key. You should try to open the console yourself, and when you succeed, you can proceed to further reading of the article.

What does the browser console give?

When you bring up the browser console on the screen, you may at first be surprised by everything you see. The fact is that the console is a very multifunctional tool, and you will be offered a wide variety of functions. For example, you can view the entire code of the page, peek into each element, see its styles, and even the JavaScript used for each of the elements you are interested in. Every web developer who has been creating websites for at least a couple of months knows about such a console and actively uses it, because there you can even track errors in the code and try to fix them. Or you can try changing the styles and content and see what it looks like before making any final changes. However, this console can also be useful to ordinary users due to its versatility, but this does not happen so often. In computer games, you can use the developer console much more often. The Witcher 3, Minecraft, Contra, and many other popular games have consoles that you can use, and that's what we'll talk about next.

Console in computer games

Everyone knows about the existence of cheats in many computer games that you can enter in order to get special features. Why remember cheats now? The fact is that in some cases the developer console plays the role of cheats, as it opens up new opportunities for you that are not provided by the game itself. But how does such a console end up in games? Just like in any software! After all, games are also programs, they were created in the same way by programmers, using all the tools available to them. So they used the console to test all the features and functions of the game before announcing that it was finished. In some cases, developers leave the console in the game as a bonus, in others they close access to it so that players do not enjoy advanced features. Both cases will be discussed next.

Using the console in games

One of the clearest examples of a computer game that has direct access to the developer's console is Contra. This team shooter today is an exemplary example in its genre. And with the help of the console, you can change the color, size and shape of the sight here, add bots, and change many other functions. Some of them are allowed everywhere, while others are prohibited, so you can only use them if you create a game and activate the use of cheats through the console. The developer console works in much the same way in Minecraft and many other popular games.

Modifications

However, not all games have developers leave access to the developer console. The Witcher (version 1.31) 3 is the clearest example of how the game developers, using the functions of this tool to test and debug the game, completely closed access to it. Fortunately, there were people who were able to restore this access and released a special modification, by downloading which and installing it on your computer, you can use the developer console, which will greatly expand your capabilities.

How to use the developer console to turn Google Chrome into a kind of text editor? What is the meaning of the icon familiar to many from jQuery $ ? How to output to the console a set of values, designed as a quite decent table? If the answers to these questions do not come to mind right away, then the tab Console of the Chrome developer tools has not yet been revealed to you in all its glory.

At first glance, we have before us a completely ordinary JavaScript console, which is only suitable for displaying server response logs or variable values ​​into it. By the way, I used it that way when I first started programming. However, over time, I gained experience, learned a little, and unexpectedly discovered that the Chrome console can do a lot of things that I had no idea about. I want to talk about it today. Yes, if you are not currently reading on a mobile phone, you can immediately try all this.

1. Selecting DOM elements

If you're familiar with jQuery, it's not for me to tell you about the importance of constructs like $('.class') and $('id'). For those who are not in the know, let me explain that they allow you to select DOM elements by specifying the classes and identifiers assigned to them. The developer console has similar functionality. Here "$", however, has nothing to do with jQuery, although it does, in essence, the same thing. This is an alias for the function document.querySelector().

View Commands $('tagName'), $('.class'), $('#id') and $('.class #id') return the first DOM element that matches the selector. At the same time, if jQuery is available in the document, its “$” will override this functionality of the console.

There is another design here: $$ . Its usage looks like $$('tagName') or $$('.class'). It allows you to select all DOM elements that match a selector and put them in an array. Working with it is no different from other arrays. To select a specific element, you can refer to it by index.

For example, the command $$('.className') will give us an array of all page elements with the class name specified when it was called. Teams $$('.className') and $$('.className') will give access, respectively, to the first and second element of the resulting array.

Team experiments $ and $$

2. Turning the browser into a text editor

Have you ever caught yourself thinking that it would be nice to edit the text of the web page you are debugging right in the browser? If yes, then you will like the command shown below.

document.body.contentEditable=true

After its execution in the console, the document opened in the browser can be edited without the need to search for the desired fragment in the HTML code.

3. Search for event handlers bound to the element

While debugging, you may want to find event handlers attached to elements. Using the console to do this is very simple. It is enough to use this command:

GetEventListeners($('selector'))

As a result of its execution, an array of objects will be returned containing a list of events to which the element can respond.

Event handlers

In order to find a handler for a specific event, you can use the following construct:

GetEventListeners($('selector')).eventName.listener

This command will print the code of the event handler function. Here eventName is an array that contains all events of a particular type. For example, in practice it might look like this:

GetEventListeners($('#firstName')).click.listener

As a result, we will get the code of the function associated with the event click element with id firstName.

4. Event monitoring

If you want to observe the occurrence of events bound to a particular DOM element, the console will help you with this. Here are some commands that can be used to monitor events.

• Team monitorEvents($('selector')) allows you to organize monitoring of all events associated with the element that the selector matches. When an event occurs, a record is made in the console. For example, the command monitorEvents($('#firstName')) will allow logging all events associated with the element whose ID is - firstName.
• Team monitorEvents($('selector'),'eventName') similar to the previous one, but it is aimed at a specific event. Here, in addition to the element selector, the name of the event is also passed to the function. Such a command will allow you to display data on the occurrence of a single event in the console. For example, the command monitorEvents($('#firstName'),'click') will display information only on the event click element with id firstName.
• Team monitorEvents($('selector'),['eventName1','eventName3",….]) allows you to monitor multiple selected events. Here, a string array is passed to the function, which contains the names of the events. For example, this command: monitorEvents($('#firstName'),['click','focus']) will output to the console information about events click and focus for element with id firstName.
• Team unmonitorEvents($('selector')) allows you to stop monitoring and logging events in the console.

5. Measuring the execution time of a piece of code

The view function is available in the Chrome console console time('labelName'), which takes a label as an argument and starts a timer. Another function console.timeEnd('labelName'), stops the timer assigned to the label passed to it. Here is an example of using these functions:

Console.time("myTime"); //Starts the timer labeled myTime console.timeEnd("myTime"); //Stops the timer labeled myTime //Output: myTime:123.00 ms

The above example allows you to find out the time between starting and stopping the timer. The same can be done inside a JavaScript program and find the execution time of a piece of code.

Let's say I need to find out the duration of the execution of a loop. You can do it like this:

Console.time("myTime"); // Starts the timer labeled myTime for(var i=0; i< 100000; i++){ 2+4+5; } console.timeEnd("mytime"); // Останавливает таймер с меткой myTime //Вывод - myTime:12345.00 ms

6. Displaying the values ​​of variables in the form of tables

Suppose we have an array of objects like this:

Var myArray=[(a:1,b:2,c:3),(a:1,b:2,c:3,d:4),(k:11,f:22),(a:1 ,b:2,c:3)]

If you display it in the console, you get a hierarchical structure in the form of, in fact, an array of objects. This is a useful feature, the branches of the structure can be expanded by viewing the contents of objects. However, with this approach it is difficult to understand, for example, how the properties of similar elements correlate. In order to make it more convenient to work with such data, they can be converted to a tabular form. For this, the following command is used:

Console.table(variableName)

It allows you to display a variable and all its properties in the form of a table. Here's what it looks like.

Displaying an array of objects as a table

7. View element code

You can quickly jump to the element code from the console using the following commands:

• Team inspect($('selector')) allows you to open the code of the element corresponding to the selector in the panel Elements Google Chrome Developer Tools. For example, the command inspect($('#firstName')) will allow you to view the code of the element with the ID firstName. Team inspect($$('a')) will open the code of the fourth link, which is present in the DOM.
• View Commands $0 , $1 , $2 allow you to quickly navigate to recently viewed items. For example, $0 will open the code of the most recently viewed element, and so on.

8. Displaying the list of element properties

If you need to view the list of properties of an element, the console will help with this as well. The following command is used here:

dir($('selector'))

It returns an object containing the properties associated with the given DOM element. As in other similar cases, the contents of this object can be explored by viewing its tree structure.

9. Calling the last received result

The console can be used as a calculator, everyone probably knows this. But the fact that it has built-in tools that allow you to use the results of previous calculations in commands is known to few. With the help of construction $_ you can retrieve the result of the previous expression from memory. Here's what it looks like:

2+3+4 9 //- The sum result is 9 $_ 9 // The last result is displayed $_ * $_ 81 // Since the last result is 9, we get 81 Math.sqrt($_) 9 // Square root from the last result, which was 81 $_ 9 // Again we get 9 - the result of the previous calculation

10. Clearing the console and memory

If you need to clear the console and memory, use this simple command:

After pressing Enter, a clean console will be ready for new experiments.
That's all.

11, 12, 13, 14…

Frankly, this is far from everything. I showed only some of the non-obvious features of the Google Chrome console. In fact, there are many more of them. I'm sure you can expand my list with your own finds.

I hope my story helped you learn something useful about the Chrome console, saving time, worthy of becoming part of the everyday web programmer's arsenal.