Outils de développement

  • Raccourci de la révision : Outils
  • Titre de la révision : Outils
  • ID de la révision : 387859
  • Créé :
  • Créateur : tregagnon
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{Traduction_en_cours("Tools")}}
 
Cette page liste les outils et ressources qui vous aideront lors de votre développement web, ainsi que de potentiels modules pour le navigateur Firefox.

Développement Web

Directement inclus dans Firefox

Outils et ressources directement inclus dans Firefox, et qui profitent d'un développement très actif !

Inspecteur {{ fx_minversion_inline("10.0") }}
Un outil utile qui vous montre l'arbre HTML au niveau de l'élément que vous pointez avec la souris.
Console Web {{ fx_minversion_inline("4.0") }}
Une console qui vous permet d'afficher de l'information de manière interactive, d'exécuter du code JavaScript, et d'expérimenter avec votre contenu.
Ardoise JavaScript {{ fx_minversion_inline("6.0") }}
Un éditeur de texte inclus dans Firefox, qui vous permet d'éditer et d'exécuter du code JavaScript.
Éditeur de Style {{ fx_minversion_inline("11.0") }}
Cet outil vous permet d'éditer des styles CSS directement dans la page courante, en temps réel. De plus, vous pouvez les activer et les désactiver à la volée. C'est un outil fantastique pour travailler en temps réel avec le style du contenu web !
Débogueur JavaScript {{ fx_minversion_inline("15.0") }}
Parcourez le code JavaScript en exécution dans le navigateur (ou même sur un navigateur à distance), et observez les variables pour vous aider à traquer les bugs. Cette documentation couvre aussi le Débogueur à Distance, qui peut être utilisé pour débogueur du code tournant sur un appareil Firefox OS ou sur Firefox pour Android.
Vue Adaptative {{ fx_minversion_inline("15.0") }}
Voir à quoi va ressembler vos designs à différentes tailles d'écrans sans changer la taille de la fenêtre du navigateur.
Utiliser l'Éditeur de Code
L'Éditeur de code n'est pas un outil dédié. Il s'agit de l'éditeur utilisé par l'Ardoise JavaScript et par l'Éditeur de style. Cet article apporte des informations communes sur outils qui utilise l'API Éditeur de Code.
Barre de Développement {{ fx_minversion_inline("16.0") }}
La Barre de Développement fournit une interface en ligne de commande pour manipuler et travailler avec les outils pour développeurs de Firefox, ainsi que des accès rapides vers les principaux outils.

Extensions

Firebug
Intègre une multitude d'outils de développement pour éditer, déboguer, et surveiller CSS, HTML, et JavaScript directement dans n'importe quelle page web (détails)
Inspecteur DOM
Un outils pour développeur utilisé pour inspecter, naviguer et éditer le DOM des documents, principalement des pages web ou des fenêtres XUL.
Web Developer
L'extension Web Developer, une barre d'outils pour Firefox Adds a menu and a toolbar to the browser with various web developer tools. (details)
Aardvark
L'extension Aardvark révèle les éléments DOM survolés par la souris sur une page. (détails)
Plus d'extensions sur AMO

Validateurs

Liste de validateurs

Logiciels de création Web

Outils d'édition respectueux des standards
HTMLTidy - Un outil de nettoyage de code HTML

JavaScript

Venkman - débogueur JavaScript.
JSLint - Vérification et validation code Javascript.
JSDoc
outil de génération de documentation (généralement en HTML) depuis les commentaires du code (similaire à JavaDoc).

DOM

Inspecteur DOM
MODI
Mouseover DOM Inspector est un bookmarklet permettant de voir et de manipuler le DOM d'une page Web simplement en déplaçant le pointeur de la souris dans le document.

Localisation

Outils de localisation

Gestion d'arbres et de branches

Script cross-commit

Source de la révision

<div>
  {{Traduction_en_cours("Tools")}}</div>
<div>
  &nbsp;</div>
<div>
  Cette page liste les outils et ressources qui vous aideront lors de votre développement web, ainsi que de potentiels modules pour le navigateur Firefox.</div>
<h2 id="D.C3.A9veloppement_Web" name="D.C3.A9veloppement_Web">Développement Web</h2>
<h3 id="Directement_inclus_dans_Firefox">Directement inclus dans Firefox</h3>
<p>Outils et ressources directement inclus dans Firefox, et qui profitent d'un développement très actif !</p>
<dl>
  <dt>
    <a href="/fr/docs/Outils/Inspecteur" title="Outils/Inspecteur">Inspecteur</a> {{ fx_minversion_inline("10.0") }}</dt>
  <dd>
    Un outil utile qui vous montre l'arbre HTML au niveau de l'élément que vous pointez avec la souris.</dd>
  <dt>
    <a href="/fr/docs/Utiliser_la_Console_Web" title="Utiliser_la_Console_Web">Console Web</a> {{ fx_minversion_inline("4.0") }}</dt>
  <dd>
    Une console qui vous permet d'afficher de l'information de manière interactive, d'exécuter du code JavaScript, et d'expérimenter avec votre contenu.</dd>
  <dt>
    <a href="/fr/docs/Outils/Ardoise" title="Ardoise">Ardoise JavaScript</a> {{ fx_minversion_inline("6.0") }}</dt>
  <dd>
    Un éditeur de texte inclus dans Firefox, qui vous permet d'éditer et d'exécuter du code JavaScript.</dd>
  <dt>
    <a href="/fr/docs/Outils/Éditeur_de_Style" title="Outils/Éditeur_de_Style">Éditeur de Style</a> {{ fx_minversion_inline("11.0") }}</dt>
  <dd>
    Cet outil vous permet d'éditer des styles CSS directement dans la page courante, en temps réel. De plus, vous pouvez les activer et les désactiver à la volée. C'est un outil fantastique pour travailler en temps réel avec le style du contenu web !</dd>
  <dt>
    <a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">Débogueur JavaScript</a> {{ fx_minversion_inline("15.0") }}</dt>
  <dd>
    Parcourez le code JavaScript en exécution dans le navigateur (ou même sur un navigateur à distance), et observez les variables pour vous aider à traquer les bugs. Cette documentation couvre aussi le Débogueur à Distance, qui peut être utilisé pour débogueur du code tournant sur un appareil Firefox OS ou sur Firefox pour Android.</dd>
  <dt>
    <a href="/en-us/docs/Tools/Responsive_Design_View" title="/en-us/docs/Tools/Responsive_Design_View">Vue Adaptative</a> {{ fx_minversion_inline("15.0") }}</dt>
  <dd>
    Voir à quoi va ressembler vos designs à différentes tailles d'écrans sans changer la taille de la fenêtre du navigateur.</dd>
  <dt>
    <a href="/en-US/docs/Tools/Using_the_Source_Editor" title="en/Tools/Using the Source Editor">Utiliser l'Éditeur de Code</a></dt>
  <dd>
    L'Éditeur de code n'est pas un outil dédié. Il s'agit de l'éditeur utilisé par l'Ardoise JavaScript et par l'Éditeur de style. Cet article apporte des informations communes sur outils qui utilise l'<a href="/en-US/docs/JavaScript_code_modules/source-editor.jsm" title="source-editor.jsm">API Éditeur de Code</a>.</dd>
  <dt>
    <a href="/en-US/docs/Tools/GCLI" title="en/Tools/GCLI">Barre de Développement</a> {{ fx_minversion_inline("16.0") }}</dt>
  <dd>
    La Barre de Développement fournit une interface en ligne de commande pour manipuler et travailler avec les outils pour développeurs de Firefox, ainsi que des accès rapides vers les principaux outils.</dd>
</dl>
<h3 id="Extensions" name="Extensions">Extensions</h3>
<dl>
  <dt>
    <a href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug</a></dt>
  <dd>
    Intègre une multitude d'outils de développement pour éditer, déboguer, et surveiller CSS, HTML, et JavaScript directement dans n'importe quelle page web (<a class="external" href="http://www.getfirebug.com/">détails</a>)</dd>
  <dt>
    <a href="/fr/docs/Inspecteur_DOM" title="Inspecteur_DOM">Inspecteur DOM</a></dt>
  <dd>
    Un outils pour développeur utilisé pour inspecter, naviguer et éditer le DOM des documents, principalement des pages web ou des fenêtres XUL.</dd>
  <dt>
    <a href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer</a></dt>
  <dd>
    L'extension Web Developer, une barre d'outils pour Firefox Adds a menu and a toolbar to the browser with various web developer tools. (<a class="external" href="http://chrispederick.com/work/web-developer/">details</a>)</dd>
  <dt>
    <a href="https://addons.mozilla.org/en-US/firefox/addon/4111">Aardvark</a></dt>
  <dd>
    L'extension Aardvark révèle les éléments DOM survolés par la souris sur une page. (<a class="external" href="http://www.karmatics.com/aardvark/">détails</a>)</dd>
  <dt>
    <a href="https://addons.mozilla.org/en-US/firefox/browse/type:1/cat:4">Plus d'extensions sur AMO</a></dt>
</dl>
<h2 id="Validateurs" name="Validateurs">Validateurs</h2>
<dl>
  <dt>
    <a href="/fr/docs/Outils/Validateurs" title="Outils/Validateurs">Liste de validateurs</a></dt>
</dl>
<h2 id="Logiciels_de_cr.C3.A9ation_Web" name="Logiciels_de_cr.C3.A9ation_Web">Logiciels de création Web</h2>
<dl>
  <dt>
    <a href="/fr/docs/Outils_d'édition_respectueux_des_standards" title="Outils_d'édition_respectueux_des_standards">Outils d'édition respectueux des standards</a></dt>
  <dt>
    <a class="external" href="http://tidy.sourceforge.net/">HTMLTidy</a> - Un outil de nettoyage de code HTML</dt>
</dl>
<h2 id="JavaScript" name="JavaScript">JavaScript</h2>
<dl>
  <dt>
    <a href="/fr/docs/Venkman" title="Venkman">Venkman</a> - débogueur JavaScript.</dt>
  <dt>
    <a class="external" href="http://www.jslint.com/">JSLint</a> - Vérification et validation code Javascript.</dt>
  <dt>
    <a class="external" href="http://jsdoc.sourceforge.net/">JSDoc</a></dt>
  <dd>
    outil de génération de documentation (généralement en HTML) depuis les commentaires du code (similaire à JavaDoc).</dd>
</dl>
<h2 id="DOM" name="DOM">DOM</h2>
<dl>
  <dt>
    <a href="/fr/docs/Inspecteur_DOM" title="Inspecteur_DOM">Inspecteur DOM</a></dt>
  <dt>
    <a class="external" href="http://slayeroffice.com/tools/modi/v2.0/modi_help.html">MODI</a></dt>
  <dd>
    Mouseover DOM Inspector est un bookmarklet permettant de voir et de manipuler le DOM d'une page Web simplement en déplaçant le pointeur de la souris dans le document.</dd>
</dl>
<h2 id="Localisation" name="Localisation">Localisation</h2>
<dl>
  <dt>
    <a class="external" href="http://www.mozilla.org/projects/l10n/mlp_tools.html">Outils de localisation</a></dt>
</dl>
<h2 id="Gestion_d.27arbres_et_de_branches" name="Gestion_d.27arbres_et_de_branches">Gestion d'arbres et de branches</h2>
<dl>
  <dd>
    <a href="/fr/docs/Utilisation_de_cross_commit" title="Utilisation_de_cross_commit">Script <code>cross-commit</code></a></dd>
</dl>
<!-- Categories --><!-- Interwiki Language Links --><!--languages( { "en": "en/Tools", "ja": "ja/Tools", "pl": "pl/Narz\u0119dzia" } )-->
Revenir à cette révision