mozilla

Revision 318083 of Firefox Tools für Webentwickler

  • Revision slug: Tools
  • Revision title: Werkzeuge
  • Revision id: 318083
  • Created:
  • Creator: AlexPl
  • Is current revision? No
  • Comment
Tags: 

Revision Content

The following is a list of tools and resources that will help with your web development process, as well as potentially debugging your Firefox browser add-ons.

Webentwicklung

Integriert in Firefox

Werkzeuge und Resourcen die in Firefox integriert und in starker Entwicklung sind.

Untersuchen (Page Inspector) {{ fx_minversion_inline("10.0") }}
Ein nützliches Werkzeug dass dir das HTML des Elements zeigt, auf das du gerade zeigst, im Kontext.
Web-Konsole {{ fx_minversion_inline("4.0") }}
A console that lets you interactively output information, run JavaScript snippets, and experiment with your content.
JavaScript-Umgebung {{ fx_minversion_inline("6.0") }}
Ein in Firefox integrierter Texteditor der dich JavaScript bearbeiten und ausführen lässt.
Stil-Bearbeitung {{ fx_minversion_inline("11.0") }}
Lässt dich die CSS-Stile der aktuellen Seite in echtzeit bearbeiten; in addition, you can toggle them on and off. A fantastic way to work in real time with the look and feel of web content!
JavaScript Debugger {{ fx_minversion_inline("15.0") }}
Step through JavaScript code that is running in the browser (or even on a remote browser!) and watch variables to help track down bugs.
Bildschirmgrößen testen {{ fx_minversion_inline("15.0") }}
Sehe wie deine Designs auf unterschiedlichen Display-Größen aussehen werden, ohne die Größe deines ganzen Browserfensters zu verändern.
Using the Source Editor
The Source Editor isn't a standalone tool; instead, it's the underlying editor used by Scratchpad and the Style Editor. This article provides information common to all tools that make use of the Source Editor API.
Entwickler-Symbolleiste {{ fx_minversion_inline("16.0") }}
Die Entwickler-Symbolleiste stellt eine Kommandozeilenschnittstelle zum Manipulieren und Arbeiten mit den Entwicklerwerkzeugen in Firefox und Schaltflächen für den schnellen Zugriff auf die am häufigsten verwendeten Werkzeuge bereit.

Erweiterungen

Firebug
Integriert eine Fülle an Entwicklerwerkzeugen zum direkten bearbeiten, debuggen und überwachen von CSS, HTML und JavaScript in jeder Webseite. (Details)
DOM Inspector
Ein Entwickler-Tool zum untersuchen, durchstöbern und bearbeiten des DOM eines Dokuments - usually web pages or XUL windows.
Web Developer
Fügt dem Browser ein Menü und eine Toolbar mit verschiedenen Webentwickler-Tools hinzu. (Details)
Aardvark
Zeigt DOM-Elemente während du mit der Maus über eine Seite fährst. (Details)
Mehr bei Firefox Add-ons
Kategorie Webentwicklung der Firefox Add-ons-Seite.

Validatoren

Liste von Validatoren
Verschiedene Validatoren für Dinge wie HTML, CSS, RDF, Firefox Erweiterungen und vieles mehr.

Authoring Software

HTMLTidy
Tool used to fix or point out invalid HTML as well as improve the layout and indentation style of the resulting markup.

JavaScript

Fehlerkonsole
Tool used for reporting errors in the application chrome and user-opened web pages. Also reports JavaScript-related errors and warnings, CSS errors and arbitrary messages from chrome code.
Venkman
Mozilla's JavaScript Debugger
JSLint
JavaScript Code Quality Tool
JSDoc
Werkzeug zum generieren von Dokumentationen (gewöhnlich in HTML) von Kommentaren im Quelltext (vergleichbar mit JavaDoc).

DOM

DOM Inspector
Developer tool used to inspect, browse, and edit the Document Object Model of documents
MODI
Mouseover DOM Inpector is a bookmarklet that allows you to view and manipulate the DOM of a web page simply by mousing around the document.

Lokalisierung

Localization and Leveraging Tools
Werkzeuge und Ressourcen die dir dabei helfen deine Erweiterungen zu lokalisieren und in andere Sprachen zu übersetzten.

Barrierefreiheit

Policy

WAI-ARIA Overview
An overview of WAI-ARIA, the Accessible Rich Internet Applications Suite; a set of documents that lay out how to make Web 2.0 sites and applications more accessible.

Evaluierungswerkzeuge

AChecker
AChecker ist ein Werkzeug dass es dir ermöglicht eine URL einzugeben und diese auf Barrierefreiheit zu prüfen.
W3C complete list of tools
Eine vollständige Liste der Evaluierungswerkzeuge zum testen der Barrierefreiheit.

Für eine ausführlichere Liste von Evaluierungswerkzeugen siehe: Fluid Project accessibility resources und ARIA

Tree and branch management

cross-commit script
Concurrent Versions System (CVS) script that allows a single patch to be easily checked in on multiple branches.

Benutzerprofil-Werkzeuge

Mehrere Firefox-Profile

MXR (Wenn du vim benutzt, beschleunigt mxr-vim den Vorgang.)

DXR

Profilmanager

Categories

Interwiki Language Links

{{ languages( { "fr": "fr/Outils", "ja": "ja/Tools", "pl": "pl/Narz\u0119dzia" } ) }}

Revision Source

<p>The following is a list of tools and resources that will help with your web development process, as well as potentially debugging your Firefox browser add-ons.</p>
<h2 id="Web_Development" name="Web_Development"><span class="dpf_sent" id="dpfsent_0">Webentwicklung</span></h2>
<h3 id="Integriert_in_Firefox">Integriert in Firefox</h3>
<p>Werkzeuge und Resourcen die in Firefox integriert und in starker Entwicklung sind.</p>
<dl>
  <dt>
    <a href="/en/Tools/Page_Inspector" title="en/Tools/Page_Inspector">Untersuchen (Page Inspector</a>) {{ fx_minversion_inline("10.0") }}</dt>
  <dd>
    Ein nützliches Werkzeug dass dir das HTML des Elements zeigt, auf das du gerade zeigst, im Kontext.</dd>
</dl>
<dl>
  <dt>
    <a href="/en/Tools/Web_Console" title="en/Tools/Web_Console">Web-Konsole</a> {{ fx_minversion_inline("4.0") }}</dt>
  <dd>
    A console that lets you interactively output information, run JavaScript snippets, and experiment with your content.</dd>
</dl>
<dl>
  <dt>
    <a href="/en/Tools/Scratchpad" title="en/Tools/Scratchpad">JavaScript-Umgebung</a> {{ fx_minversion_inline("6.0") }}</dt>
  <dd>
    Ein in Firefox integrierter Texteditor der dich JavaScript bearbeiten und ausführen lässt.</dd>
  <dt>
    <a href="/en/Tools/Style_Editor" title="en/Tools/Style Editor">Stil-Bearbeitung</a> {{ fx_minversion_inline("11.0") }}</dt>
  <dd>
    Lässt dich die CSS-Stile der aktuellen Seite in echtzeit bearbeiten; in addition, you can toggle them on and off. A fantastic way to work in real time with the look and feel of web content!</dd>
  <dt>
    <a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript Debugger</a> {{ fx_minversion_inline("15.0") }}</dt>
  <dd>
    Step through JavaScript code that is running in the browser (or even on a remote browser!) and watch variables to help track down bugs.</dd>
  <dt>
    <a href="/en-us/docs/Tools/Responsive_Design_View" title="/en-us/docs/Tools/Responsive_Design_View">Bildschirmgrößen testen</a> {{ fx_minversion_inline("15.0") }}</dt>
  <dd>
    Sehe wie deine Designs auf unterschiedlichen Display-Größen aussehen werden, ohne die Größe deines ganzen Browserfensters zu verändern.</dd>
  <dt>
    <a href="/en/Tools/Using_the_Source_Editor" title="en/Tools/Using the Source Editor">Using the Source Editor</a></dt>
  <dd>
    The Source Editor isn't a standalone tool; instead, it's the underlying editor used by Scratchpad and the Style Editor. This article provides information common to all tools that make use of the <a href="/en/JavaScript_code_modules/source-editor.jsm" title="source-editor.jsm">Source Editor API</a>.</dd>
  <dt>
    <a href="/en/Tools/GCLI" title="en/Tools/GCLI">Entwickler-Symbolleiste</a> {{ fx_minversion_inline("16.0") }}</dt>
  <dd>
    Die Entwickler-Symbolleiste stellt eine Kommandozeilenschnittstelle zum Manipulieren und Arbeiten mit den Entwicklerwerkzeugen in Firefox und Schaltflächen für den schnellen Zugriff auf die am häufigsten verwendeten Werkzeuge bereit.</dd>
</dl>
<h3 id="Extensions" name="Extensions">Erweiterungen</h3>
<dl>
  <dt>
    <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug</a></dt>
  <dd>
    Integriert eine Fülle an Entwicklerwerkzeugen zum direkten bearbeiten, debuggen und überwachen von CSS, HTML und JavaScript in jeder Webseite. (<a class="external" href="http://www.getfirebug.com/">Details</a>)</dd>
</dl>
<dl>
  <dt>
    <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a></dt>
  <dd>
    Ein Entwickler-Tool zum untersuchen, durchstöbern und bearbeiten des DOM eines Dokuments - usually web pages or XUL windows.</dd>
</dl>
<dl>
  <dt>
    <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer</a></dt>
  <dd>
    Fügt dem Browser ein Menü und eine Toolbar mit verschiedenen Webentwickler-Tools hinzu. (<a class="external" href="http://chrispederick.com/work/web-developer/">Details</a>)</dd>
</dl>
<dl>
  <dt>
    <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/4111">Aardvark</a></dt>
  <dd>
    Zeigt DOM-Elemente während du mit der Maus über eine Seite fährst. (<a class="external" href="http://www.karmatics.com/aardvark/">Details</a>)</dd>
</dl>
<dl>
  <dt>
    <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/browse/type:1/cat:4">Mehr bei Firefox Add-ons</a></dt>
  <dd>
    Kategorie Webentwicklung der Firefox Add-ons-Seite.</dd>
</dl>
<h2 id="Validators" name="Validators">Validatoren</h2>
<dl>
  <dt>
    <a href="/en/Tools/Validators" title="en/Tools/Validators">Liste von Validatoren</a></dt>
  <dd>
    Verschiedene Validatoren für Dinge wie HTML, CSS, RDF, Firefox Erweiterungen und vieles mehr.</dd>
</dl>
<h2 id="Authoring_Software" name="Authoring_Software">Authoring Software</h2>
<dl>
  <dt>
    <a class="external" href="http://tidy.sourceforge.net/">HTMLTidy</a></dt>
  <dd>
    Tool used to fix or point out invalid HTML as well as improve the layout and indentation style of the resulting markup.</dd>
</dl>
<h2 id="JavaScript" name="JavaScript">JavaScript</h2>
<dl>
  <dt>
    <a href="/en/Error_Console" title="en/Error_Console">Fehlerkonsole</a></dt>
  <dd>
    Tool used for reporting errors in the application chrome and user-opened web pages. Also reports JavaScript-related errors and warnings, CSS errors and arbitrary messages from chrome code.</dd>
</dl>
<dl>
  <dt>
    <a href="/en/Venkman" title="en/Venkman">Venkman</a></dt>
  <dd>
    Mozilla's JavaScript Debugger</dd>
</dl>
<dl>
  <dt>
    <a class="external" href="http://www.jslint.com/">JSLint</a></dt>
  <dd>
    JavaScript Code Quality Tool</dd>
</dl>
<dl>
  <dt>
    <a class="external" href="http://jsdoc.sourceforge.net/">JSDoc</a></dt>
  <dd>
    Werkzeug zum generieren von Dokumentationen (gewöhnlich in HTML) von Kommentaren im Quelltext (vergleichbar mit JavaDoc).</dd>
</dl>
<h2 id="DOM" name="DOM">DOM</h2>
<dl>
  <dt>
    <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a></dt>
  <dd>
    Developer tool used to inspect, browse, and edit the Document Object Model of documents</dd>
</dl>
<dl>
  <dt>
    <a class="external" href="http://slayeroffice.com/tools/modi/v2.0/modi_help.html">MODI</a></dt>
  <dd>
    Mouseover DOM Inpector is a bookmarklet that allows you to view and manipulate the DOM of a web page simply by mousing around the document.</dd>
</dl>
<h2 id="Localization" name="Localization">Lokalisierung</h2>
<dl>
  <dt>
    <a class="external" href="http://www.mozilla.org/projects/l10n/mlp_tools.html">Localization and Leveraging Tools</a></dt>
  <dd>
    Werkzeuge und <span class="dpf_sent" id="dpfsent_0">Ressourcen </span>die dir dabei helfen deine Erweiterungen zu lokalisieren und in andere Sprachen zu übersetzten.</dd>
</dl>
<h2 id="Accessibility" name="Accessibility">Barrierefreiheit</h2>
<h3 id="Policy">Policy</h3>
<dl>
  <dt>
    <a class="external" href="http://www.w3.org/WAI/intro/aria" target="external" title="WAI-ARIA Overview">WAI-ARIA Overview</a></dt>
  <dd>
    An overview of WAI-ARIA, the Accessible Rich Internet Applications Suite; a set of documents that lay out how to make Web 2.0 sites and applications more accessible.</dd>
</dl>
<h3 id="Testing_Tools">Evaluierungswerkzeuge</h3>
<dl>
  <dt>
    <a class="external" href="http://achecker.ca/checker/index.php" target="external" title="AChecker">AChecker</a></dt>
  <dd>
    AChecker ist ein Werkzeug dass es dir ermöglicht eine URL einzugeben und diese auf Barrierefreiheit zu prüfen.</dd>
  <dt>
    <a class="external" href="http://www.w3.org/WAI/ER/tools/complete" target="external" title="W3C Complete list of tools">W3C complete list of tools</a></dt>
  <dd>
    Eine vollständige Liste der Evaluierungswerkzeuge zum testen der Barrierefreiheit.</dd>
</dl>
<p>Für eine ausführlichere Liste von Evaluierungswerkzeugen siehe: <a class="external" href="http://wiki.fluidproject.org/display/fluid/Accessibility+Resources" target="external" title="Accessibility resources">Fluid Project accessibility resources</a> und <a href="en/Accessibility/ARIA" title="ARIA">ARIA</a></p>
<h2 id="Tree_and_branch_management" name="Tree_and_branch_management">Tree and branch management</h2>
<dl>
  <dt>
    <a href="/en/Using_cross_commit" title="en/Using_cross_commit"><code>cross-commit</code> script</a></dt>
  <dd>
    Concurrent Versions System (CVS) script that allows a single patch to be easily checked in on multiple branches.</dd>
</dl>
<h2 id="User_Profile_Tools" name="User_Profile_Tools">Benutzerprofil-Werkzeuge</h2>
<p><a href="en/Mozilla/Multiple_Firefox_Profiles" title="Multiple Firefox profiles">Mehrere Firefox-Profile</a></p>
<h2 id="Navigating_the_Mozilla_Codebase">Navigating the Mozilla Codebase</h2>
<p><a class="external" href="http://mxr.mozilla.org/" title="http://mxr.mozilla.org/">MXR</a> (Wenn du vim benutzt, beschleunigt mxr-vim den Vorgang.)</p>
<p><a class="external" href="http://dxr.mozilla.org/clang/" title="http://dxr.mozilla.org/clang/">DXR</a></p>
<dl>
  <dt>
    <a class="external" href="/en/Profile_Manager" title="en/Profile_Manager">Profilmanager</a></dt>
</dl>
<p><span class="comment">Categories</span></p>
<p><span class="comment">Interwiki Language Links</span></p>
<p>{{ languages( { "fr": "fr/Outils", "ja": "ja/Tools", "pl": "pl/Narz\u0119dzia" } ) }}</p>
Revert to this revision