Archives par mot-clé : Chrome

Chrome : Debug d’un site mobile

22 février 2014Developpement Web, WebChrome, debug, Developpement WebJulien

J’ai présenté dans un précédent article comment debuger à distance avec Chrome sous android.

La dernière version de Google Chrome permet d’aller plus loin dans le debug d’application web mobile sous Chrome. (Il faut actuellement avoir Chrome beta pour android (rev32) pour avoir cette fonctionnalité).

Plus facile pour débugger à distance car le driver est inclus dans Chrome
Visualisation du contenu du mobile dans le navigateur via un émulateur. Possibilité d’interagir directement dans l’émulateur (Utilisation du clavier, sélection d’élément via l’inspecteur, …)
Émulation d’une configuration d’un terminal
Redirection de port (permet de faire pointer sur le terminal localhost sur la machine de dev)

Je vous conseille la lecture de l’article de présentation sur html5rocks, le lien vers la page des chrome DevTools, et la vidéo de présentation :

Chrome : Bien débuger avec la barre d’outils # 2

18 décembre 2013CSS, WebChrome, debugJulien

Cet article fait suite à l’article Chrome : Bien débuger avec la barre d’outils.

Ajouter une Watch Expression

Lors de debug JavaScript, vous devez regarder dans vos objets pour surveiller l’évolution des valeurs de vos variables. Chrome permet de rajouter des expressions afin de plus facilement surveiller ces valeurs. Ces expressions sont gardées au rafraîchissement de la page.

Les Watch Expressions sont gérés dans l’onglet Sources, dans la partie droite, dans l’accordéon du même nom. L’ajout se fait en cliquant sur le +. Il suffit ensuite d’entrer l’expression dans la textbox qui propose l’auto-complétion. Les valeurs sont automatiquement mis en jour en debug et il est possible de les rafraîchir via l’icône de rechargement.

Emuler les événements de touch

Aujourd’hui les tablettes et smartphones sont de plus en plus répandu et beaucoup les utilisent pour naviguer sur Internet. Sur ces appareils sans souris, ce sont des événements « touch » (avec les doigts) qui sont émis. Chrome permet d’émuler ces événements touch. Pour cela il faut aller dans la barre de développement de Chrome, aller dans les préférences (icône en bas à droite en forme d’engrenage), et aller dans Overrides et cocher la case Emulate touch events. Bien entendu, vous ne pourrez pas simuler plusieurs doigts mais c’est déjà ça !!

Emuler un User Agent et la résolution d’un appareil

Chaque navigateur peut être identifié par ce que l’on appelle un User Agent. Cette information est envoyée à chaque requête au serveur et contient notamment des informations concernant le nom de l’application, la version, le système d’exploitation, la langue, etc…

Il est ainsi possible de modifier la réponse en fonction des informations de l’User-Agent comme renvoyé une page spécifique pour les appareils mobile par exemple.

Chrome permet de modifier cet User-Agent. Pour cela, il faut ouvrir la barre de développement de Chrome, aller dans les préférences (icône en bas à droite en forme d’engrenage), et aller dans Overrides et cocher User Agent. Une liste des principaux navigateur et appareils sont pré-configurés (Firefox, IE, IPhone, IPad, Android, …)

Il est également possible de simuler une résolution (j’avais expliqué dans un post précédent comment le faire avec Firefox) encochant l’option Device metrics. On peut choisir une résolution de manière manuelle et définir le facteur de zoom (Font scale factor). Dans le cas d’un appareil mobile, la sélection d’un user agent met à jour automatiquement la configuration avec celle de l’appareil choisi. Super Pratique !!!!

Voici en exemple mon CV configuré pour un téléphone Android Nexus S.

Simuler une géolocalisation

Aujourd’hui, de plus en plus d’application utilise la géolocalisation pour offrir des résultats adaptés à notre localisation (ex : pages jaunes). Chrome permet de simuler une géolocalisation et une position non disponible.

Emuler un média CSS

CSS permet d’adapter le rendu suivant le média sur lequel est affiché le site (écrans, projecteurs, imprimante, tv, Synthèses vocales, …). Chrome permet d’émuler un média. Cela se fait toujours dans les préférences de Chrome, Overrides, cocher Emulate CSS media et sélectionner le média à cibler. Cela s’avère très pratique notamment dans le cas de l’impression (j’avais évoquer la gestion des liens lors de l’impression dans un précédent article). Ci dessous, l’exemple de mon CV via l’émulateur avec le média print :

Console.Table

Vous utilisez surement abusivement de console.log pour débuguer vos scripts. Console.table est une méthode qui permet d’afficher le résultat sous la forme d’un tableau. Cela est pratique pour visualiser les objets de types Arrays mais également les objets.

A noter, que console.table() est également disponible sous Firebug.

Voici un article complet de présentation de console.table().

Liens

HTML 5 : LocalStorage et SessionStorage

22 octobre 2013Developpement Web, JavaScriptChrome, Firebug, HTML5, JavaScript, storageJulien

HTML5 apporte plusieurs solutions concernant la sauvegarde de données coté client :

Web SQL database (qui n’est plus maintenue par le W3C)
IndexedDB
Local storage et session storage
HTML5 File API

Nous allons parler dans cet article de Local storage et session storage qui permettent de sauvegarder coté client des données sous forme clé/valeurs au format texte. La différence entre les 2 est la durée de conservation des données stockées :

LocalStorage : pas de limite de temps. Conservé à la fermeture de la page/navigateur.
SessionStorage : données conservée seulement le temps d’une session. Cela peut être utile pour partager des infos entre 2 onglets sur le même site, formulaire multi-page.

Ces 2 stores permettent de s’affranchir des limitations des cookies puisqu’on peut sauvegarder 5 Mo au lieu de 4Ko.

Les 2 stores partagent la même interface (api) avec les méthodes suivantes :

getItem : Permet de récupérer une valeur via sa clé
setItem : Permet de mettre a jour une valeur via sa clé
removeItem : Permet de supprimer un item via sa clé
clear : Supprime toutes les items du store
length : Nombre d’items du store
key(n) : retourne la clé à l’index n (null si pas de résultats)

LocalStorage et SessionStorage étant des tableaux, vous pouvez également utiliser les syntaxes suivantes :

window.localStorage.maCle //--> renvoie la valeur associée à la clé maCle
window.sessionStorage["maCle"] //--> renvoie la valeur associée à la clé maCle

Afin d’illustrer cet article, j’ai utilisé le localStorage sur ma page de gestion d’un match de volley que j’avais déjà évoquer dans des articles précédents :

Le LocalStorage va nous permettre de sauvegarder et visualiser les résultats des matchs précédents et sauvegarder les noms des dernières équipes utilisées.

Voici les fonctions qui vont permettre de récuperer et sauvegarder le nom des équipes dans le localStorage :

var getTeamName = function(nb) {
    var storage = window.localStorage;
    //Verifie si navigateur compatible localStorage et si il y a une valeur
    if (storage && storage.getItem('Team' + nb)) {
            return storage.getItem('Team' + nb);
    }
    //On retourne une valeur par défaut
    return "Equipe " + nb;
};

var saveTeamName = function(nb, value) {
    var storage = window.localStorage;
    //Verifie si navigateur compatible localStorage
    if (storage) {
        storage.setItem('Team' + nb, value);
    }
};

On ne peut sauvegarder que du texte. Mais il possible de sauvegarder des objet au format JSON. Nous allons ainsi sauvegardés la liste des matchs sous la forme d’un tableau qui sera sérialisé en JSON.

var storage = window.localStorage;
var saveGame = function (game) {
    var savedGames;
    if (storage) {
        savedGames = JSON.parse(storage.getItem('games')) || [];
        savedGames.push(game);
        storage.setItem('games', JSON.stringify(savedGames));
    }
},
getSavedGames = function () {
    if (storage) {
        return JSON.parse(storage.getItem('games')) || [];
    }
};

Et voila. Vous pouvez voir le résultat ici.

Outils

Les barres de développeurs permettent de consulter les données enregistrées. Voyons comment visualiser ces données sous Chrome et Firebug (voir les références pour un les autres navigateurs).

Sous Chrome, il faut aller dans l’onglet Resources / LocalStorage (ou SessionStorage).

Sous Firebug, il faut aller dans l’onglet DOM, et regarder dans l’objet LocalStorage.

Références

Quelques liens utiles :

Conclusion

Le localStorage/SessionStorage est très facile à mettre en œuvre et peut s’avérer très pratique afin d’améliorer les possibilités d’un site/application web. Pour ne rien gâcher, ils sont très bien supportés (même IE8 le supporte !!!) donc utilisable en production.

HTML 5 : Debogage du mode offline

6 octobre 2013Developpement WebChrome, debug, Firebug, HTML5, offlineJulien

J’ai abordé dans un article précédent la gestion du mode offline en HTML 5.

Voyons comment débugger un site avec une gestion du mode offline.

Chrome

Comment souvent, c’est la barre d’outils de Chrome qui s’avère la plus efficace pour déboguer. Sous Chrome, les événements liés à la mise à jour du cache sont affichés dans la console. On peut ainsi voir la liste des fichiers qui sont téléchargés pour être mis en cache.

2 petite précisions qui ont leur importance :

Ne mettez pas le manifest lui-même en cache où il sera impossible au navigateur de savoir qu’une nouvelle version est disponible.
Comme le document a déjà été chargé dans le navigateur à partir du cache, la nouvelle version ne sera affichée qu’après rechargement (manuel ou via programmation). (cf abonnement à l’événement updateready ci-dessous)

//Méthode appelée apres mise à jour du cache
function onUpdateReady() {
  alert('Nouvelle version chargée!');
}
//on s'abonne à l'événement de mise à jour du cache
window.applicationCache.addEventListener('updateready', onUpdateReady);
if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
  onUpdateReady();
}

La console affiche les fichiers en erreurs. Il faut savoir que si il y a une erreur, le cache n’est pas mis à jour.

La liste des ressources en cache peut être visualiser dans la barre d’outils > Ressources > Application Cache.

Il est également possible de vider le cache en se rendant à l’URL chrome://appcache-internals/. Cette page permet de visualiser la liste des sites ayant des données dans l’application cache. Pour chaque site, il est possible de visualiser la liste des fichiers (View Entries) et de supprimer le cache (Remove).

Autres Navigateurs

Afin de débugger plus facilement, voici un script à placer sur votre site qui va logger dans la console les événements liés au cache et simule une mise à jour toutes les 10s.

Dans Firebug, il est possible de consulter, dans l’onglet DOM, l’objet ApplicationCache mais il est toujours vide !!!

Ressources

Article sur l’utilisation de Application Cache sur le MDN
Guide d’utilisation d’Application Cache pour les débutants sur HTML5Rocks (en)

Chrome : Deboger votre android à distance

17 septembre 2013Android, Developpement WebChrome, debugJulien

Le déclin du PC et la popularité croissante des tablettes / smartphones implique que les sites web doivent prendre en compte ce nouveau type de devices et leur contraintes (résolution, puissance, …). Le développement et le debogage pour ce type de device n’est pas aussi simple que cela ne peut l’être sur PC.

Voyons comment faire du débogage de site web sur un Android équipé de Chrome connecté en USB à un PC. (J’ai pu tester sous Windows 7 avec une tablette Samsumg Galaxy Tab 3 et sous Linux Ubuntu avec mon Samsung Nexus S, et cela fonctionne sans problème)

Installer ADB

ADB est l’extension Chrome qui permet de débugger votre appareil Android à distance.

Installer le driver de votre Android sous Windows

Sous windows, il faut installer le driver suivant le constructeur de votre android. Voici la page concernant l’installation d’un driver pour Android sous Windows.

Pour ma part, j’ai eu à installer le driver Samsung que l’on peut trouver ici.

Cela n’est pas nécessaire pour Linux ou Mac.

Activer le débogage USB sur votre android

Il faut ensuite activer le débogage via USB de votre téléphone ou tablette.

Pour cela, cela dépend de la version d’Android :

Pur les Android 3.2 et plus anciens, vous pouvez trouver l’option sous Paramètres > Applications > Développement.
Pour Android 4.0 et plus récent, Paramètres > Développeur.
A partir d’Android 4.2, les options développeurs sont cachés par défaut. Pour les rendre visible, il faut aller dans Paramètres > A propos du téléphone et tapper 7 fois sur le numéro de build. Retourner à l’écran précédent pour trouver les options Développeurs.

Il faut cocher l’option Débogage USB.

Activer le débogage USB dans Chrome

Il faut ensuite activer l’option dans Chrome (à partir de la version 28 ) via Paramètres > Avancés > Outils de développement et cocher Activer débogage USB pour le Web.

Brancher votre Android en USB

Au branchement de votre appareil, il vous est demander d’autoriser votre machine à déboguer votre téléphone ou tablette. Cliquer sur OK.

Deboguer avec ADB

I l faut ensuite lancer ADB en cliquant sur Start ADB dans le menu d’ADB.

L’icone d’ADB indique alors le nombre de device connectés.

Il faut ensuite cliquer sur View Inspection Targets pour afficher les éléments pour lesquels on peut effectuer un débogage à distance, dont les pages ouvertes dans Chrome de votre Android.

Il suffit de cliquer sur inspect pour lancer le débogage d’une page.

La barre d’outils de développement sur le PC :

Chrome sous Android en mode débogage :

Référence

La page d’explication (en anglais) sur le portail développeurs de google.

Chrome : Bien débuger avec la barre d’outils

25 juillet 2013Developpement WebChrome, debug, jqueryJulien

Chrome est un formidable outil de développement pour le web. Voici quelques trucs et astuces pour bien debuger avec Chrome.

Extensions

Il est possible d’ajouter des extensions à la barre d’outils de développement que vous trouverez sur le chrome webstore dans la catégorie Outils de développement. (toutes les extensions ne se rajoute pas à la barre d’outils).

jQuery Debugger : permet de visualiser rapidement dans votre page le résultat d’un sélecteur jQuery
Pagespeed insights : analyse votre page et vous donne des recommandations pour améliorer les performance de votre site

Canary

Chrome Canary est la version « bêta » de Chrome qui contient pas mal de nouveautés dans la barre d’outils qui seront plus tard intégré dans la version courante de Chrome. C’est une version dédié aux développeurs. Canary s’installe en parallèle de Chrome et on peut donc utiliser les 2 simultanément sans aucun problème.

Activer les expérimentations

Les nouveautés en cours de développement de Chrome ne sont pas activé par défaut mais peuvent l’être via l’interface de gestion des fonctionnalités expérimentales. Il en est de même pour la barre de développement. Pour les activer il faut aller à l’url chrome://flags/, activer l’option Activer les expérimentations dans les outils de développement puis redémarrer.

Un onglet Experiments dans les paramètres de la barre d’outils de développement permet d’activer certaines fonctionnalités.

Snippets

Chrome (canary par défaut et chrome si activation dans les expérimentations) permet la gestion de snippets. Il s’agit de bout de code JavaScript que vous allez pouvoir enregistrer afin de pouvoir les exécuter rapidement au lieu de les taper à la main via la console. Vous trouverez ici une liste de snippets prêt à l’emploi.

Rejouer des appels Ajax

Qui dit développement d’application web riche dit appel AJAX afin de récupérer des données. Il est possible de rejouer des appels AJAX (ou XHR pour XMLHttpRequest) directement depuis la barre d’outils. Pour cela, il faut aller dans l’onglet Networks, clic droit sur l’appel Ajax (XHR) puis cliquer sur Replay XHRs

Pause on exceptions

Chrome possède également une option permettant de mettre en pause le code JavaScript dès qu’une exception est levée. Il y a 3 modes :

Ne pas s’arrêter lors des exceptions. Le mode par défaut.
S’arrêter à toutes les exceptions.
S’arrêter à toutes les exception non catchées (sans bloc try/catch).

Le passage d’un mode à l’autre se fait en cliquant sur le symbole pause en bas de la l’onglet Sources.

Pretty Print JavaScript

Une bonnes pratique pour avoir de bonnes performances consiste a minifier vos scripts JavaScript afin que ceux-ci soit plus léger et donc plus rapide à télécharger. Cependant, vos fichiers ne sont plus facilement débugable (en production). Chrome intègre un outil qui permet de formater un fichier afin de le rendre plus lisible et plus facile à debuger. Il suffit pour cela d’ouvrir un script dans l’onglet Sources et de cliquer sur { }. (le bleu indique que la fonctionnalité est activée)

Désactiver le cache

Le cache du navigateur peut vous amener à perdre du temps lors du développement de votre application web (vous pensez utiliser la dernière version de votre site mais vous utiliser une ancienne version d’un fichier issu du cache de votre navigateur). La barre d’outils Chrome permet de désactiver le cache pour toujours récupérer le fichier du serveur. Pour cela, il faut cocher Disable Cache dans l’onglet General des paramètres de la barre d’outils. Cela n’est pris en compte seulement si la barre d’outils est ouverte.

Changer le thème de la barre d’outils

De nombreux outils de développement permettent de configurer le thème (couleurs, police, …) et la barre d’outils de Chrome n’échappe pas à la règle. En fait, il s’agit d’une application web et il suffit donc de modifier le style CSS afin de satisfaire vos besoins.

Le fichier se nomme Custom.css et se trouve dans :

Windows: « C:\Users\**Your username**\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\ »
Mac: « ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/ »
Linux: « ~/.config/chrome/Default/User StyleSheets/ »

Vous pouvez trouvez des thèmes prêt à l’emploi ici : http://devthemez.com/themes/chrome-developer-tools (contient également des thèmes pour sublime text 2, vim, …)

Liens

Chrome : Editer le code JavaScript dans la barre des outils développeurs

3 juin 2013Developpement Web, JavaScriptChrome, JavaScriptJulien

Vous avez sûrement dû vous rendre compte que je fais mal de JavaScript en ce moment :). Voici encore une astuce que j’ai découverte il y a peu et qui va vous faire gagner en productivité. J’imagine que la plupart d’entre vous savent et utilisent l’édition des styles directement depuis la barre d’outil de leur navigateur mais savez-vous que sous Chrome il est également possible d’éditer votre code JavaScript. Cela vous évite de devoir effectuer des allers-retours entre votre navigateur et votre éditeur de code.

Pour cela, il suffit simplement d’ouvrir la barre d’outils de développement de Chrome (F12 ou Maj+Ctrl+I ou via le menu), d’aller dans l’onglet Sources, de sélectionner un fichier. Il vous suffit ensuite de cliquer à l’endroit où vous souhaitez effectuer vos modifications et les effectuer … Le fichier apparaît alors avec une * indiquant que le fichier est en cours de modification et un Ctrl+S permet d’enregistrer vos modifications.

Une fonctionnalité encore plus puissante est qu’il ait également possible de visualiser les modifications effectuées sur le fichier comme vous pouvez l’avoir dans un gestionnaire de sources type SVN, CVS, … Pour cela, il suffit de faire clic droit sur le fichier et cliquer sur Local Modifications …

La liste des modification apparaît alors. Magique !!!

Il est bien sur possible de sauvegarder les modifications effectuées via un clic droit sur le fichier puis Save ou Save As …

J’espère que les autres navigateurs implémenteront cette fonctionnalité très pratique.

Astuces pour bien débuger du Javascript avec la Console : Command Line API

15 mai 2013Developpement Web, JavaScriptChrome, Firebug, Firefox, JavaScriptJulien

Les développeurs web connaissent bien les barres d’outils des navigateurs qui permettent de développer et déboguer plus facilement des sites. Ces barres d’outils mettent à disposition des alias et des fonctions utilitaires pour augmenter votre productivité. A priori, la barre d’outils (qui s’est grandement améliorée) de IE (même dans sa version 10) ne les proposent pas 🙁

$0, $1, …, $4

Ces alias permettent d’accéder aux éléments inspectés via l’inspecteur d’éléments (Firebug ne permet d’accéder qu’aux 2 derniers mais fournit une fonction $n qui permet de récupérer l’un des 5 derniers éléments sélectionné)

$_

Retourne la dernière valeur évaluée dans la console (Chrome seulement)

$ et $$

alias des fonctions document.querySelector() et document.querySelectorAll() (j’avais évoqué ces fonctions dans un article précédent)

Inspect()

Cette fonction prend en paramètre un objet du DOM et permet de l’afficher dans l’inspecteur d’élément

keys(object) & values(object)

Ces 2 fonctions permettent d’afficher respectivement les clés et les valeurs de propriétés d’un objet.

monitorEvents

Cette fonction permet de logger les évènements émis pour un élément donné. On peut filtrer suivant le type d’événement. Seulement disponible sur Chrome.

Copy

Copie le paramètre dans le presse papier. Cela peut être une valeur retournée par une fonction ou un objet.

Clear

Vide la console. Les barres d’outils proposent également des boutons pour le faire.

Références

Références des API Command Line de Chrome, Firebug et
Firefox
CheatSheeet : Chrome et Firebug.
Become a Javascript Console Power-User : Une vidéo montrant pas mal de ces astuces (en anglais)

Firefox/Chrome : Forcer l’état d’un élément

18 avril 2013CSS, Developpement WebChrome, CSSJulien

Les navigateurs modernes possèdent aujourd’hui des outils pour développeurs très puissant que ça soit pour le HTML, CSS, JavaScript, profiling, … En CSS, la possibilité d’éditer les styles en « live » est très pratique mais peut s’avérer complexe dans certains cas comme la gestion des états (hover, focus, …). Voyons comment debugger plus facilement ce cas avec les consoles web de Chrome, Firefox et Firefug (extension pour Firefox bien connue des développeurs web). (Je n’ai pas trouver comment faire sous IE et n’utilise pas d’autres navigateurs comme Opera ou Safari …)

En effet il est possible de forcer un état sur un élément avec ces outils, ce qui est très pratique notamment pour l’état :hover (survol d’un élément).

Chrome

Il faut faire un clic droit sur l’élément dans l’inspecteur d’élément (Onglet Elements dans la barre d’outils développeur. F12 pour l’ouvrir) et choisir l’état dans le menu Force element state.

Les états gérés sont :

active
hover
focus
visited

Firefox

Sous Firefox, cela fonctionne de la même façon que sous Chrome à la seule différence que l’état visited n’est pas disponible.

Firebug

Avec Firebug, l’activation est un peu plus difficile à trouver. Une fois l’élément sélectionné dans l’explorateur HTML, il faut cliquer sur la flèche de l’onglet Style pour pouvoir activer l’état voulu. Firebug ne gère que les états :hover, :active et :focus comme Firefox.

Astuce pour bien débuger du Javascript sous Chrome

7 mars 2013JavaScriptChrome, Firebug, Firefox, JavaScriptJulien

De nos jours, les navigateurs modernes possèdent des outils très puissant de débogage comme Chrome Developer Tools sous Chrome ou Firebug/Outils de développement Web sous Firefox par exemple.

Pour les 3, les consoles web offre de la complétion sur le JavaScript mais sous Firebug la complétion est plus puissante. En effet, si j’utilise le sélecteur JQuery, j’obtiens les fonctions accessibles via auto complétion comme le montre l’exemple ci dessous.

Sous Chrome, cela ne fonctionne pas mais j’ai une astuce afin d’obtenir cette auto complétion qui vous permettra de gagner du temps. L’astuce consiste à passer par une variable intermédiaire et la complétion marchera.

sans Variable -> pas d’auto complétion 🙁
avec Variable -> Auto complétion 🙂

Bon débogage !!!