Speak English? Click here to read my English blog!

XRAY, un nouvel outil efficace pour le développement web

Posté par jbj le 17 fév 2008 dans (x)HTML/CSS • 6 commentaires

Si vous êtes développeur ou intégrateur web, il vous arrive certainement souvent de vouloir regarder le code css d’un élément précis sur une page trouvée au hasard du web. Avant, il fallait utiliser le web developper de Firefox pour repérer la classe de l’élément, puis faire une recherche dans la feuille de style. Désormais, un simple clic sur le bouton xray et vous pourrez voir la totalité des détails liés à l’élément, tel que les propriétés css et l’héritage de l’élément.

L’installation d’xray est d’une simplicité déconcertante: Il vous suffira de vous rendre sur le site du projet, puis de glisser-déposer le bouton xray dans votre barre de favoris. Xray fonctionne avec Safari, Firefox ainsi qu’Internet Explorer à partir de la version 6.
Une fois cette opération effectuée, vous aurez un beau bouton “xray” dans votre barre de favoris, comme le montre l’image ci-dessous:

xray-outil-developpeur-web.png

Cliquez sur le bouton: Une fenêtre grise apparait et vous propose de cliquer sur un élément du document html. Au clic, xray affichera de nombreuses informations sur l’élément: hauteur/largeur, héritage html, nom d’id où de classe, ainsi que ces propriétés css.

Même si on regrettera l’impossibilité de copier les informations dans le presse papier et celle de modifier les valeurs des propriétés css en visualisant le rendu directement sur la page, un peu à la manière du web developper de Firefox, xray est un outil efficace qui sera utile ou développeur web lors de débogage, ou tout simplement pour comprendre le fonctionnement d’un élément sur une page web en particulier.

voir-les-proprietes-css-avec-xray.png

Si vous avez aimé cet article, aidez-moi à le promouvoir en votant pour lui sur les sites suivants: Ces icones representent les sites de bookmarking social dans lesquels vos lecteurs peuvent partager et faire découvrir vos pages.
  • del.icio.us
  • Scoopeo
  • Tapemoi
  • Technorati
  • Tutmarks
  • Pioche
  • Blogasty
  • Diggons
  • Wikio
Tags: ,

6 commentaires

» Flux RSS des commentaires
  1. 1001potails le 17 février 2008 à 13:21:

    web developper de Firefox, le fait aussi …
    Aller sur le menu déroulant CSS, —> View style information –> puis avec la souris cliquer sur la partie de votre page que vous voulez trouver le style …

  2. jbj le 17 février 2008 à 13:43:

    Merci à toi pour ce tuyau que je ne conaissait pas! Dommage que la non plus on ne puisse pas éditer le style directement.

  3. tapemoi.com le 17 février 2008 à 16:38:

    XRAY, un nouvel outil efficace pour le développement web…

    Si vous êtes développeur ou intégrateur web, il vous arrive certainement souvent de vouloir regarder le code css d’un élément précis sur une page trouvée au hasard du web. Avant, il fallait utiliser le web developper de Firefox pour repérer l…

  4. Cédric le 17 février 2008 à 18:14:

    Sympa comme truc. Ce qui est certain c’est que j’ai apprécié le processus d’installation ;)

  5. X-OR le 23 avril 2008 à 13:00:

    pas mal en effet ! je ne sais pas si tu connais mais moi j’utilise firebug (plugin firefox) qui permet d’avoir tous les détails en survolant les éléménts et qui permet aussi de faire du debug dans le javascript, de voir les données transmises par formulaires (ajax ou autres), c’est un must un des outils que j’utilise le plus !!! ;)

  6. jbj le 23 avril 2008 à 15:48:

    Ouais Firebug, c’est lemust pour le debug javascript :) Pour tout ce qui est xhtml/css, j’utilise plus Web developper…A essayer d’urgence si tu ne connais pas encore!

Commenter