Déboguer une page web sur iPhone — sans Mac

Commencez par le diagnostic : la passe automatique

Avant d'aller fouiller le DOM, laissez l'analyse automatique vous signaler l'évident : le diagnostic d'OpenHTML liste les fichiers manquants référencés par la page, les ressources distantes bloquées par le réglage de confidentialité par défaut, les erreurs JavaScript à l'exécution et les problèmes d'encodage — chacun avec un correctif en un geste quand il en existe un (autoriser le réseau, activer le JS, passer au serveur local).

En pratique, cela règle en quelques secondes la plupart des cas « pourquoi la page est-elle vide / sans style / à moitié fonctionnelle », surtout avec les pages générées par IA qui référencent des fichiers jamais produits.

Console : ce que la page a à dire

La console capture en direct les sorties log, warn et error du JavaScript de la page. Les exceptions non interceptées y arrivent avec leur message — c'est souvent l'indice le plus rapide quand l'interactivité meurt.

Inspecteur d'éléments : le DOM, sur l'appareil (Pro)

• Touchez n'importe quel élément pour voir sa balise, ses attributs et ses styles calculés.
• Modifiez les attributs sur place pour tester une hypothèse : la mise en page se répare-t-elle si on retire cette classe ?
• Passez d'un élément inspecté directement à sa ligne dans la vue Source.

Inspecteur réseau : chaque requête, chronométrée (Pro)

Observez le trafic fetch, XHR et WebSocket avec les URL, les codes de statut, les tailles et les temps de réponse — l'équivalent sur l'appareil de l'onglet réseau. Exportez toute la session en fichier HAR pour l'analyser ensuite dans les DevTools d'un ordinateur, Charles ou Proxyman.

N'oubliez pas le réglage par défaut : une page ne peut pas atteindre le réseau tant que vous ne l'y autorisez pas, document par document. Un inspecteur réseau vide peut donc simplement vouloir dire que la page est maintenue hors ligne — le diagnostic vous le dira.

Reproduire les conditions réelles

• Le mode serveur local (Pro) sert les projets sur 127.0.0.1, pour que fetch(), les modules ES et le chargement de JSON se comportent comme en production — indispensable pour les projets web en ZIP.
• Les préréglages de viewport (Pro) affichent la page en largeurs téléphone, tablette et ordinateur, pour débusquer les bugs de responsive.
• « Demander le site pour ordinateur » (Pro) charge la mise en page bureau quand une page s'adapte trop agressivement au mobile.

Une session type

1. Importez la page ou le projet ; le diagnostic signale une feuille de styles CDN bloquée et une erreur de console.
2. Autorisez le réseau pour ce document → les styles arrivent ; l'erreur, elle, reste.
3. La console montre une variable non définie dans app.js ; la vue Source saute à la ligne concernée.
4. Le correctif se confirme en modifiant l'attribut DOM dans l'inspecteur — puis vous corrigez proprement le fichier de retour au bureau et vous réimportez pour vérifier.