[Le saviez-vous ?] Firefox permet de visualiser le rendu javascript

Houlala, je sais mon titre est un peu pourri 😀 J'explique ...

Comme tout bon Geek, vous avez mis Internet Explorer aux chiottes de coté et vous surfez donc avec le célèbre renard Firefox ! (si ce n'est pas le cas, je vous invite à le faire !)

Mais saviez-vous que ce petit renard futé pouvait vous aider à visualiser le javascript ?

"Facile ça, il suffit d'afficher le code source ! Même Internet Explorer peut le faire !"

Alors oui effectivement, à peu près n'importe quel navigateur est capable de ça, mais ici je ne parle pas d'afficher simplement les balises <script>, mais d'afficher l'effet du javascript une fois qu'il a été interprété par Firefox !

Hop un exemple !

Texte d'exemple

Donc voilà faite le test, si vous ne sélectionnez rien sur la page, et que vous faites "Clic droit" puis "Code source de la page", vous ne verrez que :

<p id="b">Texte d'exemple </p>

Maintenant sélectionnez une partie du texte, puis faites "Clic droit" puis "Code source de la sélection", vous verrez alors :

<p style="color: rgb(255, 0, 0);" id="b">Texte d’exemple <strong>Et le texte en gras et ajouté via javascript !</strong></p>

Cela peut vous paraitre anodin, mais cette fonction peut servir pour avoir accès à des informations "obfusquées" ... mais surtout, elle va nous permettre de pouvoir décortiquer et personnaliser la mise en page de tous les widgets que l'on affiche dans nos barres latérales !

En effet, qui ne s'est jamais dit que le widget criteo était pourri assez moche, ou que les pubs Blogbang manquaient d'options de personnalisation ? Et bien grâce à cette astuce, je vous expliquerais dans un prochain tutoriel, comment skinner un widget en full javascript 😀

Il ne vous reste plus qu'à ... patienter 😀

Ps: par contre méfiez-vous, le code html généré par l'aperçu du code de Firefox n'est pas valide xhtml 1.0 strict. Même si à la base il l'est !

-----

Articles relatifs

  • fg

    Je m’attendais à trouver une autre méthode que celle là, mais non ^^’.

  • k-ny

    Ah donc voilà quelqu’un qui savait ! 😀

  • Ravi de l’apprendre en tant que passionné d’informatique et de firefox, même si ça me servira peu n’étant pas développeur…
    Merci pour la découverte

  • Une solution bien plus simple et plus complète est d’utiliser firebug, http://getfirebug.com

  • k-ny

    Hello Boris,

    je ne savais pas que firebug permettait de voir le javascript interprété, c’est balo car en plus il est installé sur mon firefox 😀

    Mais bon, ma mini astuce permet de ne pas installer l’extension juste pour ça :p

  • Oui c’est sûr que sur un poste sans firebug cela dépanne 😉

  • Andevros

    Oui, oui c’est bien beau.
    Mais allez télécharger l’extension  » Web Developer » et là plus rien ne vous échappe. !

    Bonne extension à toutes et à tous.

  • k-ny

    Je l’ai aussi ^^

  • Cocci

    Astuce sympa mais petite précision… Firefox n’est pas un renard… mais un Petit panda rouge 😉

    > http://fr.wikipedia.org/wiki/Petit_panda

  • k-ny

    Woaaaaaaa Cocci, merci pour la précision, il fallait le savoir 🙂

  • Andevros > Ah oui exact avec web developer aussi on peut le faire, je savais pas. View Source => View Generated Source

  • C’est un Panda pas un renard un panda !!!