How to simulate mobile devices in device mode in Chrome

From the Author: Webpack is a JavaScript module bundler that transforms web resources such as HTML, CSS, JavaScript, and SVG files and bundles them into a smaller group of files.  Webpack also helps with chunking (splitting into smaller chunks) and managing code dependencies to ensure that the code that needs to be loaded first does this.  How webpack works In this article, we'll go over some of the new features to look out for in webpack in 2021, but first we'll look at what's new in webpack in 2020.  webpack V4 - V5: Important Changes In October 2020, a newer version of webpack was released: webpack 5. This version removes all deprecated elements in V4 and fixes critical bugs to bring the webpack architecture up to par for future improvements.  JavaScript.  Quick Start Learn the basics of JavaScript with a hands-on example of building a web application Learn more Other interesting features in version 5: Long-Term Caching Support - New algorithms to support long-term caching are enabled by default in production mode.  The real hash of the content - previously only the hash of the internal structure was used in webpack.  Webpack 5 will use the real hash of the file content when used [contenthash], which will have a positive effect on long-term caching when only small changes are made to the file.  Modular structure - webpack 5 came with a new feature that allows multiple webpack builds to work together.  See here for the complete changelog.  While 2020 has been a big year for webpack, there is still a lot more to come, which we'll talk about in the following sections.  Please note that these updates are subject to change based on the ever-changing world of web developers.  Webpack roadmap 2021 Improved ESM support Since the ECMAScript Module (ESM) was introduced in 2015, it has become the standard mechanism for code reuse in highly fragmented JavaScript applications.  To improve ESM support, the webpack team is planning to make some important updates.  Self-executing snippets One of the most interesting features of webpack is code splitting.  This feature allows you to split your code into multiple packages that you can download on demand or in parallel.  At the moment, dynamically loaded fragments in webpack usually serve as a container for modules and never execute module code directly.  For example, writing: JavaScript import ("./ module") 1 import ("./ module") Will compile like this: JavaScript __webpack_load_chunk __ ("chunk-containing-module.js"). Then (() => __webpack_require __ (" ./module ")) 1 __webpack_load_chunk __ (" chunk-containing-module.js "). then (() => __webpack_require __ (" ./ module ")) In most cases this cannot be changed, but the webpack command considers some cases where webpack could generate a block that directly executes the contained module.  This can result in less code generated.  ESM imports and exports While there is already a plugin for generating ESM exports, the webpack team is considering adding built-in support for this feature, which may be useful when you decide to integrate webpack packages into ESM boot environments or inline scripts.  JavaScript.  Quick Start Learn the basics of JavaScript with a hands-on example of building a web application Learn More The command also takes absolute URLs into account when importing.  This is very useful when using external services that offer their APIs as EcmaScript modules.  Here's an example: JavaScript import {event} from "https://analytics.company.com/api/v1.js" // Changes to: import ("https://analytics.company.com/api/v1.js" ) 12345 import {event} from "https://analytics.company.com/api/v1.js" // Changes to: import ("https://analytics.company.com/api/v1.js") Such the function will help to gracefully handle errors with external dependencies.  ESM Library The webpack team will also try to improve the bundling using the ESM libraries and will add a special mode that does not apply chunking, but instead generates rendered modules that can be plugged in via ESM imports and exports.  This means that as long as loaders, graphics modules, and resource optimizers are running, no fragment graphs will be created.  Instead, each module in the modules graph will be released as a separate file.  Strict Mode Caveats Sooner or later, the webpack team plans to ensure that all contained code is put into strict mode when the ESM package is created.  While this may not be a problem for many modules, there are a few older packages that may have problems with different interpretations, so it would be nice to see warnings for them.  SourceMap Performance SourceMap provides a way to map code in a compressed file back to its original position in the original file.  In other words, it links the minified version of the resource (CSS or JavaScript) to the original authoring version.  This utility helps you debug applications even after resources have been compressed / optimized.  Using SourceMap in webpack is currently quite expensive due to performance issues, so the webpack team will be looking to improve this in 2021.  They will also be looking to update / improve the terser plugin, which is the default webpack minifier in webpack 5. Package.json export / import field Node.js v14 came with support for an export field in package.json.  This feature allows you to directly define entry points for a package, or conditionally define entry points for each environment or JavaScript flavor (TypeScript, Elm, CoffeeScript, etc.).  In a later release, private imports were also supported in Node.js (similar to the export field in package.json).  For now, webpack 5 only supports the export function, even with additional conditions such as specifying production / development.  Import fields for private imports are another feature to look out for in 2021.  HMR for Modular Design Hot Module Replacement (HMR) works by replacing, adding, or removing modules while the application is still running, without the need for a complete reboot.  This can significantly speed up development by preserving application state that would have been lost on a hard reboot.  Plus, it instantly refreshes the page when changes are made to the source code, much like changing styles directly in the browser developer tools.  Webpack 5 ships with a new feature called “Module Federation”.  This feature allows you to integrate multiple assemblies together at runtime.  HMR currently only supports one assembly at a time and updates cannot move between assemblies.  The webpack team will work to improve the HMR updates to move between different builds, making it easier to develop federation apps.  Hint System To monitor errors and warnings, the webpack team is considering adding another category for the user: hint.  Similar to displaying errors and warnings, a tooltip notifies the user of information that may be of value to him.  However, unlike the previous categories, the prompt will identify optimization opportunities or tricks, not problems.  An example hint might look something like: "Did you know that when you add X a change to file Y, you can clean it up?";  or "Easy to encode the space with the space function."  WebAssembly According to the official documentation, WebAssembly (abbreviated Wasm) is "a binary instruction format for a stack-based virtual machine."  This means that you can build your software with programming languages ​​like Rust, C ++ and Python and provide it to the end user in a browser with near-native performance.  In the current version of webpack, WebAssembly is experimental and not enabled by default.  The default support is what the webpack team will hopefully add this year.  Conclusion There are big changes coming to webpack in 2021, and while this list may not be final, we can look forward to new features and capabilities that will make webpack easier and more efficient.  Author: Elijah Asaolu Source: blog.logrocket.com Editorial: The webformyself team.  JavaScript.  Quick Start Learn the basics of JavaScript with a hands-on example of building a web application Learn More Webpack.  The Basics Watch the Webpack Video!  Look

From the author: website testing is becoming more and more difficult. The days of testing functionality in a couple of browsers are long gone. Your app should be carefully evaluated on a variety of mobile, tablet and desktop devices with different OS, screen resolutions and capabilities. In extreme cases, this can take as long as the original development.

The process is further complicated by touch screens, hybrid devices and high density displays. If you write code on a regular PC using a mouse and keyboard, it is difficult to evaluate how your application will perform. Features such as mouse hover may not necessarily work and your application may become unusable. But how can you test your system during development and avoid the pitfalls of controlling and switching between multiple devices?

Fortunately, all modern browsers offer mobile emulation tools, and one of the best can be found in Chrome. This can help identify problems at an early stage, without leaving a comfortable computer and development environment.

Developer tools

Launch Chrome, go to the webpage you want to test, and open Developer Tools (Menu> Tools> Developer Tools, Cmd + Opt + I on macOS or F12 / Ctrl + Shift + I on Windows and Linux).

You can now enable the browser emulator by clicking the Toggle device toolbar icon in the upper left corner:

JavaScript. Fast start

Learn JavaScript basics with a hands-on example of building a web application

Learn more

How to simulate mobile devices in device mode in Chrome

A simulation of the device will now appear:

How to simulate mobile devices in device mode in Chrome

The emulated screen can be resized when the device type is set to Adaptive.

Touch Enabled Emulation

Hover your mouse over the device to see a circular “touch” cursor. It will respond to JavaScript touch events like touchstart, touchmove, and touchend. Mouse events and CSS effects should not be thrown.

Hold Shift then click and move the mouse to simulate scaling.

Mobile Device Emulator Toolbar

It’s worth taking some time to familiarize yourself with the toolbar and menu above the mobile emulator:

How to simulate mobile devices in device mode in Chrome

Standard controls:

device type

current resolution

scale (the screen can be enlarged or reduced to fit better into the emulator panel)

network speed

portrait / landscape toggle button

A three-dot menu allows you to show or hide additional controls:

device frame (if any, a picture of a phone or tablet)

CSS Media Query Panels

pixel ruler

add device pixel ratio

add device types

take a screenshot (including the device frame, if shown)

take a screenshot of the entire page

CSS Media Query Bars

Select Show Media Queries from the three-dot menu to see a graphical color-coded representation of all media queries specified in CSS.

How to simulate mobile devices in device mode in Chrome

BLUE: Maximum width queries.

GREEN: Width-oriented queries within a range.

ORANGE: Minimum width-oriented queries.

You can click any panel to set the emulator screen to the desired width.

Emulated device parameters

The drop-down menu on the left allows you to select a device. There are dozens of presets for popular smartphones and tablets, including iPhones, iPads, Kindles, Nexus tablets, Samsung Galaxy and so on.

JavaScript. Fast start

Learn JavaScript basics with a hands-on example of building a web application

Learn more

Not all devices are presented at once. Click Change … at the bottom of the device drop-down list, or click the gear icon of the DevTools Settings and select the Devices tab:

How to simulate mobile devices in device mode in Chrome

You can enable or disable devices or enter your own by defining:

name

such a classification as “Mobile” or “Tablet”.

browser user agent string

device resolution

and pixel ratio (for example, 2 for iPhone Retina screens, where the pixel density is twice the stated resolution of the viewport)

All browsers identify themselves with the user agent string sent in each HTTP header. This can be verified client-side or server-side and can be used to modify or provide a different user experience. As a last resort, the viewer will be redirected to another site. This method has always been imperfect, but has become largely redundant due to responsive web design techniques and has been unsustainable given the number of devices available on the market.

Modeling Bandwidth Adjustment

You can simulate the slow network speeds commonly seen when using mobile connections or slow Wi-Fi in hotels and airports! You can use this to keep your site or app loading quickly and staying responsive in all environments.

The throttling drop-down menu is available on the Network tab and on the Chrome device toolbar. You can set your own bandwidth configuration by clicking the DevTools Settings gear icon and selecting the Throttling tab:

How to simulate mobile devices in device mode in Chrome

Click Add your own profile, then enter:

profile name

incoming speed in kilobits per second

outgoing speed in kilobits per second

latency in milliseconds (typical latency when making a network request)

Emulated mobile sensors

Smartphones and tablets often have sensors such as GPS, gyroscopes, and accelerometers that are usually not found in desktop devices. They can be emulated in Chrome by choosing More Tools and then Gauges from the main three-dot Developer Tools menu:

How to simulate mobile devices in device mode in Chrome

A new panel will appear where you can define:

Current latitude and longitude, or select a major city from the drop-down list. You can also select Location Not Available to simulate how the app reacts when your device cannot receive a reliable GPS signal.

Orientation.

Sensory response.

Standby state to check how the app reacts to the lock screen.

Remote debugging on a real device

Finally, Chrome allows you to connect a real Android device via USB for remote debugging of the device. Enter the address bar and make sure the Detect USB devices checkbox is checked, then connect your phone or tablet and follow the instructions.

Chrome allows you to set up port forwarding so you can navigate to the web addresses of a local server on your device. Chrome’s preview pane shows a synced view of the device’s screen, and you can interact with either the device or Chrome itself.

You can use the full range of developer tools, including the Application tab, to test Progressive Web Applications offline. Note that, unlike a real application that requires HTTPS, Chrome allows PWAs to be launched from localhost over an HTTP connection.

Super! I don’t need any more devices!

The Chrome mobile browser emulator is useful and effective, but it does not replace the interaction with your website or application on a real device to evaluate a complete user experience.

You should also know that no device emulator is perfect. For example, Chrome shows a page view on an iPhone or iPad, but doesn’t try to mimic Safari’s standards support or features.

However, for quick and rough testing of mobile devices, Chrome device emulation is excellent. It’s much easier than switching between real smartphones and you have all the developer tools at your disposal. This saves a lot of time and effort.

Author: Craig buckler

A source: www.sitepoint.com

Editorial staff: Webformyself team.

Follow us on Telegram, VK, Yandex.Zen

JavaScript. Fast start

Learn JavaScript basics with a hands-on example of building a web application

Learn more

Bootstrap 4 framework. Quick start

Learn the basics of Bootstrap 4 with a hands-on example of how to design a blog from scratch!

Look

Leave a Reply

Your email address will not be published. Required fields are marked *