.
Un billet spécial d’un membre de l’équipe du groupe d’ingénierie Internet de Samsung, Adil !
Les outils de développement fournis par les navigateurs sont le compagnon constant de nombreux développeurs web. Nous pouvons les utiliser pour inspecter notre code, nous signaler les erreurs et exécuter divers audits. DevTools dans Chrome peut également vous fournir un moyen d’ajuster la taille de votre affichage en fonction de votre appareil mobile. Cette fonctionnalité est fréquemment utilisée par de nombreux développeurs. L’un des points utiles de cette fonctionnalité est que vous pouvez choisir parmi les appareils mobiles les plus populaires, et DevTools ajustera la taille de l’écran pour qu’elle soit exactement la même que celle de cet appareil. C’est ainsi que nous pouvons tester et déboguer les pages web avec la taille de l’appareil mobile.
Chrome DevTools ne sert pas seulement à inspecter les éléments DOM et les attributs CSS. Nous pouvons également l’utiliser pour examiner les requêtes réseau et les paramètres liés au stockage d’accès. De plus, vous pouvez exécuter directement du code JavaScript et voir les messages de la console. N’est-ce pas étonnant ?
Maintenant, supposez que vous ayez un téléphone mobile en main, que des problèmes spécifiques se produisent, en particulier sur cet appareil, et que vous ne puissiez pas reproduire le problème en utilisant DevTools et la méthode illustrée ci-dessus. Ou, imaginez une situation où votre navigateur mobile a des API spécifiques, et vous voulez les déboguer. Dans ce cas, vous avez besoin de DevTools sur votre téléphone mobile.
Ce que vous ne savez peut-être pas, c’est que vous pouvez utiliser DevTools de bureau pour déboguer les navigateurs basés sur Blink (tels que Samsung Internet) sur vos appareils Android également.
Pour ce faire, tout d’abord, activez « Débogage USB » sur votre appareil Android et connectez-le à votre ordinateur.
Maintenant pour la partie excitante. Accédez à l’URL « chrome://inspect » et cliquez ensuite sur « Devices ». Hourra ! Vous verrez la liste des sessions de navigateur actives de votre appareil mobile.
Cliquez sur « Inspecter », et vous verrez la vue du navigateur sur votre ordinateur. Maintenant, vous pouvez faire n’importe quelle manipulation en utilisant DevTools.
Vous pouvez accéder à la liste des appareils mobiles également en utilisant Appareils distants dans le menu DevTools.
J’espère que vous apprécierez l’utilisation de cette technique pour rendre le débogage sur votre mobile plus simple!