The smartphone market does not stop growing. Even Google rewards all “web friendly” pages within its search engine results. For this reason, more and more websites are optimized to open correctly on all types of mobile devices, even leaving aside the desktop versions, or limiting some functions or some content within them. Web browsers, such as Google Chrome, detect where we are loading a website from (a PC, a mobile phone, a tablet, etc.), and request the corresponding version from the server. But luckily it is very easy to fool the server.
When we use the web browser, we are generally used to typing a URL in it, or directly making a query in the search engine, and waiting for the results. But do we really know everything that goes on underneath when we do this?
The Chrome Developer Console
All web browsers, especially Chrome, have all kinds of functions and tools for all users. One of them is the development console. As its name suggests, this is a console designed so that web designers can see how their website works, know in detail everything that happens on the frontend, and test different changes and adjustments on the page “on the fly”.
We can open this console at any time by simply pressing the F12 key on our keyboard. We can also open this console by clicking the right mouse button anywhere on a page and choosing the “option Inspect “, or the keyboard shortcut Control + Shift + I. This will open (by default, although we can change it) in the right part of the window, and from there we will be able to see a large number of options.
We will be able to see the complete HTML of the page that we have open, all the elements that form it, each and every one of the connections that are made with the server, the performance of the page, the memory it consumes.
Absolutely everything that is related with the web.We can add elements to the code, modify any point on the page, eliminate content that does not interest us, see errors, detect possible bottlenecks or problems that may negatively affect the SEO of the web, the possibilities are endless. We can even inject code directly into the page from your console to see how it responds.
Of course, we must bear in mind that the changes we make from this console are local. We are not hacking the website in question, nor are we saving any changes. To reload the page again, we simply have to press F5 to update it, and it will return to its original state.To close the console we can use the F12 key again, or simply click on the close button that we find in the upper right part of this development console.
Change the display type of a website
One of the most interesting tools that we can find within this development console is the possibility of changing the type of device that simulates the loading of the page. By default, Chrome will use the properties of our PC (that is, indicate to the server that we are a computer and, depending on the resolution and proportion of the screen, it will show the corresponding page) to display the page.
But, if the web is responsive, this can change.To do this, what we will do is open the development tools that we have just seen in the previous point, and we will look at a small icon that appears in the upper left part of that section.
This icon will allow us to quickly change the type of view of the web browser. As soon as we click on it, we will be able to see how the size of the page changes, and the way in which the elements are loaded. If it doesn’t, we may have to press F5 to reload.
At the top we can see a bar from which we can change various aspects of this mobile view. For example, we can simulate how the web would look on a specific device, or adjust the zoom levels. We can also manually specify the dimensions of the screen, in pixels, if none of the options that come by default adapt to what we are looking for.
A very interesting button that we can also find is the one that allows us to rotate the computer screen. So we can see how the web would look when users play it in landscape mode.
When we have done the tests we want, we can simply exit this mode by closing the developer console. Again, we may need to refresh the page for it to display correctly again.
Extensions for Chrome
In addition to using the developer console, we will also be able to do the same using some extensions that we can find completely free in the Chrome Store. Some of the best are as follows:
Mobile View Switcher
This extension allows us to switch between the normal view and the mobile view with one click. When installing it, it creates an icon in the toolbar, which acts as a switch depending on whether we want to have it activated or deactivated. By default it simulates an iOS 14 system, but we can modify it and adjust the extension to our liking.
Responsive Viewer
Another very useful tool for developers to check how well their responsive websites are working. This allows us to see several screens, of different sizes, at the same time. In this way we can have several configurations in view and check that everything looks correctly and does not give problems in any type of device.
Mobile simulator for Chrome
This tool allows us to simulate a large number of real devices (5 Android models, 15 Apple, 4 tablets and 4 special devices) to be able to see how the pages appear depending on the CSS that is being requested according to the size of the screen each.
Responsive Web Design Tester
Finally, this extension, although less known, allows us to thoroughly test how responsive views of a website work based on several different parameters. It allows us to test with various mobiles, including by default the most common resolutions and proportions. In addition, this extension sends the appropriate User-Agent to the server so that the results are more accurate. It even works offline, something not all extensions do.
