Connexion
Abonnez-vous

Chrome bêta peut afficher l’écran de votre appareil Android ou l’émuler

Le debug simplifié

Chrome bêta peut afficher l'écran de votre appareil Android ou l'émuler

Le 04 décembre 2013 à 15h58

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.

Chrome Mobile Remote Debug Screencast

 

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 :

 

chrome://inspect/#devices

 

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 :

 

Commentaires (24)

Vous devez être abonné pour pouvoir commenter.

Abonnez-vous
votre avatar

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…

votre avatar







Jarodd a écrit :



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…





marche pas… le /inspect/ est même pas reconnu. ça doit faire partie du code proprio de google <img data-src=" />


votre avatar







myahoo a écrit :



Mouiiii, mais Firefox OS fait ça depuis des lustres (au moins un an et demi).



Très juste <img data-src=" /> :oui2:

Google est le nouvel Apple, ceci… est une révolution


votre avatar



Show ‘Emulation’ view in console drawer





je ne la trouve pas cette option :(

votre avatar

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.com Google

votre avatar

version de chrome pardon

votre avatar







geekounet85 a écrit :



marche pas… le /inspect/ est même pas reconnu. ça doit faire partie du code proprio de google <img data-src=" />





mea culpa, ça marchait pas chez moi, mais sur un autre chromium, le /inspect/ a l’air de fonctionner, par contre c’est un v32 donc il n’y a pas ces fonctionnalités. je vais le mettre à jour pour voir.


votre avatar







geekounet85 a écrit :



marche pas… le /inspect/ est même pas reconnu. ça doit faire partie du code proprio de google <img data-src=" />







Je croyais que Chrome se basait sur Chromium, il y a donc des bouts de code qui sont dans Chrome et pas repris dans Chromium ? Mais à terme ils vont être très différents non ?



Edit : je vois ton dernier message, donc Chromium a bien la fonctionnalité dont parle l’actu ? Je suis perdu <img data-src=" />


votre avatar







Jarodd a écrit :



Je croyais que Chrome se basait sur Chromium, il y a donc des bouts de code qui sont dans Chrome et pas repris dans Chromium ? Mais à terme ils vont être très différents non ?





C’est l’inverse en fait, Chromium est la partie open-source de Chrome, et Chrome ajoute des morceaux de code proprio de Google à Chromium, lesquels je sais pas, mais au moins le logo et la marque plus certaines fonctions ayant surement trait aux décodages vidéo qui sont soumis à licence, la partie auto-update avec un service, et autres joyeusetés…







Jarodd a écrit :



Edit : je vois ton dernier message, donc Chromium a bien la fonctionnalité dont parle l’actu ? Je suis perdu <img data-src=" />







en fait je viens de tester dans un chromium à jour (v33) et on peut effectivement connecter un Androphone vie le debug USB. par contre j’ai pas réussi à aller plus loin, y’a rien qui s’affiche, juste le “Nexus 4” avec son identifiant à côté, mais aucune action possible.

je sais pas si ça vient de mon PC, j’essaierais ce soir chez moi, en mettant à jour chromium.


votre avatar

tu as lancé le dernier chrome sur ton telephone?

votre avatar

la même en wifi/3G et je suis un homme heureux !

votre avatar

Enfin ! Et pour le dev d’applis HTML5 en plus !



<img data-src=" /> Google

votre avatar

Yeeeeeaaaaaahhhh !



Enfin !

Ca va faciliter le travail :)

votre avatar



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

votre avatar

Pour le wifi, un coup wireless adb et sa doit être bon ;)

votre avatar

Mouiiii, mais Firefox OS fait ça depuis des lustres (au moins un an et demi).

votre avatar

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.

votre avatar



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.

votre avatar

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 ?

votre avatar

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 !

votre avatar

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 <img data-src=" />

votre avatar

J’ai du blanc à la place des vidéos, c’est quoi ce binz foireux ? C’est un bug de HTML5 ? D’Ubuntu ?

votre avatar







Lyon-St-Clair a écrit :



J’ai du blanc à la place des vidéos, c’est quoi ce binz foireux ? C’est un bug de HTML5 ? D’Ubuntu ?







Ah ben j’ai trouvé la raison : Votre système d’intégration marche sous Firefox mais pas sous Chrome !!!!!! <img data-src=" /><img data-src=" /><img data-src=" />


votre avatar

Si on souhaite simplement screencaster son mobile, on peut cacher la partie éditeur ?

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

Fermer