• A la une
  • Catégories
  • Dossiers
  • +

Débuggez votre javascript sur mobile avec Eruda

par Benjamin SANCHEZle 11/05/2016

Le développement web n'est malheureusement pas devenu moins complexe avec l'arrivée du mobile, bien au contraire. Je dis cela en pensant à la responsive, bien entendu, mais aussi aux interactions Javascript et aux optimisations réseau, qui sont souvent très complexes à logger et debugger sur mobile, par manque d'outils adaptés comme Firebug ou les outils pour développeur de Chrome.

Pour essayer de combler ce manque, je vous propose de découvrir Eruda.

Corrigez vos erreurs HTML et JS sur mobile avec Eruda

Eruda est un équivalent aux outils de développement du chrome, mais pensé et optimisé pour utilisation sur mobile. Son installation est des plus simples : téléchargez le script (via NPM ou à la main), appelez-le dans votre page avec le petit bout de codes fournis sur leur dépôt Github, et vous êtes bon.

Une fois en place, pour le démarrer, appuyez sur le bouton en bas à droite. Cela vous ouvrira la console en bas de votre écran, avec neuf onglets vous permettant de naviguer entre les fonctionnalités.

 

La plupart des fonctionnalités sont présentes : Console Javascript, navigation dans les éléments du dom, informations sur la page et bien sûr affichage des sources. Petit reproche tout de même, il n'existe actuellement pas d'onglet permettant de tracer les appels xhr, ce qui est fort dommage.

Autre petit reproche, l'analyse du dom n'est pas réellement pratique actuellement, espérons que l'outil évolue assez vite sur ce point.

Pour finir, il est important de noter que l'outil est open source et qu'il est simple de créer et d'y ajouter des fonctionnalités a travers un système de plugins.

Je vous conseille de le tester pour vous faire une idée. Flasher simplement ce QR code pour tomber sur une page d'exemple !

Pour aller plus loin, découvrez AlloyLever

AlloyLever est un équivalent à Eruda, que je trouve personnellement moins complet et agréable à utiliser. Pourquoi le presenter tout de même, me direz-vous ? Pour son Code source pardi !

En effet, cette ressource construite avec Nuclear a un code source clair et lisible (bien que manquant clairement de commentaires, ce qui peut gêner par endroits) et extrêmement concis. Si vos êtes intéressé par la création d'un outil de ce genre (ou simplement pour comprendre comment cela fonctionne) je vous conseille vraiment de commencer par là. Sa lecture ne vous prendra qu'une petite demi-heure, et permet de mieux comprendre le fonctionnement de ce genre de ressources.

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte
twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
twitter bird
Ouvrir