Informations sur l'appareil

Introduction

Device Info est un inspecteur basé sur un navigateur qui montre à quoi ressemble votre session actuelle sur les sites Web et les applications Web: quel navigateur et système d'exploitation vous exécutez, quelle est la taille de l'écran et de la fenêtre d'affichage, quelles langues et fuseau horaire s'appliquent et, lorsque votre navigateur le permet, la qualité du réseau, les préférences d'accessibilité, les conseils client et le quota de stockage.

Contrairement aux outils qui analysent uniquement une chaîne d'agent utilisateur, Device Info combine les données UA analysées avec des API en direct (screen,window,navigator,matchMediaet autres). Cela le rend pratique pour les vérifications de conception réactive, les tickets d'assistance et la reproduction des problèmes « fonctionne sur ma machine » sans partager de captures d'écran des pagesabout:ou des outils de développement.

Tout le traitement se produit localement. Ouvrez l'outil sur l'appareil testé, lisez les cartes regroupées et appuyez sur Actualiser après avoir fait pivoter le téléphone ou redimensionné la fenêtre du bureau.

Qu'est-ce que les informations sur l'appareil?

Les informations sur l'appareil répondent: * « Dans quel environnement cet onglet s'exécute-t-il? »* Il ne prend pas en compte vos empreintes digitales sur les sites ni dans l'historique des magasins; il affiche uniquement les valeurs que votre navigateur expose déjà à JavaScript sur la page que vous consultez.

La sortie est organisée en sections. Les sections vides sont omises afin que vous ne voyiez que les champs avec une valeur. La liste ci-dessous correspond à ce que l'outil affiche aujourd'hui.

Informations affichées par l'outil

navigateur

Analysé à partir de votrenavigator.userAgenten utilisant la même famille de logique que les outils UA dédiés:

• Nom — par ex. Chrome, Safari, Firefox, Bord.
• Version: chaîne de version complète du navigateur lorsqu'elle est détectable.
• Majeur — numéro de version majeure, utile pour des vérifications rapides de compatibilité (« nécessite Chrome 120+ »).

Utilisez-le lorsque les journaux affichent uniquement une chaîne UA brute et que vous souhaitez une étiquette lisible sans la coller dans un autre outil.

Système opérateur

Également dérivé de l'analyse user-agent:

• Nom – Windows, macOS, iOS, Android, Linux, etc.
• Version: version du système d'exploitation lorsque l'UA fournit suffisamment de détails.

Utile pour confirmer si un testeur utilise iOS 17 ou 18 ou Windows 10 ou 11. Notez que la détection du système d'exploitation basée sur l'UA peut être erronée si l'UA est gelée ou réduite pour des raisons de confidentialité.

Device

Classifie le profil matériel impliqué par l'UA:

• Type —mobile,tablet,console,smarttvoudesktop(par défaut lorsqu'aucun jeton mobile n'est trouvé).
• Vendeur — fabricant lorsqu'il est présent (par exemple Apple, Samsung).
• Modèle: modèle de l'appareil lorsqu'il est présent.

Associez Type avec Max touch points (Navigateur) et Pointeur (Préférences) pour raisonner sur les dispositions tactiles et celles axées sur la souris en premier.

Navigator

Indicateurs d'identité et de capacité du navigateur principal de l'objetNavigator:

Champ	Signification
Agent utilisateur	Chaîne UA complète envoyée avec les requêtes HTTP de ce profil de navigateur.
Plate-forme	Chaîne de plate-forme héritée (par exempleMacIntel,Win32).
Fournisseur	Chaîne du fournisseur du moteur de navigateur.
Langue	Langue du contenu principal (balise BCP 47).
Langues	Liste ordonnée des langues acceptées.
Cookie activé	Si les cookies propriétaires sont autorisés.
Ne pas suivre	Préférence DNT lorsqu'elle est exposée (nullsi non définie).
En ligne	Si le navigateur signale une connexion réseau active.
Points de contact maximum	Nombre de contacts tactiles simultanés (0 sur un bureau typique).
Concurrence matérielle	Nombre approximatif de cœurs logiques du processeur exposés à la page.
Mémoire de l'appareil (Go)	Niveau de RAM approximatif de l'appareil lorsqu'il est pris en charge (Chrome/Android; souvent absent ailleurs).
Visionneuse PDF activée	Indicateur de disponibilité du plugin PDF intégré.
Pilote Web	truelorsque le navigateur est sous contrôle d'automatisation.

Ces champs sont ce que lisent indirectement de nombreux scripts d’analyse et détecteurs de fonctionnalités.

Screen

Métriques d'affichage physique dewindow.screen:

• Largeur/Hauteur — résolution totale de l'écran en pixels CSS.
• Largeur/hauteur disponible — zone utilisable hors chrome du système d'exploitation (barre des tâches, zone d'encoche si indiqué).
• Profondeur de couleur / Profondeur de pixels — bits par composant de couleur pour l'écran.
• Rapport de pixels de l'appareil — rapport entre les pixels physiques et les pixels CSS (window.devicePixelRatio). Critique pour la mise en page Retina/HiDPI et les décisions d’imagesrcset.
• Type d'orientation — par ex.portrait-primary,landscape-primarylorsquescreen.orientationexiste.
• Angle d'orientation — rotation en degrés lorsqu'elle est prise en charge.

Comparez la largeur de l'écran avec la largeur intérieure de la fenêtre pour voir la quantité d'espace consommée par l'interface utilisateur du navigateur.

Window

La fenêtre d'affichage de la page visible et la position de la fenêtre:

• Largeur/hauteur intérieure — fenêtre de présentation à l'intérieur du chrome du navigateur (ce que suivent souvent les requêtes multimédias CSS pour la largeur).
• Largeur/hauteur extérieure — fenêtre de navigateur complète comprenant les barres d'outils.
• Écran X / Y — décalage de fenêtre sur le bureau multi-moniteurs (peut être 0 sur mobile).

Essentiel pour le débogage des rapports « le point d'arrêt indique 768 mais la mise en page est interrompue »: citez toujours les dimensions intérieures, pas uniquement la taille de l'écran.

Localité et heure

Contexte temporel de la séance:

• Fuseau horaire — Nom IANA deIntl(par exempleAmerica/New_York).
• Décalage UTC (minutes) — différence par rapport à UTC pour l'heure locale actuelle (remarque: le signe suit la convention JavaScriptgetTimezoneOffset()).
• Heure locale: horodatage lisible par l'homme au moment de la collecte.

Utile pour planifier les bugs, les affichages cron et les tickets « mauvaise date dans l'interface utilisateur ».

Network

Rempli lorsquenavigator.connection(API d'informations réseau) est disponible, de manière plus fiable dans Chromium:

• Type efficace — classe grossière:4g,3g,slow-2g, etc.
• Liaison descendante: bande passante estimée en Mbps.
• RTT — temps aller-retour estimé en ms.
• Enregistrer les données: indique si l'utilisateur a activé le mode d'économie de données.
• Type — type de connexion lorsqu'il est exposé (wifi,cellular, …).

Absent sur le bureau Safari/Firefox; ne supposez pas que tous les utilisateurs disposeront de ce bloc.

Preferences

Dérivé des requêtes multimédias CSS, la page peut déjà utiliser:

• Schéma de couleurs —dark,lightouno-preferenceà partir deprefers-color-scheme.
• Mouvement réduit —reducecontreno-preferenceà partir deprefers-reduced-motion.
• Pointeur —coarse (touch),fine,coarse + fineouunknownà partir des fonctionnalités multimédiaspointer.

Permet de vérifier que les bascules de thème et les politiques d'animation correspondent aux paramètres du système sans ouvrir DevTools.

Conseils aux clients

Lorsque les User-Agent Client Hints sont pris en charge (navigator.userAgentData.getHighEntropyValues), l'outil peut afficher:

• architecture — Indice d'architecture du processeur.
• bitness – 32 contre 64 bits.
• modèle: modèle d'appareil sur les plates-formes prises en charge.
• platform / platformVersion — Plateforme et version du système d'exploitation via l'API d'indices.
• uaFullVersion — version complète du navigateur via des astuces.
• fullVersionList — liste de versions structurée pour les marques Chromium.

Modern Chromium réduit les détails bruts de l'UA; cette section complète les lignes Navigateur/OS analysées. Il peut rester vide dans Safari ou dans les profils d'entreprise verrouillés.

Storage

Lorsquenavigator.storage.estimate()est disponible:

• Quota — espace de stockage approximatif que l'origine peut utiliser (affiché en Mo).
• Utilisation — stockage approximatif déjà utilisé par cette origine (affiché en Mo).

Pertinent pour les problèmes de PWA, de cache hors ligne et d'IndexedDB sur le même site, et non pour l'espace disque total sur l'appareil.

Principales caractéristiques

• Instantané de session en direct: il ne s'agit pas d'un collage UA statique; comprend l'écran, la fenêtre, les paramètres régionaux et les préférences.
• Cartes regroupées et lisibles: chaque famille d'API dans sa propre section avec des étiquettes en langage clair.
• La confidentialité d'abord — pas de téléchargement; utilisation sûre sur les machines internes ou client à des fins d'assistance.
• Actualisation à la demande: rééchantillonnez après une rotation, un zoom ou un changement de réseau.
• Masquage intelligent: les API non prises en charge n'encombrent pas l'interface utilisateur avec des lignes vides.

Cas d'utilisation courants

• ** Assurance qualité réactive **: confirmez la largeur intérieure, le DPR et l'orientation sur de vrais téléphones et tablettes.
• Rapports de bogues: joignez une liste cohérente de champs d'environnement au lieu de demander aux utilisateurs d'ouvrir DevTools.
• ** Triage pris en charge **: vérifiez la langue, le fuseau horaire, les cookies et l'état en ligne lors de la reproduction de problèmes de connexion ou de paiement.
• Contrôles d'automatisation — repérezWebdriver: Yeslors du débogage de tests E2E instables.
• Contexte de performances — notez Save-Data ou le type de connexion efficace lors de l'enquête sur les charges lentes (Chromium).
• Débogage PWA/stockage: lit le quota et l'utilisation lorsque le cache ou les données hors ligne se comportent mal.

Meilleures pratiques

• Exécutez Device Info dans le même profil de navigateur où le bug se produit (normal ou incognito, extensions activées/désactivées).
• Après avoir fait pivoter un téléphone ou cliqué sur une fenêtre de bureau, cliquez sur Actualiser avant de copier les valeurs dans un ticket.
• Traitez les noms de système d'exploitation/de périphérique dérivés de l'UA comme des indices; vérifiez par recoupement avec les conseils client ou la connaissance manuelle de l'appareil lorsque la précision est importante.
• Préférez les dimensions intérieures de la fenêtre à la taille de l'écran lorsque vous discutez des points d'arrêt CSS.
• Combinez-le avec l'outil User Agent Parser si vous devez également analyser les chaînes UA à partir des journaux du serveur ou des navigateurs d'autres utilisateurs.

Outils associés

Les informations sur l'appareil sont la vue tout-en-un. Lorsque vous n’avez besoin que d’une seule réponse, ces vérificateurs ciblés y vont directement:

• What Is My navigateur— le nom et la version de votre navigateur, au premier plan.
• What Is My User Agent— votre chaîne UA complète avec copie en un clic.
• What Is My Timezone— Fuseau horaire IANA, décalage UTC et horloge locale en direct.
• Device Pixel Ratio Checker— votre DPR plus CSS par rapport à la résolution physique.
• Viewport Size Checker— largeur et hauteur intérieures en direct pour un débogage réactif.
• User Agent Parser— collez n'importe quelle chaîne UA à partir des journaux; pas de données d'écran en direct ou de fenêtre d'affichage.