Inspecteur web

Une mise en page cassée seulement sur le téléphone, un bouton qui ne réagit pas, une page H5 qui reste blanche — sur l’ordinateur, F12 suffit pour comprendre pourquoi. Sur le téléphone, il ne reste souvent que des alert, une recompilation, et on regarde à nouveau. L’inspecteur web branche ces mêmes outils de développement directement sur la vraie page de l’appareil : le câble branché, Elements, Console, Sources, Network et Storage s’ouvrent sur l’ordinateur, et l’appareil se redessine dès qu’une valeur change.

Inspecteur web déboguant une page Android : à gauche l’écran de l’appareil en direct, à droite le panneau Elements avec les styles calculés

1. Comment ça se répartit avec la capture de paquets

Les deux sont utiles, mais ils répondent à des questions différentes :

	Capture de paquets	Inspecteur web
Répond à	Ce qui a transité sur le réseau	Ce que la page a fait
Montre	Requêtes / réponses, en-têtes, corps (déchiffrés)	Arbre DOM, styles calculés, erreurs console, piles d’appel, cookies et stockage
Question typique	Que renvoie cet endpoint, les paramètres sont-ils bons	Quelle ligne de JavaScript a envoyé cette requête, pourquoi ce style ne s’applique-t-il pas

La capture montre la requête mais jamais qui l’a déclenchée ; l’inspecteur pose un point d’arrêt dans Sources et remonte jusqu’à cette ligne. Les deux vivent dans le même outil, passer de l’un à l’autre ne coûte rien.

2. Préparation à faire une seule fois

Les trois blocs ci-dessous sont des alternatives : faites celui qui correspond à votre cible, et une seule fois.

Appareil iOS

Branchez le câble, laissez l’appareil déverrouillé, et activez l’interrupteur de l’inspecteur web :

Safari : Réglages → Safari → Avancé → Inspecteur web
Chrome : Réglages Chrome → Réglages de contenu → Inspecteur web

C’est l’étape la plus souvent oubliée sous iOS. Sans elle, l’appareil est détecté mais la liste des pages reste vide.

Appareil Android

Branchez le câble et activez le débogage USB dans les options pour développeurs. Les émulateurs Android sont généralement repérés sans câble.

Navigateur de cet ordinateur

Lancez Chrome ou Edge avec --remote-debugging-port=9222, puis cliquez sur Actualiser dans la liste des pages.

# macOS
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --remote-debugging-port=9222

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

3. Déboguer aussi une page dans une app ? Encore une chose

Si les onglets du navigateur suffisent, cette section peut être sautée.

Votre propre app : activez-le une fois dans le code.

// Android : à appeler une fois au démarrage de l'Application ou de l'Activity
WebView.setWebContentsDebuggingEnabled(true);

// À partir d'iOS 16.4 : rendre la WKWebView inspectable
webView.isInspectable = true

App d’un tiers, ou sans toucher au code : cochez « Inclure aussi les pages dans les apps » dans la boîte de dialogue, et les pages des apps ouvertes rejoignent la liste. Décochez, et il ne reste que les onglets du navigateur.

	Condition	Remarque
Android	Un appareil rooté	Active le débogage WebView sur les apps en cours d’exécution, sans reconstruire l’app
iOS	Apps signées en développement uniquement	Limite du système — les apps installées depuis l’App Store ne peuvent pas être incluses

Dans les deux cas, l’app n’est jamais reconstruite, signée, ni un outil installé sur l’appareil. La session terminée, l’appareil retrouve son état d’origine.

4. Démarrer le débogage

Une fois cela fait, chaque session se résume à ceci :

Nouvelle capture → cible (Cet ordinateur / iOS / Android) → méthode « Inspecteur web » → Actualiser → choisir la page → Inspect

Boîte de dialogue Nouvelle capture avec Android et la méthode Inspecteur web sélectionnés, listant les pages déboguables après avoir coché « Inclure aussi les pages dans les apps »

Les pages sont regroupées par l’app propriétaire, ce qui distingue en un coup d’œil une page dans une app d’un onglet de navigateur.
Cliquer sur Inspect ouvre des outils de développement complets dans le navigateur de l’ordinateur, connectés à cette page sur cet appareil.
Autant de sessions que voulu, en parallèle — une fenêtre par page, toutes actives en même temps.

5. Ce qu’on peut voir

Les mêmes panneaux qu’on utilise chaque jour sur l’ordinateur, pointés sur la page du téléphone.

Panneau	Ce qu’il permet
Elements	L’arbre DOM en direct de la page, avec styles calculés, héritage et modèle de boîte. Changez une valeur, et l’appareil se redessine aussitôt — le moyen le plus rapide de localiser un bug de mise en page mobile
Console	Toutes les erreurs et tous les logs produits par la page, plus une invite qui exécute du JavaScript directement dans cette page sur cet appareil
Sources	Parcourir les scripts et feuilles de style chargés par la page, poser des points d’arrêt, suivre la pile d’appel et inspecter les variables au moment exact du problème
Network	Chaque requête de la page en cascade : statut, type, initiateur, taille, timing et état du cache, avec les totaux de requêtes, d’octets transférés, DOMContentLoaded et le temps de chargement complet
Storage	Les cookies groupés par domaine avec expiration, Secure, HttpOnly et SameSite, à côté de localStorage et sessionStorage — le moyen le plus rapide de démêler un bug d’état de connexion

Panneau Storage de l’inspecteur web : table des cookies pour une page ouverte sur un iPhone, avec valeur, domaine, expiration, Secure, HttpOnly et SameSite

Sous Android, l’écran de l’appareil en direct est dupliqué à côté des panneaux et se pilote à la souris, clic et défilement compris — inspection et manipulation se font sur un seul écran, sans jongler entre téléphone et clavier.

6. Ce qui est pris en charge

	Cet ordinateur	iOS	Android
Onglets du navigateur	✓	✓	✓
Pages dans les apps (WebView / WKWebView / H5)	✓	✓	✓
Émulateur / simulateur	—	✓	✓
Inspecter et modifier éléments et styles en direct	✓	✓	✓
Console, points d’arrêt et pas-à-pas	✓	✓	✓
Cascade réseau pour la page	✓	✓	✓
Cookies / localStorage / sessionStorage	✓	✓	✓
Écran de l’appareil à côté des panneaux	—	—	✓
Aucun certificat ni proxy à configurer	✓	✓	✓

7. Rien ne s’affiche ? Vérifiez d’abord ceci

Symptôme	Cause probable	Solution
Appareil détecté, liste des pages vide	L’inspecteur web iOS est désactivé, ou l’écran verrouillé	Voir la section 2 ; l’activer, laisser déverrouillé, puis Actualiser
Android n’affiche aucune page dans les apps	Le débogage n’a jamais été activé pour cette WebView	Votre app : ajoutez `setWebContentsDebuggingEnabled(true)` ; app d’un tiers : cochez « Inclure aussi les pages dans les apps » (appareil rooté requis)
Une app iOS précise n’apparaît jamais	Une limite du système	Les builds de l’App Store ne peuvent pas être inclus — seules les apps signées en développement le peuvent
Le navigateur local ne liste aucune page	Démarré sans le port de débogage	Relancer Chrome / Edge avec `--remote-debugging-port=9222`, puis Actualiser
Inspect ne fait rien	Un navigateur non pris en charge	Les sessions Android et locales nécessitent Chrome, Edge ou Brave

8. Quand s’en servir

Un bug uniquement sur le téléphone : mise en page, zones de clic, rendu des polices.
Une page H5 reste blanche ou est cassée, et il faut voir les erreurs console et la pile d’appel.
Savoir quel script a envoyé une requête — la capture seule ne le dira pas.
Traquer un problème de connexion ou de cache, en regardant ce qu’il y a vraiment dans les cookies et le stockage.
Déboguer du H5 intégré dans une app — les outils habituels n’y donnent aucun accès.

Retour à Prise en main · Voir aussi : Inspecter et décoder · Capture iOS · Capture Android