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.

Trouvez un webdesigner disponible

Trouvez gratuitement le prochain talent qui réalisera votre projet ou rejoindra votre équipe.

 

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.