mozilla

Comparaison de révisions

Outils de développement

Change Revisions

Révision 387865 :

Révision 387865 par tregagnon le

Révision 436073 :

Révision 436073 par tregagnon le

Titre :
Outils
Outils pour développeurs
Identifiant d'URL :
Outils
Outils
Étiquettes :
"Traduction_en_cours", "Outils", "Aide_pour_les_éditeurs_de_MDC"
"Tools", "NeedsMarkupWork", "Developing Mozilla", "Web Development:Tools", "NeedsTechnicalReview", "Web Development", "Outils", "Développement Web", "Développement Web:Outils"
Contenu :

Revision 387865
Revision 436073
nn7    <p>
8      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 maintenu
 >s par Mozilla, mais nous avons aussi listés des outils populaires
 > et utiles dans la section "Plus d'outils".
9    </p>
10    <div class="cleared topicpage-table">
11      <div class="section">
12        <h2 class="Documentation" id="Documentation" name="Docume
 >ntation">
13          Outils pour développeurs par Mozilla
14        </h2>
15        <p>
16          Cette section liste les outils développés et maintenus 
 >par l'équipe "Developer Tools" de Mozilla. Ces outils sont tous a
 >ccessibles depuis Firefox, dans le menu "Firefox" (ou le menu "Ou
 >tils" sur OS X et Linux), puis "Développeur Web".
17        </p>
18        <p>
19          La plupart de ces outils sont directement intégrés à Fi
 >refox à travers le panneau dédié, mais le <a href="/en-US/docs/To
 >ols/Firefox_OS_Simulator" title="/en-US/docs/Tools/Firefox_OS_Sim
 >ulator">simulateur Firefox OS</a> est disponible à travers un add
 >-on.
20        </p>
21        <dl>
22          <dt>
23            <a href="/fr/docs/Outils/inspecteur" title="HTML/Elem
 >ent">Inspecteur</a>
24          </dt>
25          <dd>
26            Voir et modifier l'HTML et le CSS de l'élément sélect
 >ionné
27          </dd>
28          <dt>
29            <a href="/en-US/docs/Tools/Web_Console" title="HTML/A
 >ttributes">Console Web</a>
30          </dt>
31          <dd>
32            Voir des informations, des messages d'erreurs ou d'av
 >ertissements émis par le navigateur ou la page web. Permet aussi 
 >d'examiner et de manipuler le JavaScript de la page.
33          </dd>
34          <dt>
35            <a href="/en-US/docs/Tools/Style_Editor" title="HTML/
 >HTML5">Éditeur de styles</a>
36          </dt>
37          <dd>
38            Voir et modifier les styles CSS de la page affichée.
39          </dd>
40          <dt>
41            <a href="/en-US/docs/Tools/Scratchpad" title="HTML/Fo
 >rms">Ardoise JavaScript</a>
42          </dt>
43          <dd>
44            Un éditeur de texte intégré à Firefox vous permettant
 > d'écrire et d'exécuter du JavaScript.
45          </dd>
46          <dt>
47            <a href="/en-US/docs/Tools/Debugger" title="HTML/Bad_
 >copy_pasting_habits">Débogueur JavaScript</a>
48          </dt>
49          <dd>
50            Parcourez votre code JavaScript s’exécutant dans le n
 >avigateur et observer les variables pour chasser les bugs.
51          </dd>
52          <dt>
53            <a href="/en-US/docs/Tools/Profiler" title="HTML/Bad_
 >copy_pasting_habits">Profileur JavaScript</a>
54          </dt>
55          <dd>
56            Utilisez le profileur pour savoir à quels endroits vo
 >tre code JavaScript passe le plus de temps.
57          </dd>
58          <dt>
59            <a href="/en-us/docs/Tools/Responsive_Design_View" ti
 >tle="/en-us/docs/Tools/Responsive_Design_View">Vue adaptative</a>
60          </dt>
61          <dd>
62            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.
63          </dd>
64          <dt>
65            <a href="https://developer.mozilla.org/en-US/docs/Too
 >ls/GCLI" title="en/Tools/GCLI">Barre de développement</a>
66          </dt>
67          <dd>
68            Une interface en ligne de commande pour manipuler et 
 >travailler avec les outils pour développeurs de Firefox, et des b
 >outons pour accéder aux outils les plus courants.
69          </dd>
70          <dt>
71            <a href="https://developer.mozilla.org/en-US/docs/Err
 >or_Console" title="en/Error_Console">Console d'erreurs</a>
72          </dt>
73          <dd>
74            Signale les erreurs et les avertissements liés à Java
 >Script, les erreurs CSS, et les différentes erreurs issues de l'i
 >nterface ou du contenu Web.
75          </dd>
76          <dt>
77            <a href="/en-US/docs/Tools/3D_View" title="en/Error_C
 >onsole">Vue 3D</a>
78          </dt>
79          <dd>
80            Affiche une représentation en 3D de la page visitée.
81          </dd>
82          <dt>
83            <a href="/en-US/docs/Tools/Firefox_OS_Simulator" titl
 >e="en/Error_Console">Simulateur Firefox OS</a>
84          </dt>
85          <dd>
86            Exécuter et déboguer votre application Firefox OS sur
 > votre ordinateur, sans avoir besoin d'un appareil Firefox OS.
87          </dd>
88          <dt>
89            <a href="/en-US/docs/Tools/Remote_Debugging" title="e
 >n/Error_Console">Débogage distant</a>
90          </dt>
91          <dd>
92            Utilisez le Débogueur JavaScript ou la Console Web po
 >ur déboguer votre appareil Android par USB ou WiFi.
93          </dd>
94        </dl>
7    <div>95      </div>
8      {{Traduction_en_cours("Tools")}}96      <div class="section">
97        <h2 class="Community" id="Community" name="Community">
98          Obtenir de l'aide
99        </h2>
100        <p>
101          Si vous avez des questions sur les outils pour développ
 >eurs inclus dans Firefox, venez les poser sur la liste de diffusi
 >on <a href="https://lists.mozilla.org/listinfo/dev-developer-tool
 >s" title="https://lists.mozilla.org/listinfo/dev-developer-tools"
 >>dev-developer-tools</a> ou sur le canal <a href="http://mibbit.c
 >om/?channel=%23devtools&amp;server=irc.mozilla.org">#devtools</a>
 > sur le <a href="http://irc.mozilla.org/">réseau IRC de Mozilla</
 >a>.
102        </p>
103        <h2 class="Related_Topics" id="Related_Topics" name="Rela
 >ted_Topics">
104          Plus d'outils
105        </h2>
106        <p>
107          Cette section liste des outils qui ne sont pas maintenu
 >s par l'équipe "Developer Tools" de Mozilla, mais qui sont pour a
 >utant très utilisés par les développeurs web. Nous avons inclus q
 >uelques add-ons Firefox dans la liste. Vous trouverez une liste c
 >omplète dans la <a href="https://addons.mozilla.org/fr/firefox/ex
 >tensions/web-development/" title="https://addons.mozilla.org/fr/f
 >irefox/extensions/web-development/">catégorie "Développement Web"
 > de addons.mozilla.org</a>.
108        </p>
109        <dl>
110          <dt>
111            <a href="https://www.getfirebug.com/" title="HTML/For
 >ms">Firebug</a>
112          </dt>
113          <dd>
114            Un outil de développement Web très puissant et très p
 >opulaire. Il inclut un débogueur JavaScript, des outils pour voir
 > et modifier le code HTML et CSS, et surveiller le trafic réseau.
115          </dd>
116          <dt>
117            <a href="/fr/docs/Inspecteur_DOM" title="HTML/Forms">
 >Inspecteur DOM</a>
118          </dt>
119          <dd>
120            Inspectez, parcourez et éditez le DOM des pages web e
 >t des fenêtres XUL.
121          </dd>
122          <dt>
123            <a href="https://addons.mozilla.org/fr/firefox/addon/
 >web-developer/" title="HTML/Forms">Web Developer</a>
124          </dt>
125          <dd>
126            Ajoute un menu et une barre d'outils au navigateur, a
 >vec différents outils dédiés au développement Web.
127          </dd>
128          <dt>
129            <a href="https://webmaker.org/en-US/tools/" title="ht
 >tps://webmaker.org/en-US/tools/">Outils Webmaker</a>
130          </dt>
131          <dd>
132            Une suite d'outils développés par Mozilla, pensés pou
 >r des personnes commençant le développement Web.
133          </dd>
134          <dt>
135            <a href="http://www.w3.org/Status.html" title="HTML/F
 >orms">Validateurs W3C</a>
136          </dt>
137          <dd>
138            Le site du W3C héberge plusieurs outils pour vérifier
 > la validité de votre site web par rapport aux standards. Il exis
 >te une <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/">vali
 >dateur CSS</a>.
139          </dd>
140          <dt>
141            <a href="http://www.jshint.com/" title="HTML/Forms">J
 >SHint</a>
142          </dt>
143          <dd>
144            Un outil d'analyse de code JavaScript
145          </dd>
146          <dt>
147            <a href="http://www.jslint.com/" title="HTML/Forms">J
 >SLint</a>
148          </dt>
149          <dd>
150            Un autre outils d’analyse de code JavaScript
151          </dd>
152        </dl>
153        <p>
154          &nbsp;
155        </p>
156      </div>
n10    <div>n158    <p>
n12    </div>n
13    <div>
14      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. 
15    </div>
16    <h2 id="D.C3.A9veloppement_Web" name="D.C3.A9veloppement_Web"
>> 
17      Développement Web
18    </h2>
19    <h3 id="Directement_inclus_dans_Firefox">
20      Directement inclus dans Firefox
21    </h3>
22    <p>
23      Outils et ressources directement inclus dans Firefox, et qu
>i profitent d'un développement très actif ! 
t25    <dl>t
26      <dt>
27        <a href="/fr/docs/Outils/inspecteur" title="Outils/Inspec
>teur">Inspecteur</a> {{ fx_minversion_inline("10.0") }} 
28      </dt>
29      <dd>
30        Un outil utile qui vous montre l'arbre HTML au niveau de 
>l'élément que vous pointez avec la souris. 
31      </dd>
32      <dt>
33        <a href="/fr/docs/Utiliser_la_Console_Web" title="Utilise
>r_la_Console_Web">Console Web</a> {{ fx_minversion_inline("4.0")  
>}} 
34      </dt>
35      <dd>
36        Une console qui vous permet d'afficher de l'information d
>e manière interactive, d'exécuter du code JavaScript, et d'expéri 
>menter avec votre contenu. 
37      </dd>
38      <dt>
39        <a href="/fr/docs/Outils/Ardoise" title="Ardoise">Ardoise
> JavaScript</a> {{ fx_minversion_inline("6.0") }} 
40      </dt>
41      <dd>
42        Un éditeur de texte inclus dans Firefox, qui vous permet 
>d'éditer et d'exécuter du code JavaScript. 
43      </dd>
44      <dt>
45        <a href="/fr/docs/Outils/%C3%89diteur_de_Style" title="Ou
>tils/Éditeur_de_Style">Éditeur de Style</a> {{ fx_minversion_inli 
>ne("11.0") }} 
46      </dt>
47      <dd>
48        Cet outil vous permet d'éditer des styles CSS directement
> dans la page courante, en temps réel. De plus, vous pouvez les a 
>ctiver et les désactiver à la volée. C'est un outil fantastique p 
>our travailler en temps réel avec le style du contenu web ! 
49      </dd>
50      <dt>
51        <a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/T
>ools/Debugger">Débogueur JavaScript</a> {{ fx_minversion_inline(" 
>15.0") }} 
52      </dt>
53      <dd>
54        Parcourez le code JavaScript en exécution dans le navigat
>eur (ou même sur un navigateur à distance), et observez les varia 
>bles pour vous aider à traquer les bugs. Cette documentation couv 
>re aussi le Débogueur à Distance, qui peut être utilisé pour débo 
>gueur du code tournant sur un appareil Firefox OS ou sur Firefox  
>pour Android. 
55      </dd>
56      <dt>
57        <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") }} 
58      </dt>
59      <dd>
60        Voir à quoi va ressembler vos designs à différentes taill
>es d'écrans sans changer la taille de la fenêtre du navigateur. 
61      </dd>
62      <dt>
63        <a href="/en-US/docs/Tools/Using_the_Source_Editor" title
>="en/Tools/Using the Source Editor">Utiliser l'Éditeur de Code</a 
>> 
64      </dt>
65      <dd>
66        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 st 
>yle. Cet article apporte des informations communes sur outils qui 
> utilise l'<a href="/en-US/docs/JavaScript_code_modules/source-ed 
>itor.jsm" title="source-editor.jsm">API Éditeur de Code</a>. 
67      </dd>
68      <dt>
69        <a href="/en-US/docs/Tools/GCLI" title="en/Tools/GCLI">Ba
>rre de Développement</a> {{ fx_minversion_inline("16.0") }} 
70      </dt>
71      <dd>
72        La Barre de Développement fournit une interface en ligne 
>de commande pour manipuler et travailler avec les outils pour dév 
>eloppeurs de Firefox, ainsi que des accès rapides vers les princi 
>paux outils. 
73      </dd>
74    </dl>
75    <h3 id="Extensions" name="Extensions">
76      Extensions
77    </h3>
78    <dl>
79      <dt>
80        <a href="https://addons.mozilla.org/en-US/firefox/addon/1
>843">Firebug</a> 
81      </dt>
82      <dd>
83        Intègre une multitude d'outils de développement pour édit
>er, 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>) 
84      </dd>
85      <dt>
86        <a href="/fr/docs/Inspecteur_DOM" title="Inspecteur_DOM">
>Inspecteur DOM</a> 
87      </dt>
88      <dd>
89        Un outils pour développeur utilisé pour inspecter, navigu
>er et éditer le DOM des documents, principalement des pages web o 
>u des fenêtres XUL. 
90      </dd>
91      <dt>
92        <a href="https://addons.mozilla.org/en-US/firefox/addon/6
>0">Web Developer</a> 
93      </dt>
94      <dd>
95        L'extension Web Developer, une barre d'outils pour Firefo
>x Adds a menu and a toolbar to the browser with various web devel 
>oper tools. (<a class="external" href="http://chrispederick.com/w 
>ork/web-developer/">details</a>) 
96      </dd>
97      <dt>
98        <a href="https://addons.mozilla.org/en-US/firefox/addon/4
>111">Aardvark</a> 
99      </dt>
100      <dd>
101        L'extension Aardvark révèle les éléments DOM survolés par
> la souris sur une page. (<a class="external" href="http://www.ka 
>rmatics.com/aardvark/">détails</a>) 
102      </dd>
103      <dt>
104        <a href="https://addons.mozilla.org/en-US/firefox/browse/
>type:1/cat:4">Plus d'extensions sur AMO</a> 
105      </dt>
106    </dl>
107    <h2 id="Validateurs" name="Validateurs">
108      Validateurs
109    </h2>
110    <dl>
111      <dt>
112        <a href="/fr/docs/Outils/Validateurs" title="Outils/Valid
>ateurs">Liste de validateurs</a> 
113      </dt>
114    </dl>
115    <h2 id="Logiciels_de_cr.C3.A9ation_Web" name="Logiciels_de_cr
>.C3.A9ation_Web"> 
116      Logiciels de création Web
117    </h2>
118    <dl>
119      <dt>
120        <a href="/fr/docs/Outils_d'%C3%A9dition_respectueux_des_s
>tandards" title="Outils_d'édition_respectueux_des_standards">Outi 
>ls d'édition respectueux des standards</a> 
121      </dt>
122      <dt>
123        <a class="external" href="http://tidy.sourceforge.net/">H
>TMLTidy</a> - Un outil de nettoyage de code HTML 
124      </dt>
125    </dl>
126    <h2 id="JavaScript" name="JavaScript">
127      JavaScript
128    </h2>
129    <dl>
130      <dt>
131        <a href="/fr/docs/Venkman" title="Venkman">Venkman</a> - 
>débogueur JavaScript. 
132      </dt>
133      <dt>
134        <a class="external" href="http://www.jslint.com/">JSLint<
>/a> - Vérification et validation code Javascript. 
135      </dt>
136      <dt>
137        <a class="external" href="http://jsdoc.sourceforge.net/">
>JSDoc</a> 
138      </dt>
139      <dd>
140        outil de génération de documentation (généralement en HTM
>L) depuis les commentaires du code (similaire à JavaDoc). 
141      </dd>
142    </dl>
143    <h2 id="DOM" name="DOM">
144      DOM
145    </h2>
146    <dl>
147      <dt>
148        <a href="/fr/docs/Inspecteur_DOM" title="Inspecteur_DOM">
>Inspecteur DOM</a> 
149      </dt>
150      <dt>
151        <a class="external" href="http://slayeroffice.com/tools/m
>odi/v2.0/modi_help.html">MODI</a> 
152      </dt>
153      <dd>
154        Mouseover DOM Inspector est un bookmarklet permettant de 
>voir et de manipuler le DOM d'une page Web simplement en déplaçan 
>t le pointeur de la souris dans le document. 
155      </dd>
156    </dl>
157    <h2 id="Localisation" name="Localisation">
158      Localisation
159    </h2>
160    <dl>
161      <dt>
162        <a class="external" href="http://www.mozilla.org/projects
>/l10n/mlp_tools.html">Outils de localisation</a> 
163      </dt>
164    </dl>
165    <h2 id="Gestion_d.27arbres_et_de_branches" name="Gestion_d.27
>arbres_et_de_branches"> 
166      Gestion d'arbres et de branches
167    </h2>
168    <dl>
169      <dd>
170        <a href="/fr/docs/Utilisation_de_cross_commit" title="Uti
>lisation_de_cross_commit">Script <code>cross-commit</code></a> 
171      </dd>
172    </dl><!-- Categories --><!-- Interwiki Language Links --><!--
>languages( { "en": "en/Tools", "ja": "ja/Tools", "pl": "pl/Narz\u 
>0119dzia" } )--> 

Retour à l'historique