While complete emulation of mobile devices on Chrome is impossible, Device Mode does make your life easier. First of all, click the little smartphone pictogram shown in the top-left corner of the Developer Tools screen. Chrome will adapt the view in a fashion similar to the one shown in the figure.
The combo boxes at the top of the screen enable you to pick various commonly used devices ranging from the old Samsung Galaxy S5 to more recent products such as the iPhone X. Bear in mind that this feature does not switch the actual rendering engine. The browser does its magic purely by adjusting viewport co-ordinates. This limitation also applies to screen rotation, which you enable via the Rotate pictogram in the toolbar.
Mobile apps usually use sensor data. Chrome can emulate these – open the Developer Tools hamburger menu. Next, select More Tools > Sensors. The Console window takes up an additional pane with sensor settings. They provide access to geolocation, accelerometer and advanced touch input.
For completeness sake, let us reiterate that desktop tests can’t replace ‘acceptance runs’ on a handset. Mobile applications live and die by their haptics, which are completely different from those found on a PC.
As of this writing, Google has not ‘unified’ the various aspects of device mode. The various functions (described in detail here) might get a new user interface in the future – stay tuned for small changes in this regard.
What is console?
Simply sending out logging information via console.log reeks of the 1990s. Why not use some advanced features instead? One of the defining features of Android is LogCat – developers can emit logging messages with various levels of severity. Chrome also supports this feature. Simply use one of the following methods:
console.debug() == console.log()
console.info()
console.warn()
console.error()
Chrome’s console is not limited to displaying information. You can also interact with the content of your website in a fashion not dissimilar to PowerShell or BASH. When working on code, be careful to look at the combo box at the top of the screen.
It let’s you select where JavaScript will run – many types of content live in their own iframe. They cannot be reached by code entered into the top execution context. Once the right execution area is selected, changing the content of elements is as easy as entering a single command:
document.getElementById('changeMyText').
textContent = 'Hello'
Chrome’s console tends to flood once projects get complex. This is addressed by collating similar messages. Click a button five times, and emit the same message each time – it will show up once. Disable this by opening Settings > General. Then, check the Show Timestamps option. Alternatively, introduce tags and use the Filter feature.
Advanced analysis
Finding coding errors is but part of the game. As applications become more complex, memory, performance and network consumption problems arise. Chrome assists you in addressing these problems, thanks to a complete set of advanced analysis features for tracking down performance problems.
The browser provides analysers not dissimilar to profilers found in embedded operating systems. For example, the memory analyser provides an overview of which part of your code allocates memory. This information enables targeted optimisations; ‘hacking away’ at code tends to be unproductive.
Opening the Performance tab lets you slow down both Network and CPU – this way, your workstation simulates slower computers. Combine this with the time-consumption analysis shown in the figure accompanying this step to get a 360-degree view of application performance. There's plenty more to learn about this subject, and this overview provides an excellent introduction to advanced debugging functionalities.
Next page: Get started with Material Design
