Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Wiki
Pages
Dernière activité
Quoi de neuf
Nouveaux messages
Nouveaux articles
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Magasin
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
RealityGaming
Remote Debugging - Chrome sur Android
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="Fabien 🚀" data-source="post: 2879948" data-attributes="member: 38138"><p style="text-align: center">[ATTACH=full]15001[/ATTACH]</p> <p style="text-align: center"></p> <p style="text-align: center">La navigation web sur mobile s'est relativement améliorée au fil des années, mais elle reste tout de même très différente de celle sur ordinateur, et beaucoup moins évoluée.</p> <p style="text-align: center">Grâce au "<em>Remote Debugging</em>" présent sur le navigateur web mobile "<em>Google Chrome</em>" sur <strong>Android</strong>, nous pouvons effectuer des tâches qui étaient réservées aux ordinateurs... sur mobile (<em>DevTools</em>).</p> <p style="text-align: center"></p> <p style="text-align: center"></p> <p style="text-align: center">[ATTACH=full]14999[/ATTACH]</p> <p style="text-align: center"></p> <p style="text-align: center">Tout d'abord, il est impératif d'installer les drivers <em>USB</em> correspondant à votre mobile ou à la marque de celui-ci, <a href="http://developer.android.com/tools/extras/oem-usb.html#Drivers" target="_blank">une page récapitulative des drivers existe</a>.</p> <p style="text-align: center"></p> <p style="text-align: center">[ATTACH=full]14086[/ATTACH]</p> <p style="text-align: center"></p> <p style="text-align: center">Vous allez devoir activer – dans les options développeurs – “<strong>Débogage USB</strong>”.</p> <p style="text-align: center">(<em>Mode débogage lorsqu'un câble USB est connecté.</em>)</p> <p style="text-align: center"></p> <p style="text-align: center">[ATTACH=full]15002[/ATTACH]</p> <p style="text-align: center"></p> <p style="text-align: center">Les options développeurs sont disponibles dans les paramètres pour la plupart des appareils, néanmoins il y a quelques exceptions.</p> <p style="text-align: center"></p> <p style="text-align: center"><u>Vous n'avez pas accès aux options développeurs ?</u></p> <p style="text-align: center"></p> <p style="text-align: center">[ATTACH=full]14088[/ATTACH]</p> <p style="text-align: center"></p> <p style="text-align: center">Pour faire apparaître ces options il faut se rendre dans "<strong>A propos du téléphone</strong>" et cliquer 5 fois consécutives sur « <strong>Numéro de build</strong> ».</p> <p style="text-align: center"></p> <p style="text-align: center">[ATTACH=full]14090[/ATTACH]</p> <p style="text-align: center">[ATTACH=full]14087[/ATTACH]</p> <p style="text-align: center">[ATTACH=full]14089[/ATTACH]</p> <p style="text-align: center"></p> <p style="text-align: center">Félicitations, vous avez débloqué les options développeurs. <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite344" alt=":nerd:" title="Intello :nerd:" loading="lazy" data-shortname=":nerd:" /></p> <p style="text-align: center"></p> <p style="text-align: center">[ATTACH=full]15008[/ATTACH]</p> <p style="text-align: center"></p> <p style="text-align: center">Une fois les drivers adéquats installés, branchez le téléphone à l'ordinateur, autorisez bien évidemment ce dernier à utiliser le <em>débogage USB</em>.</p> <p style="text-align: center"></p> <p style="text-align: center">[ATTACH=full]15003[/ATTACH]</p> <p style="text-align: center"></p> <p style="text-align: center">Ouvrez le navigateur sur mobile et allez sur le navigateur de l'ordinateur simultanément, et ouvrez un nouvel onglet puis mettez "<strong>chrome://inspect/</strong>" dans la barre d'adresse ou allez dans "<em>Menu</em>" > "<em>Outils</em>" > "<em>Inspecter les appareils</em>".</p> <p style="text-align: center"></p> <p style="text-align: center">[ATTACH=full]15009[/ATTACH]</p> <p style="text-align: center"></p> <p style="text-align: center">N'oubliez pas de cocher la case "<em>Discover USB devices</em>" si celle-ci ne l'ai pas déjà. Si tout fonctionne correctement, vous devriez voir votre mobile d'affiché.</p> <p style="text-align: center"></p> <p style="text-align: center">Si la détection n'a pas eu lieue <a href="http://developer.android.com/sdk/index.html#download" target="_blank">vous devez installer le SDK d'Android</a> (kit de développement - méthode "<em>Legacy Workflow</em>"), lancez l'executable "<em>adb.exe</em>" disponible dans l'arborescence suivante : "<em>sdk</em>" > "<em>platform-tools</em>".</p> <p style="text-align: center"></p> <p style="text-align: center">Vous me connaissez maintenant je pense, ma politique est qu'on apprend beaucoup mieux en visionnant une vidéo qu'en lisant un texte, <u>donc voici un exemple d’exécution :</u></p> <p style="text-align: center">[media=youtube]x0K28fv4E8Y[/media]</p> <p style="text-align: center"><em>En bas à droite se trouve l'écran de mon téléphone que j'ai filmé.</em></p> <p style="text-align: center"></p> <p style="text-align: center">Ce n'est pas tout ! Vous pouvez donc utiliser le célèbre outils de développement mais également gérer vos onglets via l'ordinateur : ouvrir un nouvel onglet, fermer un onglet, rafraîchir un onglet, etc...</p> <p style="text-align: center"></p> <p style="text-align: center">Et le top du top, vous pouvez voir en <em>live screencasting</em> le résultat sur votre mobile sans le regarder. <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" /></p> <p style="text-align: center"></p> <p style="text-align: center">[ATTACH=full]15010[/ATTACH]</p> <p style="text-align: center"></p> <p style="text-align: center">Voici le résultat de la page que j'ai édité dans ma vidéo... mais vue depuis le navigateur de l'ordinateur et non depuis l'écran de mon mobile.</p> <p style="text-align: center"></p> <p style="text-align: center">Pour illustrer de manière professionnelle ce tutoriel, visionnons une petite vidéo issue des développeurs de <em>Google</em>.</p> <p style="text-align: center">[media=youtube]Q7rEFEMpwe4[/media]</p> <p style="text-align: center"></p> <p style="text-align: center">A noter que depuis la version <strong>4.4</strong> (<em>KitKat</em>) d'<strong>Android</strong>, les applications qui utilisent une instance <em>Google Chrome</em> afin d'accéder au web peuvent également être éligibles à l'utilisation des outils de développement, exemple avec la <em>PlayStation App</em> : </p> <p style="text-align: center">[ATTACH=full]15117[/ATTACH] </p> <p style="text-align: center"></p> <p style="text-align: center">Voilà, vous avez appris quelque chose ? <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" /></p> <p style="text-align: center"><em><span style="color: #ff0000">Ne fonctionne que sur Android.</span></em></p> <p style="text-align: center"><em><span style="color: #ff0000"></span></em></p> <p style="text-align: center"><span style="color: #000000"><img src="/images/smileys/smiley-rg.svg" class="smilie" loading="lazy" alt=":RG:" title="RG :RG:" data-shortname=":RG:" /></span></p></blockquote><p></p>
[QUOTE="Fabien 🚀, post: 2879948, member: 38138"] [CENTER][ATTACH=full]15001[/ATTACH] La navigation web sur mobile s'est relativement améliorée au fil des années, mais elle reste tout de même très différente de celle sur ordinateur, et beaucoup moins évoluée. Grâce au "[I]Remote Debugging[/I]" présent sur le navigateur web mobile "[I]Google Chrome[/I]" sur [B]Android[/B], nous pouvons effectuer des tâches qui étaient réservées aux ordinateurs... sur mobile ([I]DevTools[/I]). [ATTACH=full]14999[/ATTACH] Tout d'abord, il est impératif d'installer les drivers [I]USB[/I] correspondant à votre mobile ou à la marque de celui-ci, [URL='http://developer.android.com/tools/extras/oem-usb.html#Drivers']une page récapitulative des drivers existe[/URL]. [ATTACH=full]14086[/ATTACH] Vous allez devoir activer – dans les options développeurs – “[B]Débogage USB[/B]”. ([I]Mode débogage lorsqu'un câble USB est connecté.[/I]) [ATTACH=full]15002[/ATTACH] Les options développeurs sont disponibles dans les paramètres pour la plupart des appareils, néanmoins il y a quelques exceptions. [U]Vous n'avez pas accès aux options développeurs ?[/U] [ATTACH=full]14088[/ATTACH] Pour faire apparaître ces options il faut se rendre dans "[B]A propos du téléphone[/B]" et cliquer 5 fois consécutives sur « [B]Numéro de build[/B] ». [ATTACH=full]14090[/ATTACH] [ATTACH=full]14087[/ATTACH] [ATTACH=full]14089[/ATTACH] Félicitations, vous avez débloqué les options développeurs. (nerd) [ATTACH=full]15008[/ATTACH] Une fois les drivers adéquats installés, branchez le téléphone à l'ordinateur, autorisez bien évidemment ce dernier à utiliser le [I]débogage USB[/I]. [ATTACH=full]15003[/ATTACH] Ouvrez le navigateur sur mobile et allez sur le navigateur de l'ordinateur simultanément, et ouvrez un nouvel onglet puis mettez "[B]chrome://inspect/[/B]" dans la barre d'adresse ou allez dans "[I]Menu[/I]" > "[I]Outils[/I]" > "[I]Inspecter les appareils[/I]". [ATTACH=full]15009[/ATTACH] N'oubliez pas de cocher la case "[I]Discover USB devices[/I]" si celle-ci ne l'ai pas déjà. Si tout fonctionne correctement, vous devriez voir votre mobile d'affiché. Si la détection n'a pas eu lieue [URL='http://developer.android.com/sdk/index.html#download']vous devez installer le SDK d'Android[/URL] (kit de développement - méthode "[I]Legacy Workflow[/I]"), lancez l'executable "[I]adb.exe[/I]" disponible dans l'arborescence suivante : "[I]sdk[/I]" > "[I]platform-tools[/I]". Vous me connaissez maintenant je pense, ma politique est qu'on apprend beaucoup mieux en visionnant une vidéo qu'en lisant un texte, [U]donc voici un exemple d’exécution :[/U] [media=youtube]x0K28fv4E8Y[/media] [I]En bas à droite se trouve l'écran de mon téléphone que j'ai filmé.[/I] Ce n'est pas tout ! Vous pouvez donc utiliser le célèbre outils de développement mais également gérer vos onglets via l'ordinateur : ouvrir un nouvel onglet, fermer un onglet, rafraîchir un onglet, etc... Et le top du top, vous pouvez voir en [I]live screencasting[/I] le résultat sur votre mobile sans le regarder. :) [ATTACH=full]15010[/ATTACH] Voici le résultat de la page que j'ai édité dans ma vidéo... mais vue depuis le navigateur de l'ordinateur et non depuis l'écran de mon mobile. Pour illustrer de manière professionnelle ce tutoriel, visionnons une petite vidéo issue des développeurs de [I]Google[/I]. [media=youtube]Q7rEFEMpwe4[/media] A noter que depuis la version [B]4.4[/B] ([I]KitKat[/I]) d'[B]Android[/B], les applications qui utilisent une instance [I]Google Chrome[/I] afin d'accéder au web peuvent également être éligibles à l'utilisation des outils de développement, exemple avec la [I]PlayStation App[/I] : [ATTACH=full]15117[/ATTACH] Voilà, vous avez appris quelque chose ? :) [I][COLOR=#ff0000]Ne fonctionne que sur Android. [/COLOR][/I] [COLOR=#000000]:RG:[/COLOR][/CENTER] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
RealityGaming
Remote Debugging - Chrome sur Android
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut