Outils de développement

  • Raccourci de la révision : Outils
  • Titre de la révision : Outils pour développeurs
  • ID de la révision : 441863
  • Créé :
  • Créateur : Delapouite
  • Version actuelle ? Non
  • Commentaire merged into generic Outils tags

Contenu de la révision

Cette page liste les outils qui vous aideront à développer et à déboguer vos sites web et vos applications web. Cette liste se concentre principalement sur les outils développés et maintenus par Mozilla, mais nous avons aussi listés des outils populaires et utiles dans la section "Plus d'outils".

Outils pour développeurs par Mozilla

Cette section liste les outils développés et maintenus par l'équipe "Developer Tools" de Mozilla. Ces outils sont tous accessibles depuis Firefox, dans le menu "Firefox" (ou le menu "Outils" sur OS X et Linux), puis "Développeur Web".

La plupart de ces outils sont directement intégrés à Firefox à travers le panneau dédié, mais le simulateur Firefox OS est disponible à travers un add-on.

Inspecteur
Voir et modifier l'HTML et le CSS de l'élément sélectionné
Console Web
Voir des informations, des messages d'erreurs ou d'avertissements émis par le navigateur ou la page web. Permet aussi d'examiner et de manipuler le JavaScript de la page.
Éditeur de styles
Voir et modifier les styles CSS de la page affichée.
Ardoise JavaScript
Un éditeur de texte intégré à Firefox vous permettant d'écrire et d'exécuter du JavaScript.
Débogueur JavaScript
Parcourez votre code JavaScript s’exécutant dans le navigateur et observer les variables pour chasser les bugs.
Profileur JavaScript
Utilisez le profileur pour savoir à quels endroits votre code JavaScript passe le plus de temps.
Vue adaptative
Voir comment votre site web ou votre application web est rendu à différentes tailles d'écran sans changer la taille de la fenêtre du navigateur.
Barre de développement
Une interface en ligne de commande pour manipuler et travailler avec les outils pour développeurs de Firefox, et des boutons pour accéder aux outils les plus courants.
Console d'erreurs
Signale les erreurs et les avertissements liés à JavaScript, les erreurs CSS, et les différentes erreurs issues de l'interface ou du contenu Web.
Vue 3D
Affiche une représentation en 3D de la page visitée.
Simulateur Firefox OS
Exécuter et déboguer votre application Firefox OS sur votre ordinateur, sans avoir besoin d'un appareil Firefox OS.
Débogage distant
Utilisez le Débogueur JavaScript ou la Console Web pour déboguer votre appareil Android par USB ou WiFi.

Obtenir de l'aide

Si vous avez des questions sur les outils pour développeurs inclus dans Firefox, venez les poser sur la liste de diffusion dev-developer-tools ou sur le canal #devtools sur le réseau IRC de Mozilla.

Cette section liste des outils qui ne sont pas maintenus par l'équipe "Developer Tools" de Mozilla, mais qui sont pour autant très utilisés par les développeurs web. Nous avons inclus quelques add-ons Firefox dans la liste. Vous trouverez une liste complète dans la catégorie "Développement Web" de addons.mozilla.org.

Firebug
Un outil de développement Web très puissant et très populaire. Il inclut un débogueur JavaScript, des outils pour voir et modifier le code HTML et CSS, et surveiller le trafic réseau.
Inspecteur DOM
Inspectez, parcourez et éditez le DOM des pages web et des fenêtres XUL.
Web Developer
Ajoute un menu et une barre d'outils au navigateur, avec différents outils dédiés au développement Web.
Outils Webmaker
Une suite d'outils développés par Mozilla, pensés pour des personnes commençant le développement Web.
Validateurs W3C
Le site du W3C héberge plusieurs outils pour vérifier la validité de votre site web par rapport aux standards. Il existe un validateur HTML et un validateur CSS.
JSHint
Un outil d'analyse de code JavaScript
JSLint
Un autre outil d’analyse de code JavaScript

 

 

Source de la révision

<p>Cette page liste les outils qui vous aideront à développer et à déboguer vos sites web et vos applications web. Cette liste se concentre principalement sur les outils développés et maintenus par Mozilla, mais nous avons aussi listés des outils populaires et utiles dans la section "Plus d'outils".</p>
<div class="cleared topicpage-table">
  <div class="section">
    <h2 class="Documentation" id="Documentation" name="Documentation">Outils pour développeurs par Mozilla</h2>
    <p>Cette section liste les outils développés et maintenus par l'équipe "Developer Tools" de Mozilla. Ces outils sont tous accessibles depuis Firefox, dans le menu "Firefox" (ou le menu "Outils" sur OS X et Linux), puis "Développeur Web".</p>
    <p>La plupart de ces outils sont directement intégrés à Firefox à travers le panneau dédié, mais le <a href="/en-US/docs/Tools/Firefox_OS_Simulator" title="/en-US/docs/Tools/Firefox_OS_Simulator">simulateur Firefox OS</a> est disponible à travers un add-on.</p>
    <dl>
      <dt>
        <a href="/fr/docs/Outils/inspecteur" title="HTML/Element">Inspecteur</a></dt>
      <dd>
        Voir et modifier l'HTML et le CSS de l'élément sélectionné</dd>
      <dt>
        <a href="/en-US/docs/Tools/Web_Console" title="HTML/Attributes">Console Web </a></dt>
      <dd>
        Voir des informations, des messages d'erreurs ou d'avertissements émis par le navigateur ou la page web. Permet aussi d'examiner et de manipuler le JavaScript de la page.</dd>
      <dt>
        <a href="/en-US/docs/Tools/Style_Editor" title="HTML/HTML5">Éditeur de styles</a></dt>
      <dd>
        Voir et modifier les styles CSS de la page affichée.</dd>
      <dt>
        <a href="/en-US/docs/Tools/Scratchpad" title="HTML/Forms">Ardoise JavaScript</a></dt>
      <dd>
        Un éditeur de texte intégré à Firefox vous permettant d'écrire et d'exécuter du JavaScript.</dd>
      <dt>
        <a href="/en-US/docs/Tools/Debugger" title="HTML/Bad_copy_pasting_habits">Débogueur JavaScript</a></dt>
      <dd>
        Parcourez votre code JavaScript s’exécutant dans le navigateur et observer les variables pour chasser les bugs.</dd>
      <dt>
        <a href="/en-US/docs/Tools/Profiler" title="HTML/Bad_copy_pasting_habits">Profileur JavaScript</a></dt>
      <dd>
        Utilisez le profileur pour savoir à quels endroits votre code JavaScript passe le plus de temps.</dd>
      <dt>
        <a href="/en-us/docs/Tools/Responsive_Design_View" title="/en-us/docs/Tools/Responsive_Design_View">Vue adaptative</a></dt>
      <dd>
        Voir comment votre site web ou votre application web est rendu à différentes tailles d'écran sans changer la taille de la fenêtre du navigateur.</dd>
      <dt>
        <a href="https://developer.mozilla.org/en-US/docs/Tools/GCLI" title="en/Tools/GCLI">Barre de développement</a></dt>
      <dd>
        Une interface en ligne de commande pour manipuler et travailler avec les outils pour développeurs de Firefox, et des boutons pour accéder aux outils les plus courants.</dd>
      <dt>
        <a href="https://developer.mozilla.org/en-US/docs/Error_Console" title="en/Error_Console">Console d'erreurs</a></dt>
      <dd>
        Signale les erreurs et les avertissements liés à JavaScript, les erreurs CSS, et les différentes erreurs issues de l'interface ou du contenu Web.</dd>
      <dt>
        <a href="/en-US/docs/Tools/3D_View" title="en/Error_Console">Vue 3D</a></dt>
      <dd>
        Affiche une représentation en 3D de la page visitée.</dd>
      <dt>
        <a href="/en-US/docs/Tools/Firefox_OS_Simulator" title="en/Error_Console">Simulateur Firefox OS</a></dt>
      <dd>
        Exécuter et déboguer votre application Firefox OS sur votre ordinateur, sans avoir besoin d'un appareil Firefox OS.</dd>
      <dt>
        <a href="/en-US/docs/Tools/Remote_Debugging" title="en/Error_Console">Débogage distant</a></dt>
      <dd>
        Utilisez le Débogueur JavaScript ou la Console Web pour déboguer votre appareil Android par USB ou WiFi.</dd>
    </dl>
  </div>
  <div class="section">
    <h2 class="Community" id="Community" name="Community">Obtenir de l'aide</h2>
    <p>Si vous avez des questions sur les outils pour développeurs inclus dans Firefox, venez les poser sur la liste de diffusion <a href="https://lists.mozilla.org/listinfo/dev-developer-tools" title="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developer-tools</a> ou sur le canal <a href="http://mibbit.com/?channel=%23devtools&amp;server=irc.mozilla.org">#devtools</a> sur le <a href="http://irc.mozilla.org/">réseau IRC de Mozilla</a>.</p>
    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Plus d'outils</h2>
    <p>Cette section liste des outils qui ne sont pas maintenus par l'équipe "Developer Tools" de Mozilla, mais qui sont pour autant très utilisés par les développeurs web. Nous avons inclus quelques add-ons Firefox dans la liste. Vous trouverez une liste complète dans la <a href="https://addons.mozilla.org/fr/firefox/extensions/web-development/" title="https://addons.mozilla.org/fr/firefox/extensions/web-development/">catégorie "Développement Web" de addons.mozilla.org</a>.</p>
    <dl>
      <dt>
        <a href="https://www.getfirebug.com/" title="HTML/Forms">Firebug</a></dt>
      <dd>
        Un outil de développement Web très puissant et très populaire. Il inclut un débogueur JavaScript, des outils pour voir et modifier le code HTML et CSS, et surveiller le trafic réseau.</dd>
      <dt>
        <a href="/fr/docs/Inspecteur_DOM" title="HTML/Forms">Inspecteur DOM</a></dt>
      <dd>
        Inspectez, parcourez et éditez le DOM des pages web et des fenêtres XUL.</dd>
      <dt>
        <a href="https://addons.mozilla.org/fr/firefox/addon/web-developer/" title="HTML/Forms">Web Developer</a></dt>
      <dd>
        Ajoute un menu et une barre d'outils au navigateur, avec différents outils dédiés au développement Web.</dd>
      <dt>
        <a href="https://webmaker.org/en-US/tools/" title="https://webmaker.org/en-US/tools/">Outils Webmaker</a></dt>
      <dd>
        Une suite d'outils développés par Mozilla, pensés pour des personnes commençant le développement Web.</dd>
      <dt>
        <a href="http://www.w3.org/Status.html" title="HTML/Forms">Validateurs W3C</a></dt>
      <dd>
        Le site du W3C héberge plusieurs outils pour vérifier la validité de votre site web par rapport aux standards. Il existe un <a href="http://validator.w3.org/" title="http://validator.w3.org/">validateur HTML</a> et un <a href="http://jigsaw.w3.org/css-validator/" title="http://jigsaw.w3.org/css-validator/">validateur CSS</a>.</dd>
      <dt>
        <a href="http://www.jshint.com/" title="HTML/Forms">JSHint</a></dt>
      <dd>
        Un outil d'analyse de code JavaScript</dd>
      <dt>
        <a href="http://www.jslint.com/" title="HTML/Forms">JSLint</a></dt>
      <dd>
        Un autre outil d’analyse de code JavaScript</dd>
    </dl>
    <p>&nbsp;</p>
  </div>
</div>
<p>&nbsp;</p>
Revenir à cette révision