-
Notifications
You must be signed in to change notification settings - Fork 526
Replace "Geolocation" & "Orientation"articles by "Emulate device sensors (Sensors tool)" #3431
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 7 commits
Commits
Show all changes
15 commits
Select commit
Hold shift + click to select a range
fb8b76d
replace orient & geoloc articles by sensors article
mikehoffms c0a0bca
copy redirects from workspace PR
mikehoffms 333f660
linkfix
mikehoffms f286e1f
Merge branch 'main' into user/mikehoffms/sensors2
mikehoffms 35eec8c
Merge branch 'main' into user/mikehoffms/sensors2
mikehoffms 526fc96
Merge branch 'main' into user/mikehoffms/sensors2
mikehoffms 3eb82f6
Merge branch 'main' into user/mikehoffms/sensors2
mikehoffms b57c852
pngs
mikehoffms 68e47f7
About tools > Sensors
mikehoffms 334f280
clean See Also
mikehoffms 39761c7
Merge branch 'main' into user/mikehoffms/sensors2
mikehoffms 4333a28
inc cmts
mikehoffms 91fe6ea
Idle detect demo
mikehoffms d9bb7c8
linkfix
mikehoffms f97e275
cleanup ext links
mikehoffms File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file removed
BIN
-84.7 KB
...devtools-guide-chromium/device-mode/geolocation-images/command-menu-sensors.png
Binary file not shown.
Binary file removed
BIN
-110 KB
...ft-edge/devtools-guide-chromium/device-mode/geolocation-images/command-menu.png
Binary file not shown.
Binary file removed
BIN
-99.5 KB
...ols-guide-chromium/device-mode/geolocation-images/sensors-geolocation-tokyo.png
Binary file not shown.
56 changes: 0 additions & 56 deletions
56
microsoft-edge/devtools-guide-chromium/device-mode/geolocation.md
This file was deleted.
Oops, something went wrong.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file removed
BIN
-84.7 KB
...ium/device-mode/orientation-images/device-mode-console-command-menu-sensors.png
Binary file not shown.
Binary file removed
BIN
-108 KB
...de-chromium/device-mode/orientation-images/device-mode-console-command-menu.png
Binary file not shown.
Binary file removed
BIN
-86.5 KB
...vice-mode/orientation-images/device-mode-console-sensors-orientation-custom.png
Binary file not shown.
Binary file removed
BIN
-96.1 KB
...ntation-images/device-mode-console-sensors-orientation-portrait-upside-down.png
Binary file not shown.
56 changes: 0 additions & 56 deletions
56
microsoft-edge/devtools-guide-chromium/device-mode/orientation.md
This file was deleted.
Oops, something went wrong.
192 changes: 192 additions & 0 deletions
192
microsoft-edge/devtools-guide-chromium/sensors/index.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,192 @@ | ||
--- | ||
title: Emulate device sensors (Sensors tool) | ||
mikehoffms marked this conversation as resolved.
Show resolved
Hide resolved
|
||
description: How to use the Sensors tool to emulate sensor input of any device, in Microsoft Edge DevTools. | ||
author: MSEdgeTeam | ||
ms.author: msedgedevrel | ||
ms.topic: conceptual | ||
ms.service: microsoft-edge | ||
ms.subservice: devtools | ||
ms.date: 03/07/2025 | ||
--- | ||
<!-- Copyright Kayce Basques and Sofia Emelianova | ||
|
||
Licensed under the Apache License, Version 2.0 (the "License"); | ||
you may not use this file except in compliance with the License. | ||
You may obtain a copy of the License at | ||
|
||
https://www.apache.org/licenses/LICENSE-2.0 | ||
|
||
Unless required by applicable law or agreed to in writing, software | ||
distributed under the License is distributed on an "AS IS" BASIS, | ||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
See the License for the specific language governing permissions and | ||
limitations under the License. --> | ||
# Emulate device sensors (Sensors tool) | ||
|
||
Use the **Sensors** tool to emulate sensor input of any device. | ||
|
||
<!--  --> | ||
|
||
|
||
<!-- ====================================================================== --> | ||
## Overview | ||
|
||
The **Sensors** tool lets you do the following: | ||
|
||
* [Override geolocation](#override-geolocation) | ||
* [Simulate device orientation](#simulate-device-orientation) | ||
* [Force touch](#force-touch) | ||
* [Emulate idle detector state](#emulate-idle-detector-state) | ||
* [Emulate hardware concurrency](#emulate-hardware-concurrency) | ||
* [Emulate CPU pressure](#emulate-cpu-pressure) | ||
|
||
To simulate a viewport of a mobile device and throttle the network and CPU, see [Device Mode](https://developer.chrome.com/docs/devtools/device-mode). | ||
|
||
|
||
<!-- ====================================================================== --> | ||
## Open the Sensors tool | ||
|
||
1. Open a webpage, such as the [foo]() demo page, right-click the webpage and then select **Inspect**. DevTools opens. | ||
|
||
1. If **Quick View** isn't shown at bottom of DevTools, press **Esc** to display it. | ||
|
||
1. In **Quick View** at the bottom of DevTools, click the **More tools** button, and then select **Sensors**. | ||
|
||
|
||
#### Open the Sensors tool by using the Command Menu | ||
|
||
1. Depending on your operating system, press the following to open the Command Menu: | ||
* On MacOS, **Command+Shift+P**. | ||
* On Windows, Linux, or ChromeOS, **Control+Shift+P**. | ||
|
||
<!--  --> | ||
|
||
1. Type **sensors**, select **Show Sensors**, and then press **Enter**. | ||
|
||
The **Sensors** tool opens up at the bottom of your DevTools window. | ||
|
||
|
||
<!-- ====================================================================== --> | ||
## Override geolocation | ||
|
||
Many websites take advantage of user location https://web.dev/user-location/ in order to provide a more relevant experience for their users. For example, a weather website might show the local forecast for a user's area, once the user has granted the website permission to access their location. | ||
|
||
If you're building a UI that changes depending on where the user is located, you probably want to make sure that the site behaves correctly in different places around the world. | ||
|
||
To override your geolocation, open the **Sensors** tool https://developer.chrome.com/docs/devtools/sensors#open-sensors and, from the Geolocation list select one of the following: | ||
|
||
* One of the preset cities, like Tokyo. | ||
* Custom location to enter custom longitude and latitude coordinates. | ||
* Select Location unavailable to see how your site behaves when the user's location is not available. | ||
|
||
<!--  --> | ||
|
||
|
||
<!-- ====================================================================== --> | ||
## Simulate device orientation | ||
|
||
To simulate different device orientations https://web.dev/device-orientation/ , open the **Sensors** tool https://developer.chrome.com/docs/devtools/sensors#open-sensors , and, from the Orientation list, select one of the following: | ||
|
||
* One of the preset orientations, like Portrait upside down. | ||
* Custom orientation to provide your own exact orientation. | ||
|
||
<!--  --> | ||
|
||
After selecting **Custom orientation**, the **alpha**, **beta**, and **gamma** fields are enabled. See Alpha https://web.dev/device-orientation/#alpha, Beta https://web.dev/device-orientation/#beta, and Gamma https://web.dev/device-orientation/#gamma to understand how these axes work. | ||
|
||
You can also set a custom orientation by dragging the **Orientation Model**. Hold **Shift** before dragging to rotate along the alpha axis. | ||
|
||
<!--  --> | ||
|
||
|
||
<!-- ====================================================================== --> | ||
## Force touch | ||
|
||
To test touch events on your website, you can force touch instead of click even if you're testing on a device without a touch screen. | ||
|
||
To trigger touch events with your pointer: | ||
mikehoffms marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
1. Open the **Sensors** tool. https://developer.chrome.com/docs/devtools/sensors#open-sensors | ||
|
||
1. Under the **Touch** drop-down list, select **Force touch**. | ||
|
||
<!--  --> | ||
|
||
1. Click **Reload DevTools** in the prompt at the top. | ||
|
||
|
||
<!-- ====================================================================== --> | ||
## Emulate idle detector state | ||
|
||
The Idle Detection API https://developer.chrome.com/articles/idle-detection lets you detect inactive users and react on idle state changes. With DevTools, you can emulate idle state changes for both the user state and screen state instead of waiting for the actual idle state to change. | ||
|
||
To emulate idle states: | ||
|
||
1. Open the **Sensors** tool. For this tutorial, you can try it on this demo page. https://idle-detection.glitch.me/ | ||
mikehoffms marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
1. Enable the checkbox next to _Ephemeral_ and, in the prompt, grant the demo page the idle detection permission. Then, reload the page. | ||
|
||
<!--  --> | ||
|
||
1. Under the **Emulate Idle detector State** drop-down, select one of the following: | ||
* **No idle emulation** | ||
* **User active, screen unlocked** | ||
* **User active, screen locked** | ||
* **User idle, screen unlocked** | ||
* **User idle, screen locked** | ||
|
||
<!--  --> | ||
|
||
In this example, DevTools emulates a **User idle, screen locked** state and, in this case, the demo page starts the 10 second countdown to clear the canvas. | ||
|
||
|
||
<!-- ====================================================================== --> | ||
## Emulate hardware concurrency | ||
|
||
To emulate how your website performs on devices with different numbers of processor cores, you can override the value reported by the navigator.hardwareConcurrency https://developer.mozilla.org/docs/Web/API/Navigator/hardwareConcurrency property. Some applications use this property to control the degree of parallelism of their application, for example, to control Emscripten pthread https://emscripten.org/docs/porting/pthreads.html pool size. | ||
|
||
To emulate hardware concurrency: | ||
|
||
1. Open the **Sensors** tool. | ||
|
||
1. Near the bottom of the panel, find and turn on check_box Hardware concurrency. | ||
|
||
1. In the number input box, enter the number of cores you want to emulate. | ||
|
||
<!--  --> | ||
|
||
Caution: Exceeding the default value of 12 may degrade performance. | ||
|
||
To revert to the default value, click the **Reset** <!--()--> button. | ||
|
||
|
||
<!-- ====================================================================== --> | ||
## Emulate CPU pressure | ||
|
||
CPU or compute pressure https://developer.chrome.com/docs/web-platform/compute-pressure is a set of reported states that give you an idea of how much workload the system's compute is undergoing and whether it's near to the limit or not. This information lets you adapt your real-time application, for example, video conferencing or video game, to take advantage of all the available processing power while keeping the system responsive by adapting the workloads in real time. | ||
|
||
The **Sensors** panel lets you emulate the states that can be reported by the Compute Pressure API. https://developer.mozilla.org/docs/Web/API/Compute_Pressure_API | ||
|
||
To emulate CPU pressure on your website: | ||
|
||
1. Open the **Sensors** tool. https://developer.chrome.com/docs/devtools/sensors#open-sensors | ||
|
||
1. Near the bottom of the panel, find the **CPU pressure** section, and select one of the human-readable pressure states https://developer.mozilla.org/docs/Web/API/Compute_Pressure_API#pressure_states : **No override**, **Nominal**, **Fair**, **Serious**, or **Critical**. | ||
|
||
1. In the prompt at the top of DevTools, click **Reload DevTools**. | ||
|
||
<!--  --> | ||
|
||
|
||
<!-- ====================================================================== --> | ||
## See also | ||
<!-- todo: all links in article --> | ||
|
||
|
||
<!-- ====================================================================== --> | ||
> [!NOTE] | ||
> Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). | ||
> The original page is found [here](https://developer.chrome.com/docs/devtools/sensors) and is authored by Kayce Basques and Sofia Emelianova. | ||
|
||
[](https://creativecommons.org/licenses/by/4.0) | ||
This work is licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.