Chrome bêta peut afficher l’écran de votre appareil Android ou l’émuler
Le debug simplifié
Le 04 décembre 2013 à 15h58
4 min
Logiciel
Logiciel
Google vient d'annoncer une amélioration majeure pour les développeurs au sein de Chrome bêta. En effet, la société s'est enfin décidée à intégrer nativement des outils permettant de simplifier le développement mobile en proposant nativement un émulateur d'appareils sous Android ainsi qu'un outil de debug à distance, avec affichage de l'écran du smartphone ou de la tablette.
Développer des sites pour des appareils mobiles n'est jamais simple. Outre la grande disparité de support des fonctionnalités qui existe encore entre les différentes plateformes et les différents navigateurs, les outils de développement ne sont pas toujours adaptés. Conscient de cette problématique, Google semble avoir décidé de faire un pas dans le bon sens avec l'arrivée d'une nouvelle version de Chrome bêta sous Android et pour machine de bureau.
Chrome est désormais capable de se connecter à un appareil sous Android
L'objectif est de rendre plus simple la phase pendant laquelle votre site doit être adapté graphiquement à plusieurs types d'écrans et d'appareils. S'il était déjà possible d'effectuer du debug à distance via Chrome pour Android, ce n'était pas forcément très simple à exploiter et lourd puisqu'il fallait tout d'abord installer le SDK de la plateforme afin de disposer des outils de communication nécessaires. Désormais, cela n'est plus le cas, et seul le pilote USB sera nécessaire, notamment sous Windows.
Ainsi, il vous sera désormais proposé directement de vous connecter à votre appareil dans Chrome, pour peu que le debug USB soit activé, et que vous utilisez les dernières bêtas du navigateur. Pour cela, une nouvelle option fait son apparition au sein des outils afin de lister les appareils connectés en USB à la machine. Vous pourrez vous y rendre directement via l'URL suivante :
Vous pourrez alors envoyer certaines commandes directement comme le fait d'ouvrir un nouvel onglet, le recharger, le fermer, inspecter son code sur votre machine, etc. Toutes vos actions sur l'appareil seront reproduites sur un écran au sein de votre interface et inversement. Vous n'avez donc plus qu'à modifier votre code et à regarder le résultat sur votre machine sans avoir à être collé à votre smartphone ou votre tablette.
Voici une petite démonstration du résultat en vidéo :
Un émulateur d'appareil mobile intégré aux outils de développement
Mais si vous n'avez pas un appareil mobile sous la main, ou la flemme de le connecter, vous pouvez aussi vous reposer sur l'émulation, qui est elle aussi désormais nativement intégrée à Chrome bêta. Un nouvel onglet fait en effet son apparition au sein des outils dédiés aux développeurs aux côtés de la console.
Celui-ci propose des configurations correspondant à différents smartphones et tablettes, mais vous avez aussi accès à de nombreux paramètres sur lesquels vous pouvez jouer : la définition et la résolution de l'écran, l'user agent, les capteurs pouvant être utilisés ou non, etc. Une fois l'émulation lancée, il vous suffira de rafraîchir la fenêtre afin de voir le site tel qu'il s'affichera avec les options sélectionnées. Un curseur vous permettra de simuler les différentes actions possibles en tactile par exemple, ce qui devrait là aussi vous permettre de simplifier votre phase de développement.
On se rappellera d'ailleurs que Firefox, qui propose aussi du debug à distance sous Android, avait aussi travaillé sur une solution permettant de faciliter le travail des développeurs pour ce qui est de la conception de sites de type Responsive Web Design, et propose une série d'outils dédiés aux adeptes de Firefox OS, mais les choses vont ici bien plus loin, et l'on appréciera de ne plus avoir à passer par la case SDK pour disposer d'une solution complète.
Il reste maintenant à voir si les développeurs s'emparent de ces fonctionnalités afin de simplifier leur développement destiné à Chrome, ce qui ne résoudra pas le problème majeur de la segmentation des comportements des navigateurs et des plateformes, qui nous ramène parfois aux heures les plus sombres du développement web.
Pour le téléchargement de Chrome bêta pour Android, ça se passera par ici. Pour la version destinée aux machines de bureau, ça sera par là. Une version portable est aussi disponible à cette adresse. Pour ceux qui voudraient aller plus loin, sachez que Paul Irish, en charge des relations avec les développeurs pour ce qui est de Chrome, a publié une présentation d'un peu plus de vingt minutes sur ces nouvelles fonctionnalités, tournée pendant le Chrome Dev Summit qui a eu lieu il y a quelques jours :
Chrome bêta peut afficher l’écran de votre appareil Android ou l’émuler
-
Chrome est désormais capable de se connecter à un appareil sous Android
-
Un émulateur d'appareil mobile intégré aux outils de développement
Commentaires (24)
Vous devez être abonné pour pouvoir commenter.
Déjà abonné ? Se connecter
Abonnez-vousLe 04/12/2013 à 20h57
Et Chromium ?
Google fait de bonnes choses, à tel point ça va devenir difficile de s’en passer pour utiliser de bons outils et idées pour faire du dév dans ce domaine…
Le 05/12/2013 à 08h00
Le 05/12/2013 à 09h09
Le 05/12/2013 à 09h14
Show ‘Emulation’ view in console drawer
je ne la trouve pas cette option :(
Le 05/12/2013 à 09h23
en fait j’ai l’impression que la version de google indiquée dans l’article n’est pas la bonne et qu’il faut celle ci:
Google
Le 05/12/2013 à 09h47
version de chrome pardon
Le 05/12/2013 à 09h52
Le 05/12/2013 à 11h50
Le 05/12/2013 à 11h56
Le 05/12/2013 à 14h40
tu as lancé le dernier chrome sur ton telephone?
Le 04/12/2013 à 16h03
la même en wifi/3G et je suis un homme heureux !
Le 04/12/2013 à 16h04
Enfin ! Et pour le dev d’applis HTML5 en plus !
" /> Google
Le 04/12/2013 à 16h04
Yeeeeeaaaaaahhhh !
Enfin !
Ca va faciliter le travail :)
Le 04/12/2013 à 16h07
Il reste maintenant à voir si les développeurs s’emparent de ces fonctionnalités afin de simplifier leur développement destiné à Chrome, ce qui ne résoudra pas le problème majeur de la segmentation des comportements des navigateurs et des plateformes, qui nous ramène parfois aux heures les plus sombres du développement web.
d’accord suivant les navigateurs/plateformes mais y a t’il une différence de comportement suivant les versions OS ?
si oui, ben doit pas être simple la vie de dev web mobile
Le 04/12/2013 à 16h08
Pour le wifi, un coup wireless adb et sa doit être bon ;)
Le 04/12/2013 à 16h14
Mouiiii, mais Firefox OS fait ça depuis des lustres (au moins un an et demi).
Le 04/12/2013 à 16h18
Ils sont bon quand même.
Ce qui est bien c’est que tout le monde peut en profiter. ça serait bien si on pouvait émuler l’iPhone/iPad depuis chrome.
Le 04/12/2013 à 16h34
Mais si vous n’avez pas un appareil mobile sous la main, ou la flemme de le connecter, vous pouvez aussi vous reposer sur l’émulation, qui est elle aussi désormais nativement intégrée à Chrome bêta. Un nouvel onglet fait en effet son apparition au sein des outils dédiés aux développeurs aux côtés de la console.
Cette fonctionnalité existe (en grande partie) depuis bien longtemps sous Chrome et je l’utilise régulièrement pour simuler rapidement un affichage mobile au boulot. La seule chose, c’est qu’elle n’était pas vraiment maintenue dans sa liste de profil d’appareil (dernier téléphone android: Galaxy Nexus).
Par contre, un travail sur l’ergonomie du bousin est là bienvenue car c’est vraiment pas pratique d’utilisation.
Le 04/12/2013 à 16h49
Je viens de tester, ça fonctionne très bien niveau debug et screencast de Android vers PC !
Par contre, je n’ai pas l’onglet Emulation dans le debuger de Chrome (sous Windows 7). Serait-ce uniquement sur la version Mac pour l’instant ?
Le 04/12/2013 à 16h55
Correction : il faut activer l’émulation (ce n’est pas fait par défaut) en passant par la roue crantée du debug, puis menu “Overrides” et cocher la case “Show ‘Emulation’ view in console drawer”.
Une fois cette case cochée, ça fonctionne impec !
Le 04/12/2013 à 17h04
Chrome bêta peut afficher l’écran de votre appareil Android ou l’émuler
mais plante lamentablement quand il y a du flash au programme " />
Le 04/12/2013 à 17h21
J’ai du blanc à la place des vidéos, c’est quoi ce binz foireux ? C’est un bug de HTML5 ? D’Ubuntu ?
Le 04/12/2013 à 17h28
Le 04/12/2013 à 18h03
Si on souhaite simplement screencaster son mobile, on peut cacher la partie éditeur ?