From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/tools/3d_untersuchung/index.html | 99 +++ files/de/tools/about_colon_debugging/index.html | 252 ++++++ files/de/tools/add-ons/index.html | 17 + .../tools/barrierefreiheits_inspektor/index.html | 136 ++++ .../de/tools/bildschirmgroessen-testen/index.html | 81 ++ files/de/tools/browser_console/index.html | 157 ++++ files/de/tools/browser_werkzeuge/index.html | 42 + files/de/tools/debugger/how_to/index.html | 11 + .../debugger/how_to/open_the_debugger/index.html | 22 + .../debugger/how_to/use_a_source_map/index.html | 32 + files/de/tools/debugger/index.html | 369 +++++++++ files/de/tools/debugger/settings/index.html | 57 ++ .../de/tools/debugger/source_map_errors/index.html | 70 ++ files/de/tools/firefox_os_1.1_simulator/index.html | 352 +++++++++ files/de/tools/index.html | 149 ++++ files/de/tools/index/index.html | 9 + files/de/tools/json_viewer/index.html | 26 + files/de/tools/keyboard_shortcuts/index.html | 847 +++++++++++++++++++++ files/de/tools/netzwerkanalyse/index.html | 126 +++ .../how_to/event_listener_untersuchen/index.html | 27 + files/de/tools/page_inspector/how_to/index.html | 13 + .../how_to/raster_layout_untersuchen/index.html | 23 + .../how_to/schriftarten_bearbeitung/index.html | 231 ++++++ files/de/tools/paint_flashing_tool/index.html | 94 +++ files/de/tools/performance/index.html | 96 +++ .../debugging_firefox_desktop/index.html | 38 + .../firefox_for_android/index.html | 136 ++++ files/de/tools/remote_debugging/index.html | 44 ++ files/de/tools/scratchpad/index.html | 85 +++ files/de/tools/seiten_inspektor/index.html | 109 +++ .../tastenkombinationen/index.html | 12 + files/de/tools/shader-editor/index.html | 57 ++ .../storage_inspector/cache_storage/index.html | 15 + .../de/tools/storage_inspector/cookies/index.html | 43 ++ files/de/tools/storage_inspector/index.html | 200 +++++ .../tools/storage_inspector/indexeddb/index.html | 45 ++ .../local_storage_session_storage/index.html | 20 + files/de/tools/style_editor/index.html | 54 ++ files/de/tools/web_konsole/hilfe/index.html | 65 ++ files/de/tools/web_konsole/index.html | 582 ++++++++++++++ files/de/tools/webide/index.html | 280 +++++++ .../tools/webide/probleml\303\266sung/index.html" | 165 ++++ files/de/tools/webide_clone/index.html | 279 +++++++ 43 files changed, 5567 insertions(+) create mode 100644 files/de/tools/3d_untersuchung/index.html create mode 100644 files/de/tools/about_colon_debugging/index.html create mode 100644 files/de/tools/add-ons/index.html create mode 100644 files/de/tools/barrierefreiheits_inspektor/index.html create mode 100644 files/de/tools/bildschirmgroessen-testen/index.html create mode 100644 files/de/tools/browser_console/index.html create mode 100644 files/de/tools/browser_werkzeuge/index.html create mode 100644 files/de/tools/debugger/how_to/index.html create mode 100644 files/de/tools/debugger/how_to/open_the_debugger/index.html create mode 100644 files/de/tools/debugger/how_to/use_a_source_map/index.html create mode 100644 files/de/tools/debugger/index.html create mode 100644 files/de/tools/debugger/settings/index.html create mode 100644 files/de/tools/debugger/source_map_errors/index.html create mode 100644 files/de/tools/firefox_os_1.1_simulator/index.html create mode 100644 files/de/tools/index.html create mode 100644 files/de/tools/index/index.html create mode 100644 files/de/tools/json_viewer/index.html create mode 100644 files/de/tools/keyboard_shortcuts/index.html create mode 100644 files/de/tools/netzwerkanalyse/index.html create mode 100644 files/de/tools/page_inspector/how_to/event_listener_untersuchen/index.html create mode 100644 files/de/tools/page_inspector/how_to/index.html create mode 100644 files/de/tools/page_inspector/how_to/raster_layout_untersuchen/index.html create mode 100644 files/de/tools/page_inspector/how_to/schriftarten_bearbeitung/index.html create mode 100644 files/de/tools/paint_flashing_tool/index.html create mode 100644 files/de/tools/performance/index.html create mode 100644 files/de/tools/remote_debugging/debugging_firefox_desktop/index.html create mode 100644 files/de/tools/remote_debugging/firefox_for_android/index.html create mode 100644 files/de/tools/remote_debugging/index.html create mode 100644 files/de/tools/scratchpad/index.html create mode 100644 files/de/tools/seiten_inspektor/index.html create mode 100644 files/de/tools/seiten_inspektor/tastenkombinationen/index.html create mode 100644 files/de/tools/shader-editor/index.html create mode 100644 files/de/tools/storage_inspector/cache_storage/index.html create mode 100644 files/de/tools/storage_inspector/cookies/index.html create mode 100644 files/de/tools/storage_inspector/index.html create mode 100644 files/de/tools/storage_inspector/indexeddb/index.html create mode 100644 files/de/tools/storage_inspector/local_storage_session_storage/index.html create mode 100644 files/de/tools/style_editor/index.html create mode 100644 files/de/tools/web_konsole/hilfe/index.html create mode 100644 files/de/tools/web_konsole/index.html create mode 100644 files/de/tools/webide/index.html create mode 100644 "files/de/tools/webide/probleml\303\266sung/index.html" create mode 100644 files/de/tools/webide_clone/index.html (limited to 'files/de/tools') diff --git a/files/de/tools/3d_untersuchung/index.html b/files/de/tools/3d_untersuchung/index.html new file mode 100644 index 0000000000..061ce4f11b --- /dev/null +++ b/files/de/tools/3d_untersuchung/index.html @@ -0,0 +1,99 @@ +--- +title: 3D-Untersuchung +slug: Tools/3D_untersuchung +translation_of: Tools/3D_View +--- +
{{ToolsSidebar}}
+
+

Seit Firefox 47 ist die 3D-Ansicht nicht mehr verfügbar.

+ +

Es gibt ein Add-on, das diese Funktionalität erhält: Tilt 3D. Beachten Sie allerdings, dass auch dieses nicht mit dem Multiprocess-Firefox kompatibel ist.

+
+ +

Mit einem Klick auf die 3D-Untersuchung Schaltfläche gelangst du in in den 3D-Untersuchungsmodus. In diesem Modus werden die HTML Elemente als dreidimensionale Blöcke dargestellt. Die Verschachtelung der Inhalte wird so auf eine eindrückliche Art und Weise virtualisiert, was einem das Studieren des Aufbaus der Seite erleichtert.

+ +

+ +

Durch Klicken uns Ziehen mit der Maus, kann man die Ansicht in alle Richtungen drehen und so die DOM Struktur von verschiedenen Winkeln aus betrachten. Auch Elemente ausserhalb des Bildschirmrands und solche, die versteckt sind, werden in dieser Ansicht sichtbar. Mit einem Klick auf ein Element, sieht man den entsprächenden Code im HTML panel bzw. dem Style panel. Umgekehrt kann man auch ein Element im Code auswählen, damit es im 3D-Untersuchungsmodus hervorgehoben wird.

+ +

Falls der 3D-Untersuchung Schaltfläche nicht angezeigt wird, ist es möglich, dass du deinen Grafik-Treiber aktualisieren musst. Siehe Liste blockierter Grafik-Treiber für weitere Informationen.

+ +

Steuerung der 3D-Ansicht

+ +

Die Ansicht im 3D-Untersuchungsmodus kann mit der Maus und der Tastatur gesteuert werden.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunktionTastaturMaus
Vergrössern/Verkleinern+ / -Scroll wheel up/down
Nach links/rechts drehena / dMaus nach links/rechtsziehen
Nach oben/unten kippenw / sMaus nach oben/unten ziehen
Ansicht nach links/rechts verschieben← / →-
Ansicht nach oben/unten verschieben↑ / ↓-
Vergrösserung/Verkleinerung zurücksetzten0-
Ausgewähles Element fokusieren {{ fx_minversion_inline("13.0") }}f-
Ansicht (Grösse und Sichtswinkel) zurücksetzten {{ fx_minversion_inline("12.0") }}r-
Ausgewähltes Element ausblenden  {{ fx_minversion_inline("12.0") }}x-
+ +

Anwendungsbeispiele

+ +

Die 3D-Untersuchung ist in vielen Hinsichten hilfreich:

+ + + +

Siehe auch

+ + + +

{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "zh-cn": "zh-cn/Tools/Page_Inspector/3D_view"} ) }}

diff --git a/files/de/tools/about_colon_debugging/index.html b/files/de/tools/about_colon_debugging/index.html new file mode 100644 index 0000000000..a342b78ee8 --- /dev/null +++ b/files/de/tools/about_colon_debugging/index.html @@ -0,0 +1,252 @@ +--- +title: 'about:debugging' +slug: 'Tools/about:debugging' +translation_of: 'Tools/about:debugging' +--- +

{{ToolsSidebar}}

+ +

The about:debugging page provides a single place from which you can attach the Firefox Developer Tools to a number of debugging targets. At the moment it supports three main sorts of targets: restartless add-ons, tabs, and workers.

+ +

Opening the about:debugging page

+ +

There are two ways to open about:debugging:

+ + + +

When about:debugging opens, on the left-hand side, you'll see a sidebar with two options and information about your remote debugging setup:

+ +
+
Setup
+
Use the Setup tab to configure the connection to your remote device.
+
This Firefox
+
Provides information about temporary extensions you have loaded for debugging, extensions that are installed in Firefox, the tabs that you currently have open, and service workers running on Firefox.
+
+ +

+ +

If your about:debugging page is different from the one displayed here, go to about:config, find and set the option devtools.aboutdebugging.new-enabled to true.

+ +

Setup tab

+ +

Connecting to a remote device

+ +

Firefox supports debugging over USB with Android devices, using the about:debugging page.

+ +

Before you connect:

+ +
    +
  1. Enable Developer settings on your Android device.
    2. +
  2. Enable USB debugging in the Android Developer settings.
    3. +
  3. Enable Remote Debugging via USB in the Advanced Settings in Firefox on the Android device.
    4. +
  4. Connect the Android device to your computer using a USB cable.
    5. +
+ +

If your device doesn't appear in the lefthand side of the about:debugging page, try clicking the Refresh devices button.

+ +

If it still doesn't appear, it may be because the link between your Android device and your computer is not authorized yet. First make sure you have installed Android Debug Bridge from Android Tools on your computer in order for it to be able to connect to your device. Next, disable every debugging setting already activated and repeat the steps described before. Your device should show a popup to authorize your computer to connect to it — accept this and then click the Refresh devices button again. The device should appear.

+ +
+

Note: You do not need to install the full Android Studio SDK. Only adb is needed.

+
+ +

To start a debugging session, first open the page that you wish to debug and then click Connect next to the device name to open a connection to it. If the connection was successful, you can now click the name of the device to switch to a tab with information about the device.

+ +

Screenshot of the debugging page for an Android device

+ +

The information on this page is the same as the information on the This Firefox tab, but instead of displaying information for your computer, it displays the information for the remote device with the addition of a Tabs section with an entry for each of the tabs open on the remote device.

+ +

Note: If the version of Firefox on your remote device is more than one major version older than the version running on your computer, you may see a message like the following:

+ +

The connected browser has an old version (68.2.0). The minimum supported version (69.0a1). This is an unsupported setup and may cause DevTools to fail. Please update the connected browser.

+ +

In Firefox 76 and above, the message can look like the following:

+ +

This version of Firefox cannot debug Firefox for Android (68). We recommend installing Firefox for Android Nightly on your phone for testing. More details

+ +

See Connection for Firefox for Android 68 for more information.

+ +

In the image above, there are three tabs open: Network or cache Recipe, Nightly Home, and About Nightly. To debug the contents of one of these tabs, click the Inspect button next to its title. When you do, the Developer Tools open in a new tab.

+ +

Screenshot showing the remote debugging window, with the editable URL bar

+ +

Above the usual list of tools, you can see information about the device you are connected to, including the fact that you are connected (in this example) via USB, to Firefox Preview, on a Pixel 2, as well as the title of the page that you are debugging, and the address of the page.

+ +

Starting in Firefox 78, the URL bar is editable, so that you can change the URL used by the browser on the remote device, by typing in Firefox for Desktop. You can also reload the page by clicking the Reload button next to the URL bar, and (starting 79), navigate backward or forward in the browsing history with the Back and Forward buttons.

+ +

Connecting over the Network

+ +

You can connect to a Firefox Debug server on your network, or on your debugging machine using the Network Location settings of the about:debugging page.

+ +

+ +

Enter the location and port on which the debugger server is running. When you do, it is added to the Network locations list along with the devices, as shown below:

+ +

+ +

This Firefox

+ +

The This Firefox tab combines the features of Extensions, Tabs, and Workers into a single tab with the following sections:

+ +
+
Temporary Extensions
+
Displays a list of the extensions that you have loaded using the Load Temporary Add-on button.
+
Extensions
+
This section lists information about the extensions that you have installed on your system.
+
Service Workers, Shared Workers, and Other Workers
+
There are three sections on this page that deal with Service Workers, Shared Workers, and Other Workers.
+
+ +

+ +

Whether internal extensions appear in the list on this page depends on the setting of the devtools.aboutdebugging.showHiddenAddons preference. If you need to see these extensions, navigate to about:config and make sure that the preference is set to true.

+ +

Extensions

+ +

Loading a temporary extension

+ +

With the Load Temporary Add-on button you can temporarily load a web extension from a directory on disk. Click the button, navigate to the directory containing the add-on and select its manifest file. The temporary extension is then displayed under the Temporary Extensions header.

+ +

You don't have to package or sign the extension before loading it, and it stays installed until you restart Firefox.

+ +

The major advantages of this method, compared with installing an add-on from an XPI, are:

+ + + +

Once you have loaded a temporary extension, you can see information about it and perform operations on it.

+ +

Screenshot of the debugging information panel for a temporary extension

+ +

You can use the following buttons:

+ +
+
Inspect
+
Loads the extension in the debugger.
+
Reload
+
Reloads the temporary extension. This is handy when you have made changes to the extension.
+
Remove
+
Unloads the temporary extension.
+
+ +

Other information about the extension is displayed:

+ +
+
Location
+
The location of the extension's source code on your local system.
+
Extension ID
+
The temporary ID assigned to the extension.
+
Internal UUID
+
The internal UUID assigned to the extension.
+
Manifest URL
+
If you click the link, the manifest for this extension is loaded in a new tab.
+
+ +

Updating a temporary extension

+ +

If you install an extension in this way, what happens when you update the extension?

+ + + +

Installed Extensions

+ +

The permanently installed extensions are listed in the next section, Extensions. For each one, you see something like the following:

+ +

Screenshot of the debugging information panel for an installed extension

+ +

The Inspect button, and the Extension ID and Internal UUID fields are the same as for temporary extensions.

+ +

Just as it does with temporarily loaded extensions, the link next to Manifest URL opens the loaded manifest in a new tab.

+ +
+

Note: It's recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See Debugging WebExtensions for all the details.

+
+ +

The Add-ons section in about:debugging lists all web extensions that are currently installed. Next to each entry is a button labeled Inspect.

+ +
+

Note: This list may include add-ons that came preinstalled with Firefox.

+
+ +

If you click Inspect, the Add-on Debugger will start in a new tab.

+ +

{{EmbedYouTube("efCpDNuNg_c")}}

+ +

See the page on the Add-on Debugger for all the things you can do with this tool.

+ +

Workers

+ +

The Workers section shows all the workers you've got registered on your Firefox, categorised as follows:

+ + + +

You can connect the developer tools to each worker, and send push notifications to service workers.

+ +

+ +

Service worker state

+ +

The list of service workers shows the state of the service worker in its lifecycle. Three states are possible:

+ + + +

Screenshot of the debugging panel for a service worker that is in the Running state

+ +

This section uses a simple ServiceWorker demo, hosted at https://serviceworke.rs/push-simple/.

+ +
+

Note: From Firefox 79 onwards, you can access similar information on the Service Workers registered on a particular domain by going to the Firefox DevTools Application panel.

+
+ +

Unregistering service workers

+ +

Click the Unregister button to unregister the service worker.

+ +

Sending push events to service workers

+ +

To debug push notifications, you can set a breakpoint in the push event listener. However, you can also debug push notifications locally, without needing the server. Click the Push button to send a push event to the service worker.

+ +

Service workers not compatible

+ +
+

A warning message is displayed at the top of the This Firefox tab if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.

+ +

+
+ +

Service workers can be unavailable if the dom.serviceWorkers.enable preference is set to false in about:config.

+ +

Connection to Firefox for Android 68

+ +

Releases of Firefox for Android that are based on version 68 cannot be debugged from desktop Firefox versions 69 or later, because of the difference in release versions. Until such time as Firefox for Android is updated to a newer major release, in synch with desktop Firefox, you should use one of the following Firefox for Android versions:

+ + + +

If you prefer to test with the main release of Firefox for Android (i.e., based on release 68), you can do so with the desktop Firefox Extended Support Release (ESR), which is also based on version 68.

+ +

Note that about:debugging is not enabled by default in Firefox ESR.  To enable it, open the Configuration Editor (about:config) and set devtools.aboutdebugging.new-enabled to true.

+ +

If you used a higher version of Firefox prior to installing Firefox ESR, you will be prompted to create a new user profile, in order to protect your user data. For more information, see What happens to my profile if I downgrade to a previous version of Firefox?

diff --git a/files/de/tools/add-ons/index.html b/files/de/tools/add-ons/index.html new file mode 100644 index 0000000000..24ffbe79e9 --- /dev/null +++ b/files/de/tools/add-ons/index.html @@ -0,0 +1,17 @@ +--- +title: Add-ons +slug: Tools/Add-ons +tags: + - NeedsTranslation + - TopicStub + - Web Development + - 'Web Development:Tools' +translation_of: Tools/Add-ons +--- +
{{ToolsSidebar}}

Developer tools that are not built into Firefox, but ship as separate add-ons.

+ +
+
WebSocket Monitor
+
Examine the data exchanged in a WebSocket connection.
+
 
+
diff --git a/files/de/tools/barrierefreiheits_inspektor/index.html b/files/de/tools/barrierefreiheits_inspektor/index.html new file mode 100644 index 0000000000..24195cabad --- /dev/null +++ b/files/de/tools/barrierefreiheits_inspektor/index.html @@ -0,0 +1,136 @@ +--- +title: Barrierefreiheitsinspektor +slug: Tools/Barrierefreiheits_inspektor +translation_of: Tools/Accessibility_inspector +--- +

{{ToolsSidebar}}

+ +

Der Barrierefreiheitsinspektor bietet Zugriff auf wichtige Informationen, die auf der aktuellen Seite über die barrierefreie Strukturansicht den Hilfstechnologien zur Verfügung gestellt werden. So können Sie überprüfen, was fehlt oder ob Sie anderweitig darauf achten müssen. Dieser Artikel führt Sie durch die Hauptfunktionen des Barrierefreiheitsinspektor und dessen Verwendung.

+ +

Ein (sehr) kurzer Leitfaden zur Barrierefreiheit

+ +

Barrierefreiheit ist die Praxis, Ihre Websites für möglichst viele Menschen nutzbar zu machen. Dies bedeutet, dass Sie alles versuchen sollten, um Personen nicht daran zu hindern, auf Informationen zuzugreifen, weil sie eine Behinderung haben oder andere persönliche Umstände sie einschränken wie das von ihnen verwendete Gerät, die Geschwindigkeit ihrer Netzwerkverbindung oder ihre geografische Position oder ihr Gebietsschema.

+ +

Hier geht es vor allem darum, Informationen für Menschen mit Sehbehinderungen zu anzuzeigen - dies geschieht über die in Webbrowsern verfügbaren Zugänglichkeits-APIs, die Informationen darüber liefern, welche Rollen die verschiedenen Elemente auf Ihrer Seite spielen (z.B. bestehen sie nur aus Text oder sind es Buttons, Links, Formularelemente, etc.?).

+ +

Semantischen DOM-Elementen sind standardmäßig Rollen zugewiesen, die auf ihren Zweck hindeuten. Manchmal müssen Sie jedoch ein nicht-semantisches Markup (z. B. {{htmlelement ("div")}} s) verwenden, um ein komplexes benutzerdefiniertes Steuerelement zu erstellen, und das Steuerelement hat keine Standardrolle, die seinen Zweck widerspiegelt. In solch einer Situation können Sie WAI-ARIA-Rollenattribute verwenden, um Ihre eigenen Rollen bereitzustellen.

+ +

Rollen und andere Informationen, die von Browser-APIs zur Verfügung gestellt werden, werden in einer hierarchischen Struktur namens Zugänglichkeitsbaum dargestellt. Ähnlich wie der DOM-Baum, außer dass er eine begrenzte Anzahl von Elementen und etwas andere Informationen über sie enthält.

+ +

Hilfstechnologien wie Screenreader nutzen diese Informationen, um herauszufinden, was auf einer Webseite vorhanden ist, lesen ihren Benutzern vor, was dort ist, und ermöglichen ihnen, mit der Seite zu interagieren. Der Zugänglichkeitsinspektor verwendet diese Informationen auch, um wertvolle Debugging-Funktionen für die Barrierefreiheit in den DevTools bereitzustellen.

+ +

Auf den Barrierefreiheitsinspektor zugreifen

+ +

Der Barrierefreiheitsinspektor (verfügbar seit Firefox 61) wird in den DevTools standardmäßig nicht angezeigt. Um ihn einzuschalten, müssen Sie zu den DevTools-Einstellungen gehen (drücken Sie F1 , oder gehen Sie zum "Drei Punkte" -Menü und wählen Sie Einstellungen) und aktivieren Sie das Kontrollkästchen Barrierefreiheit unter der Überschrift Standard-Entwicklungswerkzeuge. Die Registerkarte Barrierefreiheit im DevTools-Fenster wird angezeigt, auf die man klicken kann, um den Barrierefreiheitsinspektor anzuzeigen:

+ +

Barrierefreiheitsregister in Firefox DevTools, deaktiviert, mit einem Button, der die Beschriftung trägt "Barrierefreiheitsfunktionen aktivieren"ures

+ +

Anfangs sind die DevTools-Barrierefreiheitsfunktionen deaktiviert. (Es sei denn, Sie haben sie bereits in einer anderen Browser-Registerkarte aktiviert oder die Firefox-Barrierefreiheit-Engine wurde bereits gestartet, z. B. könnten Sie ein Screenreader-Benutzer oder -Tester sein). Dies liegt daran, dass die Eingabehilfen-Engine im Hintergrund ausgeführt wird, wenn die Barrierefreiheitsfunktionen aktiviert sind. Während sie ausgeführt wird, verlangsamt sie Leistung und Arbeitsspeicher; Daher stört es die Messwerte anderer Panels wie Speicher und Leistung sowie die allgemeine Browserleistung. Aus diesem Grund sollten Sie die Barrierefreiheitsfunktionen ausschalten, wenn Sie sie nicht verwenden.

+ +

Sie können die Funktionen mithilfe der Schaltfläche Barrierefreiheitsfunktionen aktivieren einschalten.

+ +

Sobald der Inhalt des Bedienfelds geladen ist, können Sie ihn mithilfe der Schaltfläche Barrierefreiheitsfunktionen deaktivieren in der oberen linken Ecke wieder deaktivieren, es sei denn, die Barrierefreiheitsengine wurde zuvor zum Ausführen eines Bildschirmlesers ausgeführt. In diesem Fall wird diese Schaltfläche deaktiviert.

+ +
+

Hinweis: Wenn Sie die Eingabehilfen auf mehreren Registerkarten verwenden, werden sie auf allen Registerkarten deaktiviert.

+
+ +

Features of the Accessibility panel

+ +

The enabled accessibility panel looks like so:

+ +

Accessibility tab in firefox devtools, turned on, showing two information panels plus a button labeled Turn Off Accessibility Features

+ +

On the left-hand side, there is a tree diagram representing all the items in the accessibility tree for the current page. Items with nested children have arrows that can be clicked to reveal the children, so you can move deeper into the hierarchy. Each item has two properties listed:

+ + + +

On the right-hand side, you can see further information about the currently selected item. The listed properties are as follows:

+ + + +
+

Note: The exposed information is the same across all platforms — the inspector exposes Gecko's accessibility tree, rather than information from the platform accessibility layer.

+
+ +

Keyboard controls

+ +

The Accessibility tab is fully keyboard-accessible:

+ + + + + +

When the accessibility features are turned on, there are a number of useful additional features available in the DevTools, which are detailed below:

+ +

Context menu options

+ +

An extra context menu option is added, both for the general context menu on the web page when right/Ctrl + clicking a UI feature, and the HTML pane of the page inspector when right/Ctrl + clicking a DOM element:

+ +

context menu in the browser viewport, with a highlighted option: Inspect Accessibility Properties

+ +

context menu in the DOM inspector, with a highlighted option: Show Accessibility Properties

+ +

When you choose the Inspect Accessibility Properties/Show Accessibility Properties context menu options, the Accessibility tab is immediately opened to show the corresponding accessibility tree item and its properties.

+ +
+

Note: Some DOM elements do not have accessibility properties — in such a case, the Inspect Accessibility Properties/Show Accessibility Properties context menu item is grayed out.

+
+ +

Highlighting of UI items

+ +

In the Accessibility tab, when the mouse hovers over accessibility items, you can see a semi-transparent highlight appear over the UI items they relate to, if appropriate. This is useful for determining how the items in the accessibility tree relate to the UI items on the actual page.

+ +

Accessibility picker

+ +

In a similar way to the Page Inspector HTML pane picker, when the Accessibility tab's picker button is pressed you can then hover and select UI items in the current page, and the corresponding accessible object is highlighted in the accessibility tree.

+ +

The accessibility tab picker differs in look slightly from the Page Inspector HTML pane picker, as shown below:

+ +

highlighted dom inspector picker button, with a tooltip saying Pick an element from the page

+ +

highlighted accessibility inspector button, with a tooltip saying Pick accessible object from the page

+ +

When you "perform a pick", you see the accessibility object highlighted in the accessibility tree, and the picker is then deactivated. Note, however, that if you hold the Shift key down when "performing a pick", you can "preview" the accessibility object in the tree (and its properties in the right-hand pane), but then continue picking as many times as you like (the picker does not get cancelled) until you release the Shift key.

+ +

When the picker is activated, you can also deactivate it by pressing the picker button a second time, or pressing the Esc key.

+ +

Typical use cases

+ +

The accessibility inspector is very useful for spotting accessibility problems at a glance. For a start, you can investigate items that don't have a proper text equivalent — images without alt text and form elements without proper labels have a name property of null, for example.

+ +

A form input highlighted in the UI, with information about it shown in the accessibility inspector to reveal that it has no label — it has a name property of null

+ +

It is also very handy for verifying semantics — you can use the Inspect Accessibility Properties context menu option to quickly see whether an item has the correct role set on it (e.g., whether a button is really a button, or whether a link is really a link).

+ +

A UI element that looks like a button, with information about it shown in the accessibility inspector to reveal that it isn't a button, it is a section element. It has a name property of null

+ +

See also

+ + diff --git a/files/de/tools/bildschirmgroessen-testen/index.html b/files/de/tools/bildschirmgroessen-testen/index.html new file mode 100644 index 0000000000..08921cb77d --- /dev/null +++ b/files/de/tools/bildschirmgroessen-testen/index.html @@ -0,0 +1,81 @@ +--- +title: Bildschirmgrößen testen +slug: Tools/bildschirmgroessen-testen +translation_of: Tools/Responsive_Design_Mode +--- +
{{ToolsSidebar}}

Responsive Designs passen sich an verschiedene Bildschirmgrößen an um auf verschiedenen Arten von Geräten, wie zum Beispiel Mobilgeräte oder Tablets, angemessen dargestellt zu werden. Die Ansicht "Bildschirmgrößen testen" macht es einfach zu sehen, wie Ihre Webseite oder Web-App auf verschiedenen Bildschirmgrößen aussehen wird.

+ +

Im folgenden Bildschirmfoto wird eine Seite der mobilen Version von Wikipedia auf einer 320 mal 480 Pixel großen Fläche dargestellt.

+ +

Die Ansicht "Bildschirmgrößen testen" ist leicht zu bedienen, da sie schnell und präzise die Größe der Darstellungsfläche ändern können.

+ +

Natürlich könnten Sie einfach die größe Ihres Browser-Fensters ändern: aber wenn Sie dies tun, werden dann auch alle anderen Registerkarten im Registerkartenreiter verkleinert, was die Bedienung der Benutzeroberfläche des Browsers viel schwerer macht.

+ +

Während die Ansicht "Bildschirmgrößen testen" aktiviert ist, können sie weiterhin wie gewohnt im skalierten Inhaltsbereich navigieren.

+ +

Aktivieren und deaktivieren

+ +

Es gibt zwei Möglichkeiten um Bildschirmgrößen zu testen:

+ + + +

Es gibt drei Möglichkeiten, um die Ansicht wieder zu deaktivieren:

+ + + +

Skalieren

+ +

Sie können die Inhaltsfläche auf eine von zwei Arten ändern:

+ + + +

Wenn Sie mit der zweiten Methode die Ansicht skalieren, können Sie die Funktionstaste (Steuertaste auf Mac OS X) gedrückt halten um die Größe beim Skalieren zu verfeinern. Dies macht das Auswählen der Größe viel präziser.

+ +
+

Bedienelemente der Ansicht

+ +

Auf der Oberseite des Fensters, in dem die Bildschirmgrößen getestet werden, gibt es fünf Bedienelemente:

+ + + + + + + + + + + + + + + + + + + + + + + + +
SchließenSchließen Sie die Ansicht "Bildschirmgrößen testen" und kehren Sie zur normalen Ansicht zurück
Größe auswählenWählen Sie aus mehreren vorgegebenen Breiten x Höhen-Kombinationen oder geben Sie Ihre eigenen ein.
DrehenDrehen Sie die die Ansicht und wechseln Sie so zwischen horizontaler und vertikaler Ansicht.
+

Berührungsereignisse simulieren

+ 		+

"Berührungsereignisse simulieren" aktivieren/deaktivieren: falls aktiviert, werden Mausereignisse in Berührungsereignisse umgewandelt.

+
+

Bildschirmfoto erstellen

+ 		Bildschirmfoto der Inhaltsansicht erstellen. Bildschirmfotos werden im standardmäßigen Download-Ordner abgespeichert.
+
+ +

 

diff --git a/files/de/tools/browser_console/index.html b/files/de/tools/browser_console/index.html new file mode 100644 index 0000000000..39d8c889ec --- /dev/null +++ b/files/de/tools/browser_console/index.html @@ -0,0 +1,157 @@ +--- +title: Browser Console +slug: Tools/Browser_Console +translation_of: Tools/Browser_Console +--- +
{{ToolsSidebar}}

The Browser Console is like the Web Console, but applied to the whole browser rather than a single content tab.

+ +

So it logs the same sorts of information as the Web Console - network requests, JavaScript, CSS, and security errors and warnings, and messages explicitly logged by JavaScript code. However, rather than logging this information for a single content tab, it logs information for all content tabs, for add-ons, and for the browser's own code.

+ +

Similarly, you can execute JavaScript expressions using the Browser Console. But while the Web Console executes code in the page window scope, the Browser Console executes them in the scope of the browser's chrome window. This means you can interact with all the browser's tabs using the gBrowser global, and even with the XUL used to specify the browser's user interface.

+ +

To open the Browser Console, select "Browser Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X).

+ +

From Firefox 27 onwards, you can also start the Browser Console by launching Firefox from the command line and passing the -jsconsole argument:

+ +
/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole
+ +

The Browser Console looks like this:

+ +

+ +

You can see that the Browser Console looks and behaves very much like the Web Console:

+ + + +

Browser Console logging

+ +

The Browser console logs the same sorts of messages as the Web Console:

+ + + +

However, it displays such messages from:

+ + + +

Messages from add-ons

+ +

The Browser Console displays messages logged by all Firefox add-ons.

+ +

Console.jsm

+ +

To use the console API from a traditional or bootstrapped add-on, get it from the Console module.

+ +

One exported symbol from Console.jsm is "console". Below is an example of how to acess it, which adds a message to the Browser Console.

+ +
const Cu = Components.utils;
+const consoleJSM =
+Cu.import("resource://gre/modules/devtools/Console.jsm", {});
+let console = consoleJSM.console; //access exported symbol of "console" from the Console.jsm
+
+console.log("Hello from Firefox code"); //output messages to the console
+ +

 

+ +

The full module with other functionality is found here on Mozilla Cross-Reference.

+ +

For more methods of the console exported attribute of the Console.jsm see this article: Console

+ +

HUDService

+ +

There is also the HUDService which allows access to the Browse Console. The module is available at Mozilla Cross-Reference. We see we can not only access the Browser Console but also Web Console.

+ +

Here is an example on how to clear the contents of the Browser console:

+ +
var devtools = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}).devtools;
+var HUDService = devtools.require("devtools/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+hud.jsterm.clearOutput(true);
+ +

If you would like to access the content document of the Browser Console this can be done with the HUDService. This example here makes it so that when you mouse over the "Clear" button it will clear the Browser Console:

+ +
var devtools = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}).devtools;
+var HUDService = devtools.require("devtools/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+
+var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button');
+clearBtn.addEventListener('mouseover', function() {
+  hud.jsterm.clearOutput(true);
+}, false);
+ +

Bonus Features Available

+ +

For Add-on SDK add-ons, the console API is available automatically. Here's an example add-on that just logs an error when the user clicks a widget:

+ +
widget = require("sdk/widget").Widget({
+  id: "an-error-happened",
+  label: "Error!",
+  width: 40,
+  content: "Error!",
+  onClick: logError
+});
+
+function logError() {
+  console.error("something went wrong!");
+}
+ +

If you build this as an XPI file, then open the Browser Console, then open the XPI file in Firefox and install it, you'll see a widget labeled "Error!" in the Add-on bar:

+ +

Click the icon. You'll see output like this in the Browser Console:

+ +

+ +

For Add-on SDK-based add-ons only, the message is prefixed with the name of the add-on ("log-error"), making it easy to find all messages from this add-on using the "Filter output" search box. By default, only error messages are logged to the console, although you can change this in the browser's preferences.

+ +

Browser Console command line

+ +

Like the Web Console, the command line interpreter enables you to evaluate JavaScript expressions in real time:Also like the Web Console's command line interpreter, this command line supports autocomplete, history, and various keyboard shortcuts and helper commands. If the result of a command is an object, you can click on the object to see its details.

+ +

But while the Web Console executes code in the scope of the content window it's attached to, the browser console executes code in the scope of the chrome window of the browser. You can confirm this by evaluating window:

+ +

+ +

This means you can control the browser: opening, closing tabs and windows and changing the content that they host, and modify the browser's UI by creating, changing and removing XUL elements.

+ +

Controlling the browser

+ +

The command line interpreter gets access to the tabbrowser object, through the gBrowser global, and that enables you to control the browser through the command line. Try running this code in the Browser Console's command line (remember that to send multiple lines to the Browser Console, use Shift+Enter):

+ +
var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
+newTabBrowser.addEventListener("load", function() {
+  newTabBrowser.contentDocument.body.innerHTML = "<h1>this page has been eaten</h1>";
+}, true);
+newTabBrowser.contentDocument.location.href = "https://mozilla.org/";
+ +

It adds a listener to the currently selected tab's load event that will eat the new page, then loads a new page.

+ +

Modifying the browser UI

+ +

Since the global window object is the browser's chrome window, you can also modify the browser's user interface. On Windows, the following code will add a new item to the browser's main menu:

+ +
var parent = window.document.getElementById("appmenuPrimaryPane");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);
+ +

On OS X, this similar code will add a new item to the "Tools" menu:

+ +
var parent = window.document.getElementById("menu_ToolsPopup");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);
+ +

diff --git a/files/de/tools/browser_werkzeuge/index.html b/files/de/tools/browser_werkzeuge/index.html new file mode 100644 index 0000000000..63c820a218 --- /dev/null +++ b/files/de/tools/browser_werkzeuge/index.html @@ -0,0 +1,42 @@ +--- +title: Browser_Werkzeuge +slug: Tools/Browser_Werkzeuge +tags: + - Developer + - Fehlerbehebung + - Firefox + - JavaScript +translation_of: Tools/Browser_Toolbox +--- +
{{ToolsSidebar}}

Die Browser-Werkzeuge sind wie die normale Webkonsole, aber funktionieren mit dem ganzen Browser und nicht nur mit einem einzelnen Tab. Es erlaubt Ihnen die normalen Entwicklertools für den Browser an sich zu benutzen, statt nur für eine Seite. Dies erlaubt Ihnen dann auch das debuggen von Addons und vom browsereigenen JavaScript Code und nicht nur von Internetseiten.

+ +

Öffnen der Browser-Werkzeuge

+ +

Die Browser-Werkzeuge sind nicht standardmäßig aktiviert. Um dies zu tun, müssen Sie diese Schritte befolgen:

+ + + +

Jetzt sollten sie einen neuen Menüpunkt mit dem Namen "Browser-Werkzeuge" sehen.

+ +

Nach dem Klick auf Browser Toolbox wird Ihnen eine Meldung wie folgt angezeigt:

+ +

Bestätigen Sie diese mit OK und die Browser Toolbox wird in einem seperatem Fenster geöffnet:

+ +

Sie sehen alle JavaScript Dateien, die vom Browser und den laufenen Add-Ons, geladen wurden und können diese debuggen. Außerdem haben Sie Zugriff auf folgende Entwickler Werkzeuge (developer tools):

+ + + +

 

+ +

 

diff --git a/files/de/tools/debugger/how_to/index.html b/files/de/tools/debugger/how_to/index.html new file mode 100644 index 0000000000..084f1717e5 --- /dev/null +++ b/files/de/tools/debugger/how_to/index.html @@ -0,0 +1,11 @@ +--- +title: How to +slug: Tools/Debugger/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Debugger/How_to +--- +
{{ToolsSidebar}}

These articles describe how to use the debugger.

+ +

{{ ListSubpages () }}

diff --git a/files/de/tools/debugger/how_to/open_the_debugger/index.html b/files/de/tools/debugger/how_to/open_the_debugger/index.html new file mode 100644 index 0000000000..1fe2d0fb8b --- /dev/null +++ b/files/de/tools/debugger/how_to/open_the_debugger/index.html @@ -0,0 +1,22 @@ +--- +title: Öffne den Debugger +slug: Tools/Debugger/How_to/Open_the_debugger +translation_of: Tools/Debugger/How_to/Open_the_debugger +--- +
{{ToolsSidebar}}
+ +

Es gibt drei Möglichkeiten den Debugger zu öffnen:

+ + + +

{{EmbedYouTube("yI5SlVQiZtI")}}

+ +

 

diff --git a/files/de/tools/debugger/how_to/use_a_source_map/index.html b/files/de/tools/debugger/how_to/use_a_source_map/index.html new file mode 100644 index 0000000000..db733cd8f2 --- /dev/null +++ b/files/de/tools/debugger/how_to/use_a_source_map/index.html @@ -0,0 +1,32 @@ +--- +title: Use a source map +slug: Tools/Debugger/How_to/Use_a_source_map +translation_of: Tools/Debugger/How_to/Use_a_source_map +--- +
{{ToolsSidebar}}
+ +

The JavaScript sources executed by the browser are often transformed in some way from the original sources created by a developer. For example:

+ + + +

In these situations, it's much easier to debug the original source, rather than the source in the transformed state that the browser has downloaded. A source map is a file that maps from the transformed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger.

+ +

To enable the debugger to work with a source map, you must:

+ + + +
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
+ +

{{EmbedYouTube("Fqd15gHC4Pg")}}

+ +

In the video above we load https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html. This page loads a source called "main.js" that was originally written in CoffeeScript and compiled to JavaScript. The compiled source contains a comment like this, that points to a source map:

+ +
//# sourceMappingURL=main.js.map
+ +

In the Debugger's source list pane, the original CoffeeScript source now appears as "main.coffee", and we can debug it just like any other source.

diff --git a/files/de/tools/debugger/index.html b/files/de/tools/debugger/index.html new file mode 100644 index 0000000000..e105ba65b5 --- /dev/null +++ b/files/de/tools/debugger/index.html @@ -0,0 +1,369 @@ +--- +title: Debugger +slug: Tools/Debugger +translation_of: Tools/Debugger +--- +
{{ToolsSidebar}}
+ +

Der JavaScript Debugger ermöglicht es dir, schrittweise durch den JavaScript Code zu gehen und dabei seinen Zustand zu sehen und zu verändern, um Fehler im Code einfacher zu finden.

+ +

Man kann ihn benutzen, um Code lokal in Firefox zu debuggen, oder remote - zum Beispiel auf einem Firefox-OS-Gerät oder einem Firefox auf Android. In dieser Anleitung wird davon ausgegangen, dass du lokalen Code bearbeitest, aber das meiste trifft auch für das Remote-Debugging zu. Zu den Unterschieden siehe die Anleitung zum Remote-Debugging.

+ +

Um den Debugger zu öffnen, wählt man einfach "Debugger" aus dem Webentwickler-Untermenü von Firefox (oder im Werkzeuge-Menü, wenn die Menüleiste benutzt wird oder du auf Mac OS X arbeitest), oder indem man die Tastenkombination (das "Shortcut") Control-Shift-S (Command-Option-S auf Mac) auf der Tastatur drückt.

+ +

Die Toolbox erscheint am unteren Rand des Browserfensters. Als Standardeinstellung ist der Debugger aktiviert. So sieht sie aus, wenn sie zum ersten mal geöffnet wird:

+ +

+ +

Und das ist die Ansicht während des Debugging-Prozesses:

+ +

In dieser Anleitung werden wir uns zunächst kurz die Benutzeroberfläche des Debuggers ansehen und dann beschreiben, wie man einige häufig vorkommende Debuggingaufgaben durchführt.

+ +

Die Benutzeroberfläche des Debuggers

+ +

Die Benutzeroberfläche ("User Interface", UI) ist in vier Bereiche aufgeteilt, die wir uns nacheinander ansehen werden:

+ + + +

+ +

Die Quellcode-Dateiliste

+ +

Auf der linken Seite siehst du eine Liste mit allen JS-Quelldateien, die von der aktuellen Seite geladen wurden. Man kann jede davon auswählen, um sie zu debuggen.

+ +

Die Quelldateien sind unter Überschriften eingeordnet, die angeben, von wo sie geladen wurden. Hier ein Beispiel für eine Quellcode-Dateiliste, wenn eine Seite von developer.mozilla.org geladen ist:

+ +

+ +

Die Dateinamen und Domains stimmen überein mit den folgenden script-Tags im Quellcode der Seite:

+ +
<script src="/en-US/jsi18n/build:8987063"></script>
+<script src="https://login.persona.org/include.js" type="text/javascript"></script>
+<script src="//mozorg.cdn.mozilla.net/en-US/libs/jquery-1.7.1.min.js" type="text/javascript"></script>
+<script src="//mozorg.cdn.mozilla.net/en-US/tabzilla/tabzilla.js" async></script>
+ +

In der Quellcode-Dateiliste kann man einfach eine der Dateien anklicken, um sie im Quellcodebereich anzeigen und untersuchen zu können.

+ +

Haltepunkte ("Breakpoints"), die man durch Klick neben eine Codezeile gesetzt hat, erscheinen unter dem Dateinamen.Mit der Checkbox kann man Breakpoints an- und ausschalten. Durch Rechts-Klick auf einen Brakepoint-Eintrag in der Liste kann man ein Kontextmenü anzeigen lassen, mit dem man

+ + + +

Durch Klick auf den "Augapfel" kann man das Verdecken ("black boxing") für eine bestimmte Quelle an- und abschalten (z.B. Sprünge in JavaScript-Bibliotheken verhindern). Mehr Informationen dazu findest du unter "Black box a source".

+ +

Quellcodebereich

+ +

Hier wird die aktuell geladene JavaScript-Datei angezeigt. Haltepunkte ("Breakpoints", im Bild "Breakpoint Set") sind die blauen Kreise neben den Zeilennummern, während Haltepunkte, an der die Code-Ausführung aktuell gestoppt wurde, einen grünen Pfeil innerhalb des Kreises haben ("Breakpoint Hit"):

+ +

Im Quellcodebereich kann man über das Kontextmenü folgende Aufgaben erledigen:

+ + + +

Werkzeugleiste

+ +

Die Werkzeugleiste ("toolbar") besteht aus vier Teilen:

+ + + +

+ +

Die vier Buttons auf der linken Seite haben folgende Funktionen:

+ + + +

Die visuelle Darstellung des "Call stack" (Liste der Code-Unterbrechungen, an denen  eine Ebene tiefer in eine neue Funktion gesprungen wurde) zeigt die Liste aller Code-Stellen an denen Funktionsaufrufe zum aktuellen Breakpoint geführt haben. Über diese Liste kann man herausfinden, wie das Programm "an die aktuelle Stelle gekommen ist".

+ +

Durch Klick auf die Einträge wird im Quellcodebereich die Absprungstelle angezeigt und man kann nachvollziehen, von wo gesprungen wurde. Gleichzeitig werden in der Variablenliste die Variablenwerte zum Zeitpunkt des jeweiligen Funktionsaufrufs anzeigt. Oft lässt sich dadurch herausfinden, ob und warum Parameter falsch übergeben wurden und wo der eigentliche Fehler aufgetreten ist. Auch wenn Funktionen von verschiedenen Stellen im Code aufgerufen werden, lässt sich über den Stack herausfinden, um welchen Fall es sich handelt.

+ +

Skriptsuche

+ +

Mit der Skriptsuche ("script filter") kann man alle drei Debugger-Bereiche durchsuchen. Man kann dem Suchbegriff eines der folgenden Sonderzeichen voranstellen, um verschiedene Sonderfunktionen zu nutzen.

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrefixFunction
NichtsSkripte durchsuchen, die in der Quellcodeliste angezeigt werden.
!In sämtlichen Dateien nach dem Suchbegriff suchen.
@Nur nach Funktions-Definitionen in allen Dateien suchen, die den Begriff enthalten.
#Nur in der Datei, die aktuell im Quellcodebereich angezeigt wird, nach dem Begriff suchen.
:Zu einer Zeilennummer springen (in der aktuell im Quellcodebereich angezeigten Datei).
*Variablen durchsuchen, die in der Variablenliste angezeigt werden.
+ +

Diese Optionen werden in einem Popup angezeigt, wenn du in das Suchfeld klickst, und sie sind außerdem über das Kontextmenü im Quellcodebereich erreichbar. Die Sonderzeichen können auch kombiniert werden, um präzisere Suchen machen: "file.js:12" öffnet zum Beispiel file.js und springt in Zeile 12. "mod#onLoad" sucht in allen Dateien, die "mod" im Namen enthalten nach dem Begriff "onLoad". Mit der Return-/Enter-Taste kann von einem zum nächsten Ergebnis gesprungen werden.

+ +

Debugger-Einstellungen

+ +

Am rechten Ende der Werkzeugleiste befinden sich zwei weitere Buttons. Der erste schaltet zwischen Ein- und Ausblenden der Variablenliste hin und her. Mit dem zweiten kann man zwischen verschiedenen Debugger-Einstellungen umschalten:

+ +

With this option enabled, the debugger will automatically detect minified JS files and pretty-print them.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Auto Prettify Minified Sources

+ 		Ist diese Option eingeschaltet, findet der Debugger automatisch minimierte JavaScript-Dateien und stellt sie in lesbarer Form dar.
+

Pause bei Exceptions

+ 		Skriptausführung automatisch unterbrechen, wenn eine JavaScript-Exception geworfen wird.
Ignore caught exceptions +

Wenn diese Einstellung gesetzt ist (Voreinstellung) und "Pause bei Exceptions" aktiviert ist, wird nur noch bei Fehlern unterbrochen, die nicht mit try-catch abgefangen werden. Diese Einstellung ist Standard, weil man davon ausgehen kann, dass abgefangene Exceptions im Programm ordnungsgemäß behandelt werden.

+ +
+

Neue Option in Firefox 26.

+
+
Show panes on startupWenn diese Option aktiviert ist, wird die Variablenliste des Debuggers angezeigt, sobald der Debugger zum ersten mal aktiviert wird.
Show only enumerable propertiesEnabling this option adds a "Filter variables" search box to the variables panel, so that you can filter the displayed list of variables.
Show variables filter boxDo not display non-enumerable JavaScript properties
Show original sourcesEnabling this option will make the debugger use source maps, if they are available, to display the original source for code which has been combined, minified, or even compiled to JavaScript from a language like CoffeeScript.
+ +
+
+ +

Variablenliste

+ +

In der Variablenliste kann man sehen, welche Werte die Variablen an einer bestimmten Stelle im Programm gerade haben - und man kann sie sogar für Versuche manuell verändern und das Skript dann weiterlaufen lassen:

+ +

+ +

Variablenwerte beobachten

+ +

Die Variablen sind nach Geltungsbereich ("scope") gruppiert: im Funktions-Scope sieht man die (standardmäßig vorhandenen) Werte von arguments und this und lokale Variablen, die in der Funktion definiert wurden (im Beispiel: user und greeting).

+ +

Ähnlich verhält es sich mit globalen Variablen, die auf der obersten Ebene des JavaScript-Files (also nicht in Funktionen) definiert wurden - im Bild etwa greetme, aber auch standardmäßig vorhandene Variablen wie localStorage und console.

+ +

Objekte können mit dem kleinen Pfeil links von ihnen auf- und zugeklappt werden. Dadurch werden ihre Eigenschaften (und Funktionen) und deren Werte sichtbar.

+ +

Wenn man mit dem Cursor über die Variablen fährt, wird ein Tooltip mit weiteren Informationen angezeigt - bei Rollover über das greeting-Objekt wird zum Beispiel "configurable enumerable writable" angezeigt. Weitere Details zur Bedeutung dieser Eigenschaften unter Object.defineProperty().

+ +

Die angezeigten Variablen lassen sich filtern - entweder durch Nutzung des "*"-Modifiers in the Skriptsuche, oder durch Text-Eingabe des Filters (#,!,...) vor dem Suchbegriff im Suchfeld, wenn diese Option in den Debugger-Einstellungen aktiviert wurde.

+ +

Variablenwerte verändern

+ +

Variablenwerte können einfach manuell verändert werden, indem man auf die Werte klickt und einen anderen Wert eingibt. Wenn man etwa auf "Hi, Dr. Nick!" klickt, den Variablenwert von greeting, kann man die Begrüßung ändern und das Programm mit diesem Wert weiter arbeiten lassen.

+ +

Überwachungsausdrücke

+ +

Überwachungsausdrücke sind Ausdrücke, die jedesmal ausgewertet werden, wenn die Code-Ausführung gestoppt wird. Mit Hilfe von Überwachungsausdrücken kann man sich einen Überblick über Werte verschaffen, die nicht direkt in der Variablenliste angezeigt werden - wie etwa bestimmte Eigenschaften eines Objekts, die für das Verständnis des Codeablaufs gerade erforderlich sind (siehe Beispiel user.value im Bild). Oder Variablen im Code, die nicht mit var deklariert wurden und daher vom Debugger nicht in der Liste angezeigt werden - oder Werte, die nur mit einer getter-Methode ausgelesen werden können (wie etwa user.getValue("something")) oder jQuery-Ausdrücke wie $("div.myclass>table").

+ +

Einfach auf "Überwachungsausdruck hinzufügen" über der Variablenliste klicken ("Add watch expression") und einen Ausdruck genauso eingeben, wie man es im Code an der aktuellen Stelle machen würde, um einen Wert zu erhalten. Dieser Wert wird dann, während man durch den Code geht, bei jedem Programm-Stop berechnet und wie die Werte der Variablen in der Liste angezeigt.Auf diese Weise kann man beim Durchlaufen des Programmes dabei zusehen, wie bestimmte Werte sich ändern. In dem Moment, wo eine Veränderung stattfindet, wird der Überwachungsausdruck kurz gelb hinterlegt, so dass man die Änderungen auch aus dem Augenwinkel mitbekommt, während man den Programmcode liest.

+ +

Selbstverständlich kann man auch mehrere Ausdrücke gleichzeitig in der Liste überwachen. Um einen Ausdruck wieder zu entfernen, klickt man einfach auf das kleine "x", das rechts neben dem Überwachungsausdruck erscheint, wenn man mit dem Cursor darüber fährt.

+ +

Wie kann ich...?

+ +

den Debugger öffnen

+ +

Einfach im Webentwickler-Submenü "Debugger" auswählen (oder in der Firefox-Menüleiste unter "Werkzeuge > Webentwickler > Debugger" klicken, falls du Mac OS X nutzt oder die Menüleiste eingeblendet hast). Alternativ auch mit Control-Shift-S (bzw. Command-Option-S auf Mac).

+ +

eine Quelldatei finden

+ +

Quelldateien ("source files") sind leicht zu finden: Wenn der Debugger geöffnet ist, werden alle JavaScript Quelldateien ("source files") links in der Quellcodeliste aufgelistet. Wenn die Liste zu lang ist, ist es of einfacher, die Skriptsuche oben rechts zu benutzen.

+ +

Codestellen in einer Datei finden

+ +

Um eine Funktion zu finden, nach einem Stichwort zu suchen oder in eine bestimmte Zeile im Code zu sprichen, der im Quellcodebereich geöffnet ist, kann man die Spezialfilter der Skriptsuche verwenden.

+ +

Breakpoint setzen

+ +

Um einen Haltepunkt ("breakpoint") in einer Datei zu setzen, die im Quellcodebereich geöffnet ist:

+ + + +

Jeder Breakpoint wird an drei Stellen im Debugger angezeigt:

+ + + +

In dem Screenshot unten siehst du Breakpoints in den Zeilen 7 und 65 der JavaScript-Datei:

+ +

+ +

Einen bedingten Breakpoint setzen

+ +

Um einen bedingten Haltepunkt  ("conditional breakpoint") zu setzen, an dem nur in bestimmten Fällen unterbrochen werden soll, öffnet man in der betreffenden Zeile das Kontextmenü und wählt "Bedingten Haltepunkt hinzufügen" ("Add conditional breakpoint"). In dem Textfeld, das sich daraufhin öffnet, kann einfach ein Boolscher Ausdruck eingesetzt werden. Die Syntax ist genau die gleiche wie in der Klammer einer if-Anweisung:

+ +

Um die Haltebedingung ("condition") zu verändern oder einem "normalen" Breakpoint nachträglich eine Bedingung hinzuzufügen, kann einfach das Kontextmenü auf dem Breakpoint geöffnet werden und "Haltebedingung  hinzufügen" ("Configure conditional breakpoint") gewählt werden:

+ +

+ +

Breakpoint deaktivieren

+ +

Um einen Brakepoint außer Kraft zu setzen ("disable a breakpoint") ohne ihn zu löschen:

+ + + +

Dem Programmablauf folgen

+ +

Wenn die Ausführung des Codes an einem Breakpoint gestoppt wird, kannst du Schritt für Schritt die Abarbeitung Programmzeilen und einzelner Befehle folgen. Dazu verwendet man die vier Buttons (Pause/Weiter, Hineinspringen, Verlassen, Ausführen) oben links in der Werkzeugleiste ("toolbar"):

+ +

Die vier Buttons auf der linken Seite haben folgende Funktionen:

+ + + +

Source Maps

+ +

JavaScript-Quellcode wird oft aus mehreren Dateien zusammengefasst und das Ergebnis wird "minified" (komprimiert), um Serverbelastung und Ladezeiten zu optimieren. Immer häufiger ist das geladene JavaScript auch Maschinen-generiert, zum Beispiel aus Sprachen wie CoffeeScript.

+ +

Durch die Nutzung von source maps, kann der Debugger den gerade ausgeführten Code auf JS-Dateien "mappen", die für Menschen bequemer lesbar sind - also die entsprechenden Stellen in den Menschen-lesbaren Dateien anzeigen, was das Debuggen sehr erleichtert.

+ +

Dazu muss man dem Debugger mitteilen, dass es solche Source maps zum verwendeten Code gibt, indem man in den Debugger-Einstellungen (Zahnrad-Icon oben rechts) auf "Originalquellen anzeigen" klickt ("Show original sources"):Damit das funktioniert, muss man in der Quelldatei eine Mapping-URL in einem Kommentar angegeben haben, der dem Debugger sagt, wo sich die alternativen Dateien befinden. Ein solcher Kommentar in der JavaScript-Datei sollte folgendermaßen aussehen:

+ +

//@ sourceMappingURL=http://example.com/path/to/your/sourcemap.map

+ +

Variablenwerte prüfen

+ +

Wenn der Debugger an einem Haltepunkt ("breakpoint") die Programm-Ausführung unterbricht, kann man sich die aktuellen Werte der Variablen an dieser Stelle im Code ansehen. Sie werden rechts in der Variablenliste angezeigt:

+ +

Rechts befindet sich die Variablenliste. Die Variablen werden in Blöcken nach Geltungsbereichen ("scopes") gefiltert angezeigt. Obje können ausgeklappt werden, wenn man einzelne Eigenschaften sehen möchte (siehe Variablenwerte oben). Auch über ein "*" am Beginn des Skriptsuche-Eingabefelds ("filter expression") kann die Anzeige der Variablen gefiltert werden:

+ +

+ +

Variablen andere Werte zuweisen

+ +

Wenn die Ausführung des Codes an einem Breakpoint ("Haltepunkt") unterbrochen wurde, können die Werte in der Variablenanzeige des Debuggers verändert werden. Einfach auf den aktuellen Variablenwert klicken - der Wert wird zu einem Eingabefeld und kann sofort geändert werden:

+ +

Einen Ausdruck beobachten

+ +

Sie können den Wert eines Javascript-Ausdrucks mit der Funktion "Ausdruck beobachten" in der Variablenleiste beobachten.

+ +

Mobile Geräte debuggen

+ +

Das debuggen von mobilen Geräten wird in remote debugging behandelt.

+ +

Verstecken von Quelldateien ("Black boxing")

+ +

Viele Webseiten und Programme nutzen heute Frameworks wie jQuery, Ember oder Angular und zu 99% kann man einfach davon ausgehen, dass deren Code funktioniert. Die Interna dieser Bibliotheken wollen wir beim Debuggen meistens nicht sehen - wir verstecken sie und behandeln sie als Black box. Durch Black boxing entfällt das leidige Eintauchen in Bibliothek-Dateien (zum Beispiel bei each-Schleifen oder dem Auslösen von Events) und wir können uns auf unseren eigentlichen Code konzentrieren.

+ +
+
How to blackbox a source
+
+ +

Black boxing kann auch man für einzelne Dateien ein- und ausschalten, indem man auf das Breakpoint-Symbol ("eyeball": Augapfel) links neben der Quelldatei in der Liste klickt. Viele Quellen können auch versteckt werden, indem man in der Entwickler-Toolbar (Shift + F2) den blackbox-Befehl benutzt:

+ +

Wenn eine Code-Datei versteckt ist:

+ + + +

Browser-Add-Ons debuggen

+ +

Im Chrome Umfeld gibt es die folgenden Debug-Möglichkeiten:

+ +

chrome://browser/content/debugger.xul oder

+ +

in Version 23 beta, chrome://browser/content/devtools/debugger.xul:

+ + + +

Zugehörige Dateien:

+ + + +

Unglücklicherweise gibt es bis jetzt noch keine API um Ausdrücke im Debug-Bereich auszuwerten oder um Seitenelemente zu markieren die durch Variablen im Debug-Bereich referenziert werden. (Ist im Moment in Arbeit, siehe auch Bug-Meldung 653545.)

+ +

Siehe auch:

+ + diff --git a/files/de/tools/debugger/settings/index.html b/files/de/tools/debugger/settings/index.html new file mode 100644 index 0000000000..972e98ff9a --- /dev/null +++ b/files/de/tools/debugger/settings/index.html @@ -0,0 +1,57 @@ +--- +title: Settings +slug: Tools/Debugger/Settings +translation_of: Archive/Tools/Debugger_settings +--- +
{{ToolsSidebar}}

The Debugger has its own settings menu, which you can access from an icon in the toolbar:

+ +

Each setting is a simple on/off switch:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Auto Prettify Minified SourcesWith this option enabled, the debugger will automatically detect minified JS files and pretty-print them.
Pause on ExceptionsWhen this option is enabled, execution of the script will automatically pause whenever a JavaScript exception is thrown.
Ignore Caught Exceptions +

If this option is set (it is set by default) and "Pause on exceptions" is set, then execution will pause on an exception only if that exception is not caught.

+ +

This is usually the behavior you want. You don't generally want to pause execution when an exception that is thrown is caught, since that generally indicates that your program is handling it properly.

+
Show Panes on StartupWhen this option is enabled, the debugger's variables pane is visible when you first start the debugger.
Show Only Enumerable PropertiesDo not display non-enumerable JavaScript properties.
Show Variables Filter BoxEnabling this option adds a "Filter variables" search box to the variables pane, so that you can filter the displayed list of variables.
Show Original SourcesEnabling this option will make the debugger use source maps, if they are available, to display the original source for code which has been combined, minified, or even compiled to JavaScript from a language like CoffeeScript. Defaults to true.
Automatically Black Box Minified Sources +
+

New in Firefox 33.

+
+ +

Automatically black box sources whose URL ends with ".min.js". Defaults to true.

+
+ +

 

diff --git a/files/de/tools/debugger/source_map_errors/index.html b/files/de/tools/debugger/source_map_errors/index.html new file mode 100644 index 0000000000..b5c88af661 --- /dev/null +++ b/files/de/tools/debugger/source_map_errors/index.html @@ -0,0 +1,70 @@ +--- +title: Source map errors +slug: Tools/Debugger/Source_map_errors +tags: + - Debugger + - Debugging + - Dev Tools + - Reference + - Source maps + - Tools +translation_of: Tools/Debugger/Source_map_errors +--- +
{{ToolsSidebar}}
+ +

Source maps sind JSON files, die einen Weg bieten, transformierte Quellen, so wie sie vom Browser gesehen werden, mit Original Sourcen, so wie sie von einem Entwickler geschrieben wurden, in Einklang zu bringen. Manchmal erhält man Fehler, wenn man mit source maps arbeitet. Diese Seite erklärt die Probleme, die am häufigsten auftreten und wie man diese Probleme beheben kann.

+ +
+

Anmerkung: Wenn Sie mehr über das Thema source maps erfahren möchten, klicken Sie hier: How to use a source map.

+
+ +

Allgemeines source map error reporting

+ +

Wenn Sie ein Problem sehen, erscheint eine Meldung in der Webconsole. Diese Meldung enthält eine Fehlermeldung, die URL der Ressource und die URL der source map:

+ +

Error from invalid JSON

+ +

Hier wird uns mitgeteilt, dass bundle.js eine source map voraussetzt und die URL der source map sagt uns, wo die source-map-Daten zu finden sind (in diesem Fall relativ zur Ressoucre). Der Fehler teilt uns mit, dass die source map nicht im JSON-Format vorliegt - wir bieten also die falsche Datei an.

+ +

Source maps können in ein paar allgemeinen Fällen fehlerhaft sein; die folgenden Abschnitte beschrieben diese Fälle.

+ +

Source map nicht vorhanden oder nicht zugreifbar

+ +

Auf die source map Ressource kann nicht zugegriffen werden oder sie ist nicht vorhanden.

+ +

Source map file is missing

+ +

Die Lösung ist hier, sicherzustellen, dass auf die Datei zugegriffen werden kann.

+ +

Ungültige source map

+ +

Die Source Map Daten können ungültig sein — entweder, es ist überhaupt kein JSON file, oder es hat eine ungültige Struktur. Typische Fehlermeldungen sind hier:

+ + + +

Error: "version" is a required argument

+ +

Originale Quelle fehlt

+ +

Es kann sein, dass eine originale Quelle fehlt. Sie werden dies eventuell feststellen, wenn Sie versuchen, eine der Original Sourcen im Debugger zu öffnen. Die Meldung sieht in diesem Fall ein bisschen anders aus:

+ +

Debugger source tab showing the error

+ +

In diesem Fall wird die Meldung auch im Source Tab im Debugger angezeigt:

+ +

Debugger source tab showing the error

+ +

Netzwerkfehler beim Zugriff auf die Ressource

+ +

Ein Fehler in Firefox verhindert, dass die Source map für web extensions geladen wird.

+ +

Details dazu finden Sie hier: Bug 1437937: WebExtensions Doesn't Find Source Maps.

+ +
Source-Map-Fehler: TypeError: NetworkError when attempting to fetch resource.
+ Ressourcen-Adresse: moz-extension://c7f0f003-4fcf-49fd-8ec0-c49361266581/background.js
+ Source-Map-Adresse: background.js.map
+ +

Der einzige Weg, dies zu umgehen, besteht darin, die URL manuell auf eine öffentliche Adresse (http://localhost:1234/file.map.js) zu ändern und einen lokalen Webserver auf diesem Port zu starten.

diff --git a/files/de/tools/firefox_os_1.1_simulator/index.html b/files/de/tools/firefox_os_1.1_simulator/index.html new file mode 100644 index 0000000000..ec2bafe6ee --- /dev/null +++ b/files/de/tools/firefox_os_1.1_simulator/index.html @@ -0,0 +1,352 @@ +--- +title: Firefox OS 1.1 Simulator +slug: Tools/Firefox_OS_1.1_Simulator +translation_of: Tools/Firefox_OS_1.1_Simulator +--- +
{{ToolsSidebar}}
+
+
+

Diese Seite beschreibt den "alten" Firefox OS Simulator. Dieser sollte nur verwendet werden, falls man Apps für Firefox 1.1 entwickelt und er kann daher auch nur auf Firefox 24 oder Firefox 25 installiert werden.

+ +

Wenn man Apps für Firefox OS 1.2 oder später entwickelt, muß stattdessen der App Manager verwendet werden.

+ +

Falls Hilfe benötigt wird, kann man in der dev-developer-tools mailing list oder bei #devtools auf irc.mozilla.org nachfragen.

+
+ +

Die Firefox OS Simulator-Erweiterung ist ein Werkzeug, welches es ermöglicht, eigene Firefox OS Apps auf dem Desktop zu testen und zu debuggen. Der Code-Test-Debug-Zyklus ist sehr viel schneller mit dem Simulator als mit dem echten Gerät und dieses braucht man dafür natürlich dann auch nicht.

+ +

Im Wesentlichen enthält die Simulator-Erweiterung:

+ +
    +
  • den Simulator: dieser beinhaltet den Firefox OS Desktop Client, welcher eine Version der höheren Schichten des Firefox OS ist, das auf dem Desktop läuft. Der Simulator enthält auch einige zusätzliche Features in der Emulation, die in den Standard Firefox OS Desktop Builds nicht enthalten sind.
    • +
  • das Dashboard: ein Werkzeug, welches durch den Firefox-Browser gehostet wird und Start und Stop des Simulators ermöglicht, sowie das Installieren, Deinstallieren und Debuggen von Apps, die darin laufen. Das Dashboard hilft ebenfalls, die Apps auf ein reales Gerät zu übetragen und überprüft die App-Manifests auf die geläufigsten Probleme.
    • +
+ +

Der Screenshot im Folgenden zeigt eine Debugging-Sitzung unter Verwendung des Simulators.

+ +

Das Dashboard ist oben rechts innerhalb eines Firefox-Tabs. Wir haben eine App hinzugefügt, eine "Packaged App", die wir "Wo bin ich? (Where am I?)" genannt haben. Links oben läuft die App im Simulator. Wir haben ebenfalls die Debugger-Werkzeuge eingebunden, die im Panel weiter unten sind. Man kann sehen, daß das Konsolenfeld Meldungen über die App anzeigt.

+ +

+ +

Dieses Handbuch behandelt folgende Themen:

+ + + +
For a practical walkthrough that shows how to use the Simulator to debug a real web app, see the Simulator Walkthrough page.
+ +

Die Simulator-Erweiterung installieren

+ +

Der Simulator kommt als Firefox Erweiterung. So wird er insatlliert:

+ +
    +
  1. Besuche mit Firefox die folgende Seite: Simulator's page on addons.mozilla.org.
    2. +
  2. Klicke "Add to Firefox".
    3. +
  3. Nach dem Download wirst Du aufgefordert, es zu installieren: Klicke "Install Now".
    4. +
+ +

Aufgrund der Größe der Erweiertung kann Firefox für einige Sekunden einfrieren. Falls ein Dialog mit der Warnung: "Unresponsive script" erscheint, klicke "Continue" um die Installation vollständig auszuführen. Das sollte aber nicht mit Firefox ab Version 27 passieren.
+
+ Firefox wird nach der Installation regelmäßig nach Aktualisierungen des Simulators suchen und diese automatisch installieren.

+ +

Das Dashboard des Simulators öffnet sich bei der Insatllation automatisch, und Du kannst es jederzeit erneut öffnen im "Firefox" Menü (oder dem "Extras" Menü unter OS X und Linux), dann "Web-Entwickler", dann "Firefox OS Simulator":

+ +


+ Das Dashboard ist das Werkzeug, mit dem Du Deine App dem Simularot hinzufügst und laufen lässt. So sieht es aus:

+ +

Adding, removing and refreshing apps

+ +

Adding apps

+ +

To add a packaged app to the Simulator, open the Dashboard, click "Add Directory" and select the manifest file for your app.
+
+ To add a hosted app, enter a URL in the textbox where it says "URL for page or manifest.webapp", then click "Add URL". If the URL points to a manifest, then that manifest will be used. If it doesn't, the Dashboard will generate a manifest for the URL: so you can add any website as an app just by entering its URL.
+
+ When you add an app, the Dashboard will run a series of tests on your manifest file, checking for common problems. See the section on Manifest Validation for details on what tests are run.

+ +

The Dashboard will then automatically run your app in the Simulator unless the Manifest Validation Process discovers an error in your app.

+ +

Managing apps

+ +

Once you have added an app, it will appear in the Manager's list of installed apps:
+
+ Each entry gives us the following information about the app:

+ +
    +
  • its name, taken from the manifest
    • +
  • its type, which will be one of "Packaged", "Hosted", or "Generated"
    • +
  • a link to its manifest file
    • +
  • the result of manifest validation
    • +
+ +

It also gives us four commands:

+ +
    +
  • "Refresh": use this to update and reload the app in the Simulator after you have made changes to it. This also makes the Dashboard validate the manifest again. If you make changes to your app they will not be reflected automatically in the installed app: you will need to refresh the app to apply the changes.
    • +
  • "Connect": use this to connect developer tools to the selected app. The Dashboard will start the Simulator and app if they aren't already running.
    • +
  • "Remove" ("X"): use this to remove the app from the Simulator and the Dashboard. You can undo this action as long as the Dashboard tab is open.
    • +
  • "Receipt": use this to test receipt verification for paid apps. After you select a type of receipt to test, the app will be reinstalled with a test receipt of the given type.
    • +
+ +
+

Refresh App from the Simulator window: you can update and reload an app directly from the Simulator window using the menubar action or its associated shortcut while the app is running.

+
+ +

Manifest validation

+ +

When you supply a manifest, the Manager will run some validation tests on it. It reports three categories of problems:

+ +
    +
  • manifest errors: problems that will prevent your app from installing or running
    • +
  • manifest warnings: problems that may prevent your app from working properly
    • +
  • simulator-specific warnings: features your app is using that the Simulator doesn't yet support
    • +
+ +

It summarises the problems encountered in the entry for the app: clicking on the summary provides more details.

+ +

Manifest errors

+ +

The Dashboard will report the following conditions as errors, meaning that you won't be able to run your app in the Simulator without fixing them:

+ +
    +
  • the manifest does not include the mandatory "name" field
    • +
  • the manifest is not valid JSON
    • +
  • the app is a hosted app, but the type field in its manifest is "privileged" or "certified", which are only available to packaged apps
    • +
  • common appCache errors (packaged apps can't use appCache, requests to the manifest URL return an HTTP redirect or an HTTP error status)
    • +
+ +

Here's the result of trying to add a manifest file with a missing "name":
+

+ +

Manifest warnings

+ +

The Dashboard will report the following manifest issues as warnings:

+ +
    +
  • missing icons
    • +
  • the icon is less than 128 pixels: all apps submitted to the Marketplace must have at least one icon that is at least 128 pixels square
    • +
  • the type field is unrecognized
    • +
  • the manifest requests a permission that is unrecognized
    • +
  • the manifest requests a permission which will be denied
    • +
  • the manifest requests a permission for which access could not be determined
    • +
+ +

Simulator-specific warnings

+ +

Finally, the Manager will emit warnings for apps that use features of Firefox OS not yet fully supported by the Simulator:

+ +
    +
  • the type field is "certified", but the Simulator does not yet fully support certified apps
    • +
  • the manifest requests a permission to use an API that is not yet supported by the Simulator
    • +
+ +

Running the Simulator

+ +

There are two different ways the Simulator may be started:

+ +
    +
  • if you add an app or click the "Refresh" or "Connect" button next to your app's entry, the Dashboard will automatically run your app in the Simulator
    • +
  • if you click the button labeled "Stopped" on the left-hand side of the Dashboard, the Simulator will boot to the Home screen and you'll need to navigate to your app
    • +
+ +

Either way, once the Simulator is running, the button labeled "Stopped" turns green and the label changes to "Running". To stop the Simulator, click this button again.
+
+ The Simulator appears as a separate window, sized so the simulated screen area is 320x480 pixels, with a toolbar at the bottom and a menubar at the top that contains some extra features:

+ +

+ +

To simulate touch events you can click the mouse button and drag while holding the button down. So by clicking and dragging right-to-left from the Home Screen, you'll see the built-in apps, as well as any apps you have added:

+ +

+ +

Simulator toolbar

+ +

In the bottom toolbar, from left to right, these are the Home button, the Screen Rotation button, and the Geolocation button.

+ +
    +
  • the Home button takes you to the Home screen (or to the task list if you keep it pressed for a couple of seconds)
    • +
  • the Screen Rotation button switches the device between portrait and landscape orientation. This will generate the orientationchange event.
    • +
  • the Geolocation button triggers a dialog asking you to share your geographic location, either using your current coordinates or supplying custom coordinates: this will be made available to your app via the Geolocation API.
    • +
+ +

+ +

Simulator menubar

+ +

In the top menubar, you can access some useful commands to make development more efficient:

+ +

+ +
    +
  • File -> Quit (Ctrl/Cmd - Q): shut down the Simulator
    • +
  • App -> Refresh (Ctrl/Cmd - R): refresh the running app
    • +
+ +

The keyboard shortcut for the "App Refresh" command makes it possible to iteratively develop an app much like a web page:

+ +
    +
  • make a change to the code (and rerun your build tool if needed, e.g. volo / yeoman / grunt)
    • +
  • type the keyboard shortcut to refresh the app running in the Simulator
    • +
+ +
+

"Refresh App and Clear Data" hidden shortcut: sometimes it's useful to clear data that the Simulator has stored for an app, so the Simulator contains a hidden shortcut, Shift - Ctrl/Cmd - R, that will refresh the running app while clearing the following data:

+ +
    +
  • +

    localStorage / sessionStorage

    +
    • +
  • +

    cookies

    +
    • +
  • +

    indexedDB

    +
    • +
  • +

    appCache

    +
    • +
+
+ +

Attaching developer tools

+ +

You can attach developer tools to the Simulator, to help debug your app. At the moment you can only attach the JavaScript Debugger, the Web Console, the Style Editor, the Profiler and the Network Monitor, but we're working on adding support for more developer tools.

+ +
+

Some of these tools are only available in Beta, Aurora, or Nightly builds of Firefox.

+
+ +

To attach developer tools to the Simulator, click the "Connect" button for an app:

+ +

+ +

The Dashboard will then open a developer toolbox pane at the bottom of the Dashboard tab and connect it to the app:

+ +

+ +

Web Console

+ +

The app can log to this console using the global console object, and it displays various other messages generated by the app: network requests, CSS and JS warnings/errors, and security errors. (Learn more about the Web Console.)

+ +

Debugger

+ +

Using the Debugger, you can step through JavaScript code that is running in the connected app, manage breakpoints, and watch expressions to track down errors and problems faster. (Learn more about the Debugger.)

+ +

Style Editor

+ +

You can view and edit CSS files referenced in the app using the connected Style Editor. Your changes will be applied to the app in real time, without needing to refresh the app. (Learn more about the Style Editor.)

+ +

Profiler

+ +

Using the Profiler tool connected to the app, you can to find out where your JavaScript code is spending too much time. The Profiler periodically samples the current JavaScript call stack and compiles statistics about the samples. (Learn more about the Profiler.)

+ +

Network Monitor

+ +

Thanks to the new Network Monitor, you can analyze the status, headers, content and timing of all the network requests initiated by the app through a friendly interface. (Learn more about the Network Monitor.)

+ +

Receipts

+ +

If you are developing a paid app, you should test your receipt validation code (e.g. the code that verifies that a user has already purchased the app or has been issued a refund and then informs the user and locks or unlocks app features accordingly) on a valid (cryptographically signed) receipt.

+ +

Thanks to the "Receipts" menu in each app entry on the Simulator Dashboard, you can install an app with a "Valid", "Invalid", or "Refunded" test receipt. Simply select the type of receipt you wish to test, and the Dashboard will retrieve a test receipt of that type from the Marketplace receipt service and reinstall the app with that receipt in the Simulator:

+ +

+ +

Push to device

+ +

If you have a Firefox OS device you can connect it to the Simulator, and can then push apps from the Dashboard to the device.

+ +

Connecting a device

+ +

To connect the device, follow the instructions in the guide to connecting a Firefox OS device to the desktop. Note that you don't have to install ADB, as the Simulator add-on includes it already.

+ +

Pushing apps to the device

+ +

Once you've set up the device and desktop, and connected the device to your desktop via USB, you'll see the note "Device connected" appear on the left of the Dashboard, and a new command appear in the entry for each app labeled "Push":

+ +

+ +

Click "Push", and the app will be installed on the Firefox OS device.

+ +
+

Manual Steps:

+ +
    +
  • +

    Once you’ve pushed the app to the device, you need to manually close and restart it again, to get updated content

    +
    • +
  • +

    If you update anything in the manifest (e.g. app name, orientation, type, permissions), you need to reboot the operating system for those changes to have effect

    +
    • +
+
+ +

Firefox OS Device Connection Confirmation

+ +

On every device reboot, the first "Push" request needs to be confirmed on the device:

+ +

+ +

Troubleshooting on Linux

+ +

If you are unable to connect your device after creating udev rules, please see this bug.

+ +

Limitations of the Simulator

+ +

Note that the Firefox OS Simulator isn't a perfect simulation.

+ +

Hardware limitations

+ +

Apart from screen size, the Simulator does not simulate the hardware limitations of a Firefox OS device such as available memory or CPU speed.

+ +

Audio/video codecs

+ +

The following codecs depend on hardware-accelerated decoding and are therefore not yet supported:

+ +
    +
  • MP3
    • +
  • AAC
    • +
  • H.264 (MP4)
    • +
  • WebM
    • +
+ +

This means it isn't possible to use the Simulator to test video playback in apps and on websites like Youtube that rely on these codecs.

+ +

Unsupported APIs

+ +

Certain APIs that work on the device won't work on the Simulator, generally because the supporting hardware is not available on the desktop. We've implemented simulations for some APIs such as geolocation, and expect to add more in future releases. However, at the moment the following APIs are not supported. Using them might throw errors or just return incorrect results:

+ + + +

Getting help

+ +

If you have a question, try asking us on the dev-developer-tools mailing list or on #devtools on irc.mozilla.org.

+ +

How to enable verbose logging

+ +

Use about:config to create the preference extensions.r2d2b2g@mozilla.org.sdk.console.logLevel, set it to the integer value 0, and disable/reenable the addon. Additional messages about the Simulator's operation will appear in the Error Console (or Browser Console in newer versions of Firefox).

+
+
+ +
+

 

+
+ +

 

diff --git a/files/de/tools/index.html b/files/de/tools/index.html new file mode 100644 index 0000000000..4daa07374a --- /dev/null +++ b/files/de/tools/index.html @@ -0,0 +1,149 @@ +--- +title: Firefox Tools für Webentwickler +slug: Tools +tags: + - Entwickler + - Tools + - Webentwicklung +translation_of: Tools +--- +
{{ToolsSidebar}}
+ +
Untersuchen, bearbeiten und debuggen von HTML, CSS und JavaScript für Desktop- und Mobilseiten
+ +
+
+

Falls Sie auf der Suche nach Informationen sind, wie man die Developer Tools von Firefox verwendet, sind Sie hier richtig – diese Seite stellt Links zu detaillierten Informationen über alle Kern-Werkzeuge und zusätzlichen Werkzeuge bereit, sowie zu weiteren Informationen, zum Beispiel wie man sich mit Firefox für Android verbindet und es debugged, wie man die Developer Tools erweitert, und wie man den Browser als Ganzes debugged.

+ +

Bitte erkunden Sie die Links in der Seitenleiste und weiter unten auf der Seite. Falls Sie Feedback oder Fragen zu den Developer Tools haben, schicken Sie uns Nachrichten auf unserer Mailingliste oder unserem IRC-Kanal (siehe die Community-Links am unteren Ende der Seite). Falls Sie hingegen Feedback oder Fragen zur Dokumentation haben, ist die MDN Discourse-Seite ein guter Ort dafür.

+ +

Entwerfen

+ +

Werkzeuge zum Erstellen von Webseiten und Web Apps.

+ +
+
JavaScript-Umgebung
+
Ein Texteditor innerhalb Firefox zum Schreiben und Ausführen von JavaScript.
+
Stilbearbeitung
+
Betrachten und bearbeiten von CSS-Styles der aktuellen Seite.
+
Shader Bearbeitung
+
Ansehen und bearbeiten der WebGL Vertex/Fragment Shaders.
+
+
+ +
+

Untersuchen und Debuggen

+ +

Untersuchen, optimieren, entdecken und debuggen von Webseiten und Web Apps.

+ +
+
Web-Konsole
+
Log-Nachrichten einer Webseite anschauen und mittels JavaScript mit der Seite interagieren.
+
Inspektor
+
HTML und CSS einer Seite anschauen und verändern.
+
JavaScript Debugger
+
JavaScript einer Seite stoppen, schrittweise laufen lassen, untersuchen und verändern.
+
Netzwerkanalyse
+
Netzwerkanfragen beim Laden der Seite untersuchen.
+
Developer Toolbar
+
Eine Kommandozeile für die Entwickler-Werkzeuge.
+
3D-Untersuchung
+
3D-Visualisierung der Seite und deren Aufbau. Ganz einfach und übersichtlich.
+
+
+
+ +
+
+
+

Mobilgeräte

+ +

Hilfreiche und leistungsstarke Werkzeuge für die Entwicklung mit Mobilgeräten.

+ +
+
App-Manager
+
Designen und entwickeln von großartigen Apps für Firefox OS.
+
Firefox OS Simulator
+
Starten und debuggen Sie Ihre Firefox OS App auf dem Desktop, ohne ein echtes Firefox OS Handy zu benötigen. Dies spart Ihnen viel Zeit beim Entwickeln.
+
Reaktives Design
+
Sehen Sie sich an, wie Ihre Webseite oder App in verschiedenen Browser-Größen dargestellt wird, ohne dass Sie die Größe Ihres Browser-Fensters verändern müssen.
+
Firefox auf Android debuggen
+
Verbinden Sie die Entwickler-Werkzeuge mit Firefox auf dem Android-Handy.
+
+
+ +
+

Performance

+ +

Finden und beheben von Geschwindigkeitsproblemen.

+ +
+
JavaScript Profiler
+
Finden Sie heraus, wo JavaScript Zeit benötigt, um den Code auszuführen. Optimieren Sie so Ihre Scripte.
+
Paint Flashing Tool
+
Hebt die neu gezeichneten Flächen einer Seite hervor.
+
Reflow Event Logging
+
Untersuchen von Reflow-Ereignissen in der Web-Konsole.
+
Laufzeitanalyse
+
Untersuchen, wie lange Teile der Seite zum Laden brauchen.
+
+
+
+ +
+
+
+

Den Browser debuggen

+ +

Normalerweise werden die Entwickler-Werkzeuge für Webseiten oder Web Apps verwendet. Es gibt aber auch die Möglichkeit, den Browser als Ganzes zu untersuchen und zu debuggen. Das kann zum Beispiel für die Entwicklung des Browsers selbst oder von Add-ons nützlich sein.

+ +
+
Browser Konsole
+
Sehen Sie sich die Log-Nachrichten des Browsers selbst und von Add-ons an und führen Sie JavaScript-Code im Kontext des Browsers aus.
+
Browser Toolbox
+
Verbinden der Entwickler-Werkzeuge mit dem Browser.
+
+
+ +
+

Die Entwickler-Werkzeuge erweitern

+ +

Die Entwickler-Werkzeuge sind so gebaut, dass es möglich ist, diese zu erweitern. Firefox Add-ons haben Zugriff auf die Entwickler-Werkzeuge und auf Komponenten zum Ausbau bestehender Tools sowie zum Hinzufügen neuer Tools. Mit dem Remote Debugging Protokoll ist es möglich, eigene Debugging-Clients und -Server zu entwickeln, um somit Webseiten mit den eigenen Tools zu debuggen.

+ +
+
Remote Debugging Protokoll
+
Protokoll zur Verbindung der Entwickler-Werkzeuge mit einem Debugging-Ziel, wie zum Beispiel einer Instanz von Firefox oder einem Firefox OS.
+
Source Editor
+
Ein eingebauter Code-Editor in Firefox, welcher in Ihr Add-on eingebunden werden kann.
+
+
+
+ +
+

Siehe auch

+ +

Dieser Bereich stellt einige Ressourcen bereit, die nicht vom Mozilla Developer Tools Team zur Verfügung gestellt, von Webentwicklern jedoch viel genutzt werden. Es sind nur einige Firefox-Add-ons aufgelistet, eine komplette Liste befindet sich in der Kategorie "Webentwicklung" auf addons.mozilla.org.

+ +
+
+
+
Firebug
+
Ein sehr bekanntes und mächtiges Werkzeug für Webentwickler mit einem JavaScript-Debugger, HTML und CSS Inspektor und Editor sowie einer Netzwerkanalyse.
+
DOM Inspector
+
Untersuchen und bearbeiten des DOM von Webseiten oder XUL-Fenstern.
+
Web Developer
+
Fügt ein Menü und eine Symbolleiste mit verschiedenen Entwickler-Werkzeugen zum Browser hinzu.
+
+
+ +
+
+
Webmaker Tools
+
Eine Reihe von Tools für Anfänger im Bereich der Webentwicklung.
+
W3C Validators
+
Das W3C stellt einige Tools zur Überprüfung des Webseitencodes bereit. Zum Beispiel Gültigkeitsprüfungen für HTML und CSS.
+
JSHint
+
Analysiert JavaScript-Code.
+
+
+
diff --git a/files/de/tools/index/index.html b/files/de/tools/index/index.html new file mode 100644 index 0000000000..7505b123b1 --- /dev/null +++ b/files/de/tools/index/index.html @@ -0,0 +1,9 @@ +--- +title: Index +slug: Tools/Index +tags: + - Index + - Tools +translation_of: Tools/Index +--- +
{{ToolsSidebar}}

{{Index("/de/docs/Tools")}}

diff --git a/files/de/tools/json_viewer/index.html b/files/de/tools/json_viewer/index.html new file mode 100644 index 0000000000..ed3cda58c2 --- /dev/null +++ b/files/de/tools/json_viewer/index.html @@ -0,0 +1,26 @@ +--- +title: JSON Viewer +slug: Tools/JSON_viewer +tags: + - Tools +translation_of: Tools/JSON_viewer +--- +
{{ToolsSidebar}}
+ +
+

Der JSON-Viewer is neu in Firefox 44.

+ +

Vor Firefox 53 ist der JSON-Viewer standardmäßig nur in der Firefox Developer Edition und Firefox Nightly aktiviert. Um diese Funktion in anderen Release-Kanälen zu aktivieren, setzen Sie die Einstellung  devtools.jsonview.enabled auf true.

+ +

Ab Firefox 53 ist der JSON-Viewer auch in der Beta und der normalen Release-Version von Firefox standardmäßig aktiviert.

+
+ +

Firefox enthält einen JSON-Viewer. Wenn Sie eine JSON-Datei im Browser öffnen, oder eine Remote-URL mit dem Content-Type application/json aufrufen, wird sie analysiert und die Syntax hervorgehoben. Arrays und Objekte können über das Pfeilsymbol erweitert oder reduziert werden.

+ +

{{EmbedYouTube("ktFcevMwYXw")}}

+ +

Der JSON-Viewer bietet ein Suchfeld, mit dem Sie den Inhalt der JSON-Ausgabe filtern können.

+ +

Sie können auch die Rohdaten der JSON-Antwort anzeigen lassen und diese einheitlich formatieren.

+ +

Wenn das Dokument das Ergebnis einer Netzwerkanforderung war, zeigt der Viewer außerdem die Anforderungs- und Antwortheader an.

diff --git a/files/de/tools/keyboard_shortcuts/index.html b/files/de/tools/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..fb9fd61b10 --- /dev/null +++ b/files/de/tools/keyboard_shortcuts/index.html @@ -0,0 +1,847 @@ +--- +title: Tastaturkürzel +slug: Tools/Keyboard_shortcuts +tags: + - Tools +translation_of: Tools/Keyboard_shortcuts +--- +
{{ToolsSidebar}}
+ +

Auf dieser Seite sind alle Tastaturkürzel der in Firefox integrierten Entwicklerwerkzeuge aufgeführt.

+ +

Im ersten Abschnitt befinden sich die Tastaturkürzel, mit denen die einzelnen Werkzeuge geöffnet werden. Im zweiten Abschnitt befinden sich die Tastaturkützel, die im Werkzeugkasten Verwendung finden. Anschließend folgt je ein Abschnitt pro Werkzeug, der die Tastaturkürzel auflistet, die im jeweiligen Werkzeug verwendet werden können.

+ +

Da Access-Keys von der Sprachversion abhängen, werden sie auf dieser Seite nicht dokumentiert.

+ +

Öffnen und Schließen von Werkzeugen

+ +

Diese Tastaturkürzel funktionieren im Browser-Hauptfenster und öffnen das entsprechende Werkzeug. Bei Werkzeugen im Werkzeugkasten schließen sie das Werkzeug, wenn es aktiv ist. Bei Werkzeugen wie der Browser-Konsole, die ein neues Fenster öffnen, müssen Sie das Fenster schließen, um das Werkzeug zu schließen.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
Öffne Werkzeugkasten (öffnet sich mit zuletzt aktiviertem Werkzeug)Strg + Umschalt + IBefehlstaste + Wahltaste + IStrg + Umschalt + I
Öffne Web-Konsole1Strg + Umschalt + KBefehlstaste + Wahltaste + KStrg + Umschalt + K
Schalte Inspektor ein oder ausStrg + Umschalt + CBefehlstaste + Wahltaste + CStrg + Umschalt + C
Öffne DebuggerStrg + Umschalt + SBefehlstaste + Wahltaste + SStrg + Umschalt + S
Öffne StilbearbeitungUmschalt + F7Umschalt + F51Umschalt + F5
Öffne LaufzeitanalyseUmschalt + F5Umschalt + F51Umschalt + F5
Öffne NetzwerkanalyseStrg + Umschalt + EBefehlstaste + Wahltaste + EStrg + Umschalt + E
Entwickler-Symbolleiste (an- und ausschalten)Umschalt + F2Umschalt + F21Umschalt + F2
Bildschirmgrößen testen (an- und ausschalten)Strg + Umschalt + MBefehlstaste + Wahltaste + MStrg + Umschalt + M
Öffne Browser-Konsole2Strg + Umschalt + JBefehlstaste + Umschalt + JStrg + Umschalt + J
Öffne Browser-Werkzeugkasten (neu in Firefox 39)Strg + Alt + Umschalt + IBefehlstaste + Opt + Umschalt + IStrg + Alt + Umschalt + I
Öffne JavaScript-UmgebungUmschalt + F4Umschalt + F4Umschalt + F4
Öffne Entwickler-Umgebung (WebIDE)Umschalt + F8Umschalt + F8Umschalt + F8
Öffne Speicher-Inspektor3Umschalt + F9Umschalt + F9Umschalt + F9
+ +

1. Im Gegensatz zu den anderen Werkzeugen im Werkzeugkasten, kann dieses Kürzel nicht auch zum Schliessen der Web-Konsole verwendet werden. Das Kürzel fokussiert die Kommandozeile innerhalb der Web-Konsole. Um die Web-Konsole zu schliessen, verwenden Sie das globale Werkzeugkasten-Tastaturkürzel Strg + Umschalt + I (Befehlstaste + Wahltaste + I auf Mac)

+ +

2. Vor Firefox 38 wird die Browser Konsole von dieser Tasten-Kombination geschlossen, wenn sie von einem Firefox Fenster verdeckt ist. Beginnend mit Firefox 38 wird eine verdeckte Browser Konsole in den Vordergrund gebracht und fokussiert.

+ +

3. Das Werkzeug ist in der Voreinstellung nicht freigeschaltet. Die Tasten-Kombination funktioniert also erst, sobald es unter Einstellungen angewählt wird.

+ +

Werkzeugkasten

+ +
+

Diese Tastaturkürzel funktionieren immer wenn der Werkzeugkasten geöffnet ist, egal welches Werkzeug aktiv ist.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
Von links nach rechts durch die Werkzeuge blätternStrg + ]Befehlstaste + ]Strg + ]
Von rechts nach links durch die Werkzeuge blätternStrg + [Befehlstaste + [Strg + [
Einstellungen der Entwicklerwerkzeuge anzeigenStrg + Umschalt + OBefehlstaste + Umschalt + OStrg + Umschalt + O
+
+ +
+

Diese Tastaturkürzel funktionieren bei allen Werkzeugen, die sich im Werkzeugkasten befinden.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
Schrift vergrößernStrg + +Befehlstaste + +Strg + +
Schrift verkleinernStrg + -Befehlstaste + -Strg + -
Schriftgröße zurücksetzenStrg + 0Befehlstaste + 0Strg + 0
+
+ +

Quelltext-Editor

+ +
+

In dieser Tabelle befinden sich die Standardtastaturkürzel für den Quelltext-Editor.

+ +

Ab Firefox 29 können stattdessen Vim- oder Emacs-Tastaturkürzel verwendet werden. Um diese auszuwählen, öffnen Sie about:config, wählen Sie die Einstellung devtools.editor.keymap und weisen Sie ihr den Wert „vim“ oder „emacs“ zu. Wenn Sie dies tun, werden die ausgewählten Tastaturkürzel für alle Entwicklerwerkzeuge verwendet, die den Quelltext-Editor nutzen.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
Zu Zeile springenStrg + JBefehlstaste + JStrg + J
In Datei suchenStrg + FBefehlstaste + FStrg + F
WeitersuchenStrg + GBefehlstaste + GStrg + G
Alle auswählenStrg + ABefehlstaste + AStrg + A
AusschneidenStrg + XBefehlstaste + XStrg + X
KopierenStrg + CBefehlstaste + CStrg + C
EinfügenStrg + VBefehlstaste + VStrg + V
RückgängigStrg + ZBefehlstaste + ZStrg + Z
WiederholenStrg + Umschalt + Z / Strg + YBefehlstaste + Umschalt + Z / Befehlstaste + YStrg + Umschalt + Z / Strg + Y
EinrückenTabTabTab
Einrücken rückgängig machenUmschalt + TabUmschalt + TabUmschalt + Tab
Zeile(n) nach oben verschiebenAlt + Pfeil obenAlt + Pfeil obenAlt + Pfeil oben
Zeile(n) nach unten verschiebenAlt + Pfeil untenAlt + Pfeil untenAlt + Pfeil unten
Zeile(n) auskommentieren/nicht mehr auskommenrierenStrg + /Befehlstaste + /Strg + /
+
+ +

Seiteninspektor

+ +
+ + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
Inspektor öffnenStrg + Umschalt + CBefehlstaste + Wahltaste + CStrg + Umschalt + C
+ +

HTML-Bereich

+ +

Diese Tastaturkürzel funktionieren im HTML-Bereich des Inspektors.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
Ausgewählten Knoten löschenLöschenLöschenLöschen
Löschen eines Knotens rückgängig machenStrg + ZBefehlstaste + ZStrg + Z
Löschen eines Knotens wiederholenStrg + Umschalt + Z / Strg + YBefehlstaste + Umschalt + Z / Befehlstaste + YStrg + Umschalt + Z / Strg + Y
Zum nächsten Knoten springen (nur aufgeklappte Knoten)Pfeil untenPfeil untenPfeil unten
Zum vorherigen Knoten springenPfeil obenPfeil obenPfeil oben
Aktuellen Knoten aufklappenPfeil rechtsPfeil rechtsPfeil rechts
Aktuellen Knoten einklappenPfeil linksPfeil linksPfeil links
Durch Attribute eines Knotens nach vorne blätternTabTabTab
Durch Attribute eines Knotens nach hinten blätternUmschalt + TabUmschalt + TabUmschalt + Tab
Ausgewähltes Attribut bearbeitenEingabetasteEingabetasteEingabetaste
Ausgewählten Knoten ein-/ausblendenHHH
Suchleiste im HTML-Bereich auswählenStrg + FBefehlstaste + FStrg + F
Als HTML bearbeitenF2F2F2
+ +

CSS-Bereich

+ +

Diese Tastaturkürzel funktionieren im CSS-Bereich des Inspektors.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
Durch Eigenschaften und Werte nach vorne blätternTabTabTab
Durch Eigenschaften und Werte nach hinten blätternUmschalt + TabUmschalt + TabUmschalt + Tab
Ausgewählten Wert um eins erhöhenPfeil obenPfeil obenPfeil oben
Ausgewählten Wert um eins vermindernPfeil untenPfeil untenPfeil unten
Ausgewählten Wert um 10 erhöhenUmschalt + Pfeil obenUmschalt + Pfeil obenUmschalt + Pfeil oben
Ausgewählten Wert um 10 vermindernUmschalt + Pfeil untenUmschalt + Pfeil untenUmschalt + Pfeil unten
Ausgewählten Wert um 0,1 erhöhenAlt + Pfeil obenWahltaste + Pfeil obenAlt + Pfeil oben
Ausgewählten Wert um 0,1 vermindernAlt + Pfeil untenWahltaste + Pfeil untenAlt + Pfeil unten
+
+ +

Debugger

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
Debugger öffnenStrg + Umschalt + SBefehlstaste + Wahltaste + SStrg + Umschalt + S
Mit dem Skriptfilter im aktuellen Quelltext suchenStrg + FBefehlstaste + FStrg + F
Im aktuellen Quelltext weitersuchenEingabetaste / Pfeil obenEingabetaste / Pfeil obenEingabetaste / Pfeil oben
Im aktuellen Quelltext rückwärts suchenUmschalt + Enter / Pfeil untenUmschalt + Enter / Pfeil untenUmschalt + Enter / Pfeil unten
Mit dem Skriptfilter in allen Quelltexten suchenStrg + Alt + FBefehlstaste + Wahltaste + FStrg + Alt + F
Nach Skripten nach Namen suchenStrg + P / Strg + OBefehlstaste + P / Strg + OStrg + P / Strg + O
Nach Funktionsdefinitionen suchenStrg + DBefehlstaste + DStrg + D
Variablen filtern, wenn Ausführung pausiert istStrg + Alt + VBefehlstaste + Wahltaste + VStrg + Alt + V
Ausführung nach Erreichen eines Haltepunkts fortsetzenF8F81F8
Schritt darüberF10F101F10
Schritt hineinF11F111F11
Schritt herausUmschalt + F11Umschalt + F111Umschalt + F11
Haltepunkt an der aktuellen Zeile an-/ausschaltenStrg + BBefehlstaste + BStrg + B
Bedingten Haltepunkt an der aktuellen Zeile an-/ausschaltenStrg + Umschalt + BBefehlstaste + Umschalt + BStrg + Umschalt + B
Auswahl als zu beobachtenten Ausdruck hinzufügenStrg + Umschalt + EBefehlstaste + Umschalt + EStrg + Umschalt + E
Mit dem Skriptfilter zu Zeile springenStrg + LBefehlstaste + LStrg + L
Mit dem Skriptfilter suchenStrg + OBefehlstaste + OStrg + O
+ +

1. Standardmäßig wird den Funktionstasten auf einigen Macs eine besondere Funktion zugewiesen, beispielsweise die Änderung der Bildschirmhelligkeit. Informationen finden Sie in diesem Leitfaden zur Verwendung dieser Tasten als Standard-Funktionstasten. Um eine anders zugewiesene Taste als Standard-Funktionstaste zu verwenden, drücken Sie gleichzeitig die Fn-Taste (um die Laufzeitanalsyse zu öffnen drücken Sie also Umschalt + Fn + F5).

+
+ +

Web-Konsole

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
Web-Konsole öffnenStrg + Umschalt + KBefehlstaste + Wahltaste + KStrg + Umschalt + K
Im Nachrichtenfenster suchenStrg + FBefehlstaste + FStrg + F
Bereich „Objektinspektor“ leerenEscapeEscapeEscape
Fokus auf die Kommandozeile setzenStrg + Umschalt + KBefehlstaste + Wahltaste + KStrg + Umschalt + K
+ +

Kommandozeile

+ +

Diese Tastaturkürzel funktionieren in der Kommandozeile.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
Rückwärts durch die Ausgabe blätternBild AufBild AufBild Auf
Vorwärts durch die Ausgabe blätternBild AbBild AbBild Ab
Rückwärts durch die bereits ausgeführten Befehle blätternPfeil obenPfeil obenPfeil oben
Vorwärts durch die bereits ausgeführten Befehle blätternPfeil untenPfeil untenPfeil unten
Zum Zeilenanfang springenPos1Befehlstaste + AStrg + A
Zum Zeilenende sprintenEndeBefehlstaste + EStrg + E
Den aktuellen Ausdruck ausführenEingabetasteEingabetasteEingabetaste
Zeilenumbruch für mehrzeilige Ausdrücke einfügenUmschalt + EingabetasteUmschalt + EingabetasteUmschalt + Eingabetaste
+ +

Autovervollständigung Anzeige

+ +

Diese Tastaturkürzel funktionieren, wenn die Autovervollständigung Anzeige geöffnet ist.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
Auswählen des aktuellen Vorschlags der AutovervollständigungTabTabTab
Anzeige der Autovervollständigung schließenEscapeEscapeEscape
Bei geöffneter Anzeige den vorherigen Vorschlag der Autovervollständigung auswählenPfeil obenPfeil obenPfeil oben
Bei geöffneter Anzeige den nächsten Vorschlag der Autovervollständigung auswählenPfeil untenPfeil untenPfeil unten
Rückwärts durch die Autovervollständigung-Vorschläge blätternBild AufBild AufBild Auf
Vorwärts durch die Autovervollständigung-Vorschläge blätternBild AbBild AbBild Ab
+
+ +
+

Stilbearbeitung

+ + + + + + + + + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
Stilbearbeitung öffnenUmschalt + F7Umschalt + F7Umschalt + F7
Anzeige der Autovervollständigung öffnenStrg + LeertasteBefehlstaste + LeertasteStrg + Leertaste
+ +

JavaScript-Umgebung

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
JavaScript-Umgebung öffnenUmschalt + F4Umschalt + F4Umschalt + F4
Quelltext in der JavaScript-Umgebung ausführenStrg + RBefehlstaste + RStrg + R
Quelltext in der JavaScript-Umgebung ausführen und das Ergebnis im Objektinspektor anzeigenStrg + IBefehlstaste + IStrg + I
Quelltext in der JavaScript-Umgebung ausführen und Ergebnis als Kommentar einfügenStrg + LBefehlstaste + LStrg + L
Aktuelle Funktion neu auswertenStrg + EBefehlstaste + EBefehlstaste + E
Aktuelle Seite neu laden, dann den Quelltext in der JavaScript-Umgebung ausführenStrg + Umschalt + RBefehlstaste + Umschalt + RStrg + Umschalt + R
Inhalt der JavaScript-Umgebung speichernStrg + SBefehlstaste + SStrg + S
Existierende JavaScript-Umgebung öffnenStrg + OBefehlstaste + OStrg + O
Neue JavaScript-Umgebung erstellenStrg + NBefehlstaste + NStrg + N
JavaScript-Umgebung schließenStrg + WBefehlstaste + WStrg + W
Quelltext in der JavaScript-Umgebung einheitlich formatierenStrg + PBefehlstaste + PStrg + P
+
+ +

 

diff --git a/files/de/tools/netzwerkanalyse/index.html b/files/de/tools/netzwerkanalyse/index.html new file mode 100644 index 0000000000..1eed8449f5 --- /dev/null +++ b/files/de/tools/netzwerkanalyse/index.html @@ -0,0 +1,126 @@ +--- +title: Netzwerkanalyse +slug: Tools/netzwerkanalyse +translation_of: Tools/Network_Monitor +--- +
{{ToolsSidebar}}

Die Netzwerkanalyse zeigt Ihnen alle Netzwerkanfragen in Firefox  (z. B. wenn er eine Seite lädt oder über XMLHttpRequests), wie lange jede Anfrage gedauert hat und Details dazu. Um die Analyseansicht zu öffnen, wählen Sie „Netzwerkanalyse“ im Menü „Web-Entwickler“ (welches ein Untermenü von „Extras“ unter Mac und Linux ist) oder öffnen Sie die Entwickler-Symbolleiste und wechseln Sie zum Reiter „Netzwerk“.

+ +

Die Netzwerkanalyse erscheint am unteren Browserrand. Laden Sie die Seite neu, um die Anfrage zu sehen:

+ +

+ +

Liste der Netzwerkanfragen

+ +

Per Voreinstellung zeigt die Netzwerkanalyse eine Liste aller Netzwerkanfragen, die während des Ladens der Seite gemacht wurden. Jede Anfage steht in einer eigenen Zeile:
+

+ +

Felder der Netzwerkanfragen

+ +

Jede Zeile zeigt folgendes:

+ + + +

Die Symbolleiste oberhalb benennt diese Spalten und das Klicken auf eine Benennung sortiert die Anfragen nach dieser Spalte.

+ +

Ab Firefox 30 wird ein Vorschaubild der Grafik angezeigt, wenn es sich bei der Datei und eine Grafik handelt, und beim Drüberfahren mit dem Mauszeiger wird ein Vorschaubild angezeigt:

+ +

+ +

Zeitverlauf

+ +

Die Anfrageliste zeigt ebenfalls einen Zeitverlauf für die verschiedenen Teilen jeder Anfrage. Jeder Zeitverlauf erhält eine horizontale Position in seiner Reihe relativ zu den anderen Netzwerkanfragen. Damit können Sie sehen, wie lange die Seite insgesamt zum Laden benötigt hat.

+ +

Nach Content-Typen filtern

+ +

Am Ende jeder Seite können Sie über die Schaltflächen Filter für die Anfragen erstellen, abhängig vom Content-Typ der Anfrage:

+ +
+

Das Leeren der Liste der Netzwerkanfragen ist neu seit Firefox 28.

+
+ +

Ab Firefox 28 gibt es ganz rechts in der Zeile die Schaltfläche „Leeren“: Wie Sie sicher ahnen, können Sie damit die Liste der Netzwerkanfragen löschen.

+ +

Details zu den Netzwerkanfragen

+ +

Durch einen Klick auf eine Zeile wird eine neue Ansicht im rechten Teil des Netzwerkanalyse-Fensters angezeigt, das Ihnen detaillierte Informationen über die Anfrage bietet.

+ +

Mithilfe der Reiter ganz oben in dieser Ansicht können Sie zwischen verschiedenen Seiten wechseln:

+ + + +

Ab Firefox 30 gibt es eine sechste Seite namens Vorschau, die nur angezeigt wird, wenn der Content-Typ HTML ist.

+ +

Durch Klicken auf das Symbol links von den Reitern schließt diese Ansicht und bringt Sie zurück zur Listenansicht.

+ +

Kopfzeilen

+ +

Dieser Reiter listet Basisinformationen über die Anfragen auf und enthält die URL, den Status-Code, die HTTP-Anfrage und die Antwortkopfzeilen, die gesendet wurden:

+ +

Sie können zu den angezeigten Kopfzeilen Filter setzen:

+ +

Cookies

+ +

Dieser Reiter zeigt alle Details zu jedem Cookie, das mit einer Anfrage oder einer Antwort gesendet wurde:

+ +

So wie bei den Kopfzeilen können Sie auch die angezeigten Cookies filtern.

+ +

Parameter

+ +

Dieser Reiter zeigt die GET-Parameter und POST-Daten einer Anfrage:

+ +

Antwort

+ +

Der vollständige Inhalt einer Antwort wird in diesem Reiter angezeigt. Wenn die Antwort HTML, JS oder CSS ist, wird es als Text dargestellt:

+ +

Wenn die Antwort JSON ist, wird es als untersuchbares Objekt dargestellt:

+ +

Wenn die Anfrage eine Grafik ist, wird im Reiter eine Vorschau dargestellt:

+ +

Zeitverlauf

+ +

Im Reiter Zeitverlauf wird eine detailliertere und kommentierte Ansicht der Zeitverlaufsleiste dieser Anfrage angezeigt und stellt die Gesamtwartezeit in seinen verschiedenen Abschnitten dar:

+ +

Vorschau

+ +
+

Diese Funktion ist neu ab Firefox 30.

+
+ +

Ab Firefox 30 wird der Reiter „Vorschau“ als sechstes Element angezeigt, wenn der Dateityp HTML ist. Es zeigt den HTML-Inhalt:

+ +

+ +

Netzwerkanalyse starten

+ +
+

Das Werkzeug zum Starten der Netzwerkanalyse ist neu ab Firefox 29.

+
+ +

Ab Firefox 29 enthält die Netzwerkanalyse ein Werkzeug zum Starten derselben. Das hilft Ihnen zu zeigen, wie lange der Browser braucht, um die verschiedenen Teile Ihrer Website zu laden.

+ +

Klicken Sie zum Starten der Netzwerkanalyse auf das Symbol mit der Stoppuhr in der Symbolleiste am unteren Rand der Anzeige:

+ +

(Alternativ dazu und wenn Sie gerade erst die Netzwerkanalyse geöffnet haben und es noch keine Daten enthält, erhalten Sie ein Stoppuhr-Symbol im Hauptfenster.)

+ +

Die Website wird dann zweimal geladen: einmal mit einem leeren Browser-Cache und einmal mit einem gefüllten Cache. Dies simuliert den erstmaligen sowie darauffolgende Besuche eines Nutzers auf ihrer Seite.

+ +

Die Ergebnisse werden für jeden Testdurchlauf nebeneinander dargestellt – oder vertikal angeordnet, wenn das Fenster schmaler ist:

+ +

Das Ergebnis jedes Testdurchlaufes wird mittels einer Tabelle und einer Tortengrafik zusammengefasst. Die Tabelle gruppiert die Ressourcen nach ihrem Typ und zeigt die einzelnen Gesamtgrößen und den Gesamtzeitverlauf, den das Laden benötigt, an. Die dazugehörige Tortengrafik zeigt die relativen Größen jeder Ressource an.

+ +

Um zur Liste der Netzwerkanfragen zurückzukehreren, klicken Sie auf die Schaltfläche „Zurück“ auf der linken Seite.

+ +

Wenn Sie auf einen Ausschnitt in der Tortengrafik klicken, werden Sie zum entsprechenden Testdurchlauf weitergeleitet und Filter wird nur dieser Ressoure-Typ dargestellt.

diff --git a/files/de/tools/page_inspector/how_to/event_listener_untersuchen/index.html b/files/de/tools/page_inspector/how_to/event_listener_untersuchen/index.html new file mode 100644 index 0000000000..ac8aca1c8a --- /dev/null +++ b/files/de/tools/page_inspector/how_to/event_listener_untersuchen/index.html @@ -0,0 +1,27 @@ +--- +title: Event Listener untersuchen +slug: Tools/Page_Inspector/How_to/Event_Listener_untersuchen +tags: + - Guide + - Inspector + - Werkzeuge +translation_of: Tools/Page_Inspector/How_to/Examine_event_listeners +--- +
{{ToolsSidebar}}

Seit Firefox 33 wird ein "ev" Symbol im HTML Panel neben Elementen angezeigt, an die Event Listener gebunden sind:

+ +

+ +

Wird auf das Symbol geklickt, wird ein Popup angezeigt, das alle Event Listener anzeigt, die an dieses Element gebunden sind:

+ +

Jede Zeile beinhaltet:

+ + + +

Beachte, dass auch jQuery Events untersucht werden können, nicht nur DOM Events.

+ +

 

diff --git a/files/de/tools/page_inspector/how_to/index.html b/files/de/tools/page_inspector/how_to/index.html new file mode 100644 index 0000000000..54b596910d --- /dev/null +++ b/files/de/tools/page_inspector/how_to/index.html @@ -0,0 +1,13 @@ +--- +title: Wie handeln (How to) +slug: Tools/Page_Inspector/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Page_Inspector/How_to +--- +
{{ToolsSidebar}}
+ +

Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.

+ +

{{ ListSubpages () }}

diff --git a/files/de/tools/page_inspector/how_to/raster_layout_untersuchen/index.html b/files/de/tools/page_inspector/how_to/raster_layout_untersuchen/index.html new file mode 100644 index 0000000000..0318a735a4 --- /dev/null +++ b/files/de/tools/page_inspector/how_to/raster_layout_untersuchen/index.html @@ -0,0 +1,23 @@ +--- +title: 'CSS Raster Inspektor: Raster-Layout untersuchen' +slug: Tools/Page_Inspector/How_to/Raster_Layout_untersuchen +tags: + - Anleitung + - Inspektor + - Raster + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_grid_layouts +--- +
{{ToolsSidebar}}
+ +
Neu in Firefox 52
+ +

Seit den Firefox 52 Entwickler-Tools ist es möglich, sich zur Untersuchung eines CSS-Rasters die Spalten und Zeilen eines Rasters anzeigen zu lassen.

+ +

Wenn ein Element mit display: grid als Raster-Layout definiert wird, wird ein kleines Rastersymbol sichtbar: . Klicke auf das Icon, um die Struktur des Rasters zu visualisieren:

+ +

Die Rasterlinien werden auch dann noch angezeigt, wenn andere Elemente ausgewählt werden. Auswirkung von Änderungen anderer Elemente auf das Raster können so leicht nachverfolgt werden.

+ +

{{EmbedYouTube("lzjIe-8WhiQ")}}

+ +

Besuche labs.jensimmons.com (Englisch) für viele interessante Raster-Ideen.

diff --git a/files/de/tools/page_inspector/how_to/schriftarten_bearbeitung/index.html b/files/de/tools/page_inspector/how_to/schriftarten_bearbeitung/index.html new file mode 100644 index 0000000000..0106b4d282 --- /dev/null +++ b/files/de/tools/page_inspector/how_to/schriftarten_bearbeitung/index.html @@ -0,0 +1,231 @@ +--- +title: Schriftarten Bearbeitung +slug: Tools/Page_Inspector/How_to/Schriftarten_Bearbeitung +translation_of: Tools/Page_Inspector/How_to/Edit_fonts +--- +
{{ToolsSidebar}}
+ +
 Dieser Artikel bietet einen Überblick über die in den Firefox DevTools verfügbaren Schriftarten-Tools. Dieses Tool enthält mehrere nützliche Funktionen zum Anzeigen und Bearbeiten von Schriftarten, die auf ein im Browser geladenes Dokument angewendet werden, einschließlich der Überprüfung aller auf die Seite angewendeten Schriftarten und der präzisen Anpassung der Werte variabler Schriftachsen.{
+ +
{ToolsSidebar}}
+ +

This article provides a tour of the Font tools available in the Firefox DevTools. This tool contains several useful features for viewing and manipulating fonts applied to any document loaded in the browser including inspection of all fonts applied to the page, and precise adjustment of variable font axis values.

+ +
+

Note: The updated Font tools as shown in this article are available in Firefox 63 onwards; if you are using an older version of Firefox the tools will not look or behave quite the same, but they will be similar (most notably the Font Editor will not be available).

+
+ +

The Fonts tab

+ +

The Fonts tab is located on the right-hand side of the Page Inspector when it is docked to the bottom of the screen. When it is docked to the right or left sides of the screen, the Fonts tab appears beneath the HTML pane. To access it:

+ +
    +
  1. Open the Page Inspector.
    2. +
  2. Select the Fonts tab; the last of the tabs shown in the right-hand side of the CSS pane.
    3. +
+ +

+ +

The Fonts tab has three major sections:

+ + + +

Fonts used

+ +

The top section of the Font Editor shows the fonts used by the currently inspected element, grouped by font family.

+ +

+ +

Fonts are considered "used" when there is text content in the inspected element that has the font applied to it. Empty elements will not have any fonts used and will display the message "No fonts were found for the current element."

+ +

Fonts will be included in this section for one of the following reasons:

+ + + +

Fonts Editor

+ +

Firefox 63 adds the Font Editor — a new area below "Fonts used" with additional controls for editing the fonts’ characteristics.

+ +

+ +

For standard (static) fonts, you will be able to change the settings listed below

+ +

Size

+ +

The {{cssxref("font-size")}} for the inspected element.

+ +

+ +

This can be set using em, rem, %, px, vh, or vw units. You can select values using the slider or enter a numeric value directly into the text box.

+ +
+

Note: If you want to use a different unit such as pt for font-size or line-height, you can set the property value applied to the currently inspected element to use that unit via the rules view, and the font editor will automatically pick it up and make it available in the associated units dropdown menu.

+
+ +

Changing the unit of measure converts the numerical value to its equivalent in the new unit, so the same computed value is maintained.

+ +

Example: If 1rem is equivalent to 10 pixels, when you change the unit of measurement from rem to px, 2rem becomes 20px.

+ +

Line height

+ +

The {{cssxref("line-height")}} of the inspected element.

+ +

+ +

This can be set using unitless, em, %, or px units. You can select values using the slider or enter a numeric value directly into the text box.

+ +

Changing the unit of measure changes the value relative to the font-size setting.

+ +

Example: If the font is 20 pixels high and the line-height is 1.5em, when you change the unit of measure from em to px, the value will become 30px.

+ +

Weight

+ +

The {{cssxref("font-weight")}} for the inspected element.

+ +

Font weight setting

+ +

You can select values using the slider or enter a numeric value directly into the text box. For non-variable fonts the slider ranges from 100 to 900 in increments of 100.

+ +
+

Note: For variable fonts (see below) that define a wght variation axis, this range is custom.

+
+ +

Italic

+ +

The {{cssxref("font-style")}} for the inspected element.

+ +

+ +

This setting toggles between italic and normal values for the font-style CSS property.

+ +
+

Note: As you change settings, Firefox applies inline styles to the element to make the changes instantly visible on the page.

+
+ +

All fonts on page

+ +

The remaining area, at the bottom of the Fonts tab, shows an expandable list of all of the fonts in use on the page.

+ +

+ +

The list is useful because you can easily determine whether a font is a web font or a font hosted on your system.

+ +

Each font listed in this section shows you:

+ + + +

Variable font support in Firefox Developer Tools

+ +

Firefox 62 added support for variable fonts and Firefox 63 features support for editing the properties of variable fonts in the Font Editor.

+ +

What are variable fonts?

+ +

Variable Fonts, or OpenType Font Variations, define a new font file format that allows the font designer to include multiple variations of a typeface inside a single font file. That means you no longer have to apply several different web fonts to a single page to represent a complete typeface for which a variable font is available, provided it includes the desired values for the different characteristics you want to vary.

+ +

Variable fonts make it easy to vary font characteristics in a much more granular fashion because their allowable ranges are defined by axes of variation (see Introducing the 'variation axis' for more information). For example, {{cssxref("font-weight")}} can be set to any value between 1 and 1000 in variable fonts (although it is not guaranteed that a variable font will support this entire range).

+ +

There are several registered axes. Although it isn't required that these axes be defined for every font, if the font designer does implement a registered axis, its behavior must follow the defined behavior.

+ +

All variable font axes have a four-character axis tag. The CSS {{cssxref("font-variation-settings")}} property uses the tag as part of the key-value pair. For example, to set {{cssxref("font-weight")}} using font-variation-settings, you could do something like this:

+ +
font-variation-settings: "wght" 350;
+ +

However, you should only use font-variation-settings as a last resort if there is no basic font property available for setting those characteristic values (e.g. custom axes).

+ +
+

Note: font characteristics set using font-variation-settings will always override those set using the corresponding basic font properties, e.g. font-weight, no matter where they appear in the cascade.

+
+ +

Here are the registered axes along with their corresponding CSS properties:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Axis TagCSS Property
"wght"{{cssxref("font-weight")}}
"wdth"{{cssxref("font-stretch")}}
"slnt" (slant){{cssxref("font-style")}}: oblique + angle
"ital"{{cssxref("font-style")}}: italic
"opsz" +

{{cssxref("font-optical-sizing")}}

+
+ +

Any axis that is not on the list of registered axes is considered a custom axis. Custom axes do not have corresponding CSS font properties. Font designers can define whatever axis they want; each one needs to be given a unique four-character tag. The axis name and its range is up to the font designer.

+ +
+

Note: Registered axis tags are identified using lower-case tags, whereas custom axes should be given upper-case tags. Note that font designers aren't forced follow this practice in any way, and some won't. The important takeaway here is that axis tags are case-sensitive.

+
+ +
+

Warning: In order to use variable fonts, you need to make sure that your operating system is up to date. For example Linux OSes need the latest Linux Freetype version, and macOS prior to 10.13 does not support variable fonts. If your operating system is not up to date, you will not be able to use variable fonts in web pages or the Firefox Developer Tools.

+
+ +

Working with Variable fonts in the Font Editor

+ +

If the inspected element uses a variable font, the Fonts tab shows the axes that have been implemented for that particular font, providing control to alter the value of each one. This is very useful for quickly finding out what axes are available in a particular font — they can vary quite dramatically as font designers can implement basically anything they like.

+ +

+ +

You can adjust the axes individually or, if the font designer has included defined instances, you can select one from the "Instance" drop-down list and view the updates live on your page.

+ +

Here are a couple of examples of fonts with different axes defined:

+ +

+ +

In the following example, you can see that the font "Cheee Variable" includes settings for Yeast and Gravity. These are custom axes defined by the font designer.

+ +

+ +

The first image shows the font as it is used on the page with default settings. The second image shows the same font after selecting the "Hi Yeast Hi Gravity" variation.

+ +

+ + + +

Tips

+ +

Finally, here are a few tips for making effective use of the Fonts tab:

+ + diff --git a/files/de/tools/paint_flashing_tool/index.html b/files/de/tools/paint_flashing_tool/index.html new file mode 100644 index 0000000000..7fca9a3167 --- /dev/null +++ b/files/de/tools/paint_flashing_tool/index.html @@ -0,0 +1,94 @@ +--- +title: Paint Flashing Tool +slug: Tools/Paint_Flashing_Tool +translation_of: Tools/Paint_Flashing_Tool +--- +
{{ToolsSidebar}}

The paint flashing tool, when activated, highlights the part of a page that the browser needs to repaint in response to some input: for example, the user moving the mouse or scrolling. With the help of this tool you can figure out whether your website is causing the browser to repaint more than it needs to. Because repaints can be performance-intensive operations, eliminating unnecessary repaints can improve your website's responsiveness.

+ +

Repaints and responsiveness

+ +

When the browser renders a web page it parses the HTML and CSS, determines how to lay it out, and then paints it to actually display the content on the screen. Whenever an event happens that might change a visible part of the web page then the browser must repaint some portion of the page. For example, a repaint will be needed if the user scrolls the page or moves the mouse pointer over an element with a :hover pseudo-class that changes the element's style.

+ +

Repainting can be an expensive operation, so the browser tries to minimise the amount of repainting that it needs to do. It tries to work out which parts of the screen are "damaged" and repaint only those. The browser also splits its model of the page into layers that it expects will be updated independently of each other. Layers are painted independently and then composited, so a change in the appearance of one layer does not trigger a repaint in any other layers, and when only the relation of two layers changes (in an animation, for example) no repaints are required at all.

+ +

The choices made by a web developer can hinder the browser here, causing it to trigger more repaints, and for more of the screen, than necessary. This can then cause a site to be slow responding to user input (also known as "janky"). That's where the paint flashing tool helps: by showing you the areas that the browser repaints in response to an event, you can see whether it is repainting more than it needs to.

+ +

Using the paint flashing tool

+ +

There are two ways to switch on paint flashing:

+ + + +

+ + + +

+ +

Then try using the page. After moving the mouse around and scrolling a bit, the above page looks like this:

+ +

In this example, there are two main sources of repaints:

+ + + +

To deactivate paint flashing, click the "Highlight painted area" icon in the Toolbox again, or type "paintflashing off" into the Developer Toolbar and press Enter.

+ +

Example: CSS transitions

+ +

One area where implementation choices can affect repaint efficiency is in CSS transitions. The example below shows two different ways to move an element using a CSS transition. The first way applies the transition to the element's margin-left, while the second way moves the element using the transform property.

+ +
<body>
+    <div id="container">
+      <div class="moving-box" id="moving-box-left-margin">Transition using margin-left</div>
+      <div class="moving-box" id="moving-box-transform">Transition using transform</div>
+    </div>
+</body>
+
+
+ +
#container {
+  border: 1px solid;
+}
+
+.moving-box {
+  height: 20%;
+  width:20%;
+  margin: 2%;
+  padding: 2%;
+  background-color: blue;
+  color: white;
+  font-size: 24px;
+}
+
+#moving-box-left-margin {
+  transition: margin-left 4s;
+}
+
+#moving-box-transform {
+  transition: transform 4s;
+}
+
+body:hover #moving-box-left-margin{
+  margin-left: 74%;
+}
+
+body:hover #moving-box-transform {
+  transform: translate(300%);
+}
+ +

To see the transition, move the mouse into the space below:

+ +

{{ EmbedLiveSample('Example.3A_CSS_transitions', 600, 300) }}

+ +

Now switch paint flashing on, and try it again. You should see that the margin-left version triggers a series of repaints as the element moves, while the transform version only causes repaints in the start and end positions.

+ +

Why? Well, when you use transform, the browser creates a separate layer for the element. So when the element is moved, all that's changed is the relation of the two layers to each other, which is handled in composition: neither layer needs a repaint.

+ +

In this case, with a simple style, the extra repaints don't make much of a difference. But if the style were computationally expensive to paint, they might. It's difficult to know what optimizations the browser will make to minimize repaints, and they are subject to change from one version to the next. So testing your website with the paint flashing tool helps ensure that it's still performing optimally.

diff --git a/files/de/tools/performance/index.html b/files/de/tools/performance/index.html new file mode 100644 index 0000000000..21a61a4805 --- /dev/null +++ b/files/de/tools/performance/index.html @@ -0,0 +1,96 @@ +--- +title: Performance +slug: Tools/Performance +translation_of: Tools/Performance +--- +
{{ToolsSidebar}}
+ +

Mit dem Leistungstool erhalten Sie Einblick in die allgemeine Reaktionsfähigkeit, JavaScript und Layoutleistung Ihrer Website. Mit dem Leistungstool erstellen Sie über einen bestimmten Zeitraum eine Aufnahme oder ein Profil Ihrer Website. Das Tool zeigt Ihnen dann einen Überblick über die Aktivitäten des Browsers zum Rendern Ihrer Website über das Profil und eine Grafik der Bildrate über dem Profil.

+ +

Sie erhalten vier Unterwerkzeuge, mit denen Sie Aspekte des Profils genauer untersuchen können:

+ + + +

{{EmbedYouTube("WBmttwfA_k8")}}

+ +
+

Erste Schritte

+ +
+
+
+
UI Tour
+
+

Um sich im Performance-Tool zurechtzufinden, finden Sie hier eine kurze Einführung in die Benutzeroberfläche.

+
+
+
+ +
+
+
How to
+
Grundlagen: Öffnen Sie das Tool, erstellen, speichern, laden und konfigurieren Sie Aufnahmen
+
+
+
+ +
+

Komponenten des Performance-Tools

+ +
+
+
+
Bildrate
+
Understand your site's overall responsiveness.
+
Aufruf-Baum
+
Find bottlenecks in your site's JavaScript.
+
Allokationen
+
See the allocations made by your code over the course of the recording.
+
+
+ +
+
+
Wasserfall
+
Understand the work the browser's doing as the user interacts with your site.
+
Flammendiagramm
+
See which JavaScript functions are executing, and when, over the course of the recording.
+
 
+
+
+
+ +
+

Scenarios

+ +
+
+
+
Animieren von CSS-Eigenschaften
+
Uses the Waterfall to understand how the browser updates a page, and how animating different CSS properties can affect performance.
+
 
+
+
+ +
+
+
Intensives JavaScript
+
Uses the frame rate and Waterfall tools to highlight performance problems caused by long-running JavaScript, and how using workers can help in this situation.
+
+
+
+ +

 

+ +
+
+
 
+
+
+ +

 

diff --git a/files/de/tools/remote_debugging/debugging_firefox_desktop/index.html b/files/de/tools/remote_debugging/debugging_firefox_desktop/index.html new file mode 100644 index 0000000000..0b90f7db95 --- /dev/null +++ b/files/de/tools/remote_debugging/debugging_firefox_desktop/index.html @@ -0,0 +1,38 @@ +--- +title: Debugging Firefox Desktop +slug: Tools/Remote_Debugging/Debugging_Firefox_Desktop +translation_of: Tools/Remote_Debugging/Debugging_Firefox_Desktop +--- +

{{draft}}

+ +

{{ToolsSidebar}}

+ +

This guide explains how you can use the Firefox Developer Tools to debug a different instance of desktop Firefox running on the same machine. In this guide, the instance of Firefox being debugged is called the debuggee, and the instance of Firefox doing the debugging is called the debugger.

+ +

Enable remote debugging

+ +

First, you'll need to ensure that both debugger and debuggee have the "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging" settings checked in the Developer Tools Settings. If you're using Firefox Developer Edition, they are checked by default.

+ +

+ +

You only need to do this once: the setting values persist across restarts.

+ +

Start the debugger server

+ +

Next, you need to start the debugger server in the debuggee.

+ +

Run the debuggee from the command line, passing it the --start-debugger-server option:

+ +
/path/to/firefox --start-debugger-server
+ +

Passed with no arguments, --start-debugger-server makes the debugger server listen on port 6000. To use a different port, pass the desired port number:

+ +
/path/to/firefox --start-debugger-server 1234
+ +

Note: in Windows, the start-debugger-server call will only have one dash:

+ +
firefox.exe -start-debugger-server 1234
+ +
+

Note: By default, and for security reasons, the devtools.debugger.force-local option is set. If you want to debug a Firefox instance from an external machine, you can change this option, but only do this on a trusted network or set a strong firewall rule to lock down which machines can access it.

+
diff --git a/files/de/tools/remote_debugging/firefox_for_android/index.html b/files/de/tools/remote_debugging/firefox_for_android/index.html new file mode 100644 index 0000000000..f21c00f2e2 --- /dev/null +++ b/files/de/tools/remote_debugging/firefox_for_android/index.html @@ -0,0 +1,136 @@ +--- +title: Externes Debugging mit Firefox for Android +slug: Tools/Remote_Debugging/Firefox_for_Android +translation_of: Tools/Remote_Debugging/Firefox_for_Android +--- +
{{ToolsSidebar}}

Diese Anleitung erklärt, wie man remote debugging verwendet, um Code unter Firefox for Android über USB zu inspizieren und zu debuggen.

+ +

+ +

Diese Anleitung ist in zwei Teile aufgeteilt: im ersten Teil, "Voraussetzungen", werden die Voraussetzungen erklärt, welche aber nur einmal durchgeführt werden müssen. Im zweiten Teil, "Verbinden", wird erklärt, wie man zum Gerät verbindet. Dieser zweite Teil muss immer wieder durchgeführt werden.

+ +

Voraussetzungen

+ +

Um zu beginnen, benötigen Sie folgendes:

+ + + +

ADB Installation

+ +

Als nächstes müssen Sie das Mobilgerät und den Computer so einrichten, dass die beiden miteinander kommunizieren können. Dafür wird das adb Kommandozeilen-Programm verwendet.

+ +

Auf dem Android-Mobilgerät

+ + + +

Auf dem Computer/Laptop

+ + + +

Um dies zu testen, können Sie folgenden Befehl in  der Kommandozeile eingeben:

+ +
adb devices
+ +

Nun sehen Sie eine Ausgabe analog zu folgender:

+ +
List of devices attached
+51800F220F01564 device
+
+ +

(Die lange Hex-Zeichenkette wird verschieden sein.)

+ +

Wenn diese Ausgabe korrekt ist, wurde ADB korrekt installiert und ADB konnte das Mobilgerät korrekt erkennen.

+ +

Falls unter OSX die Zeile unterhalb von "List of devices attached" leer sein sollte, könnte es an EasyTether liegen:

+ +
+

ADB on Mac OS X stops recognizing the attached device after installing EasyTether driver. Use kextload/kextunload to unload from memory the EasyTetherUSBEthernet.kext kernel extension manually. It is in /System/Library/Extensions/

+ +

(Aus der Webseite von EasyTether)

+
+ +

Remote Debugging aktivieren

+ +

Als nächstes muss "Remote Debugging" auf dem Mobilgerät und dem Computer aktiviert werden.

+ +

Firefox for Android 24 und früher

+ +

Um "Remote Debugging" auf dem Mobilgerät zu aktivieren, muss der Wert der devtools.debugger.remote-enabled Einstellung auf true gesetzt werden.

+ +

Gehen Sie nach about:config in Firefox for Android, tippen Sie "devtools" ins Suchfeld und drücken Sie auf den Suchen-Button. Nun sehen Sie alle devtools-Einstellungen. Setzen Sie nun die devtools Einstellung debugger.remote-enabled auf true, indem Sie auf "Umschalten" klicken.

+ +

+ +

Firefox for Android 25 und später

+ +

Bei Firefox for Android 24 und später gibt es einen Menü-Eintrag, um "Remote Debugging" zu aktivieren. Öffnen Sie das Menü, wählen Sie "Einstellungen", dann "Entwicklerwerkzeuge" (auf einigen Android-Geräten müssen Sie auf "Mehr" klicken, um den Einstellungen-Eintrag zu sehen). Aktivieren Sie das Kontrollkästchen bei "Remote debugging":

+ +

+ +

Der Browser zeigt nun eine Notifikation an, dass die Portweiterleitung noch aktiviert werden muss. Dies werden wir später machen.

+ +

Auf dem Computer

+ +

Auf dem Computer wird "Remote debugging" über die Entwicklerwerkzeuge aktiviert. Öffnen Sie die Entwicklerwerkzeuge, klicken Sie auf die "Einstellungen" Schaltfläche in der Symbolleiste und aktivieren Sie das Kontrollkästchen neben "Externes Debugging aktivieren":

+ +

+ +
Wenn Sie Firefox 26 oder älter verwenden, müssen Sie danach Firefox neu starten. Nach diesem Schritt sehen Sie im "Web-Entwickler" Menü einen neuen Eintrag "Verbinden...":
+ +
 
+ +

+ +

Verbinden

+ +

Da Sie nun alles eingerichtet haben, können Sie den Computer über den "Verbinden..." Menü-Eintrag mit Ihrem Firefox for Android verbinden. Dazu verbinden Sie zuerst Ihr Mobilgerät mit Ihrem Computer, falls Sie dies nicht bereits gemacht haben.

+ +

Auf dem Computer

+ +

Öffnen Sie ein Kommandozeilen-Fenster und tippen Sie:

+ +
adb forward tcp:6000 tcp:6000
+ +

(Falls Sie den zu verwendeten Port auf dem Android-Mobilgerät geändert haben, müssen Sie hier den geänderten Wert eintragen.)

+ +

Für Firefox OS, tippen Sie:

+ +
adb forward tcp:6000 localfilesystem:/data/local/debugger-socket
+ +

Diesen Befehl müssen Sie immer ausführen, wenn das Mobilgerät über USB-Kabel an den Computer angeschlossen wird.

+ +

Gehen Sie nun ins "Web-Entwickler" Menü und wählen Sie "Verbinden...". Sie werden folgende Seite sehen:

+ +

Sofern Sie den Android-Port nicht geändert haben, wählen Sie hier 6000 und drücken auf "Verbinden".

+ +

Auf dem Android-Mobilgerät

+ +

Nun sehen Sie auf Ihrem Mobilgerät folgende Meldung, da sich nun Firefox mit Ihrem Mobilgerät verbinden möchte.

+ +

Drücken Sie auf "OK". Firefox auf Ihrem Computer wartet einige Sekunden, damit Sie genug Zeit haben, auf dem Mobilgerät die Meldung zu quittieren. Wenn die Zeit nicht ausreicht, können Sie nochmals auf "Verbinden" klicken.

+ +

Auf dem Computer

+ +

Als nächsten sehen Sie auf Ihrem Computer folgende Anzeige:

+ +

Nun werden Sie gefragt, ob Sie den Code in einem Browser Tab oder den Browser selbst debuggen möchten.

+ + + +

Wir entscheiden uns für das Anfügen des Debuggers an die mozilla.org Webseite. Die Entwicklerwerkzeuge werden in einem eigenen Fenster geöffnet und werden an die Webseite innerhalb von Firefox for Android angehängt:

+ +

Die Entwicklerwerkzeuge unterscheiden nicht zwischen lokalem Inhalt und Inhalt auf anderen Geräten. Sie funktionieren in beiden Fällen identisch.

diff --git a/files/de/tools/remote_debugging/index.html b/files/de/tools/remote_debugging/index.html new file mode 100644 index 0000000000..5253b47cff --- /dev/null +++ b/files/de/tools/remote_debugging/index.html @@ -0,0 +1,44 @@ +--- +title: Remote Debugging +slug: Tools/Remote_Debugging +tags: + - Debugging + - Tools +translation_of: Tools/Remote_Debugging +--- +
{{ToolsSidebar}}

Du kannst die Firefox Developer Tools dazu nutzen Websites und Webapps zu debuggen, die in anderen Browsern oder Umgebungen laufen. Andere Browser können auf dem selben Gerät sein oder auf einem anderen Gerät, wie zum Beispiel auf einem via USB verbundenen Gerät.

+ +

Die detaillierten Verbindungsanleitungen sind umgebungsspezifisch, d.h. je nach Gerät und Umgebung ist eine andere Anleitung verfügbar.

+ +

Gecko-basierte Umgebungen

+ +

In erster Linie kannst du die Developer Tools mit gecko-basierten Umgebungen, wie zum Beispiel Firefox Desktop, Firefox für Android, Firefox OS oder Thunderbird, verbinden.

+ + + +

Andere Umgebungen

+ +

Das experimentelle Valence-AddOn kann helfen Websites anderer, nicht gecko-basierter, Umgebungen zu verbinden, dazu gehören beispielsweise Google Chrome Desktop, Chrome für Android oder Safari für iOS.

+ +

Valence ist standardmäßig in die Firefox Developer Edition integriert.

+ + diff --git a/files/de/tools/scratchpad/index.html b/files/de/tools/scratchpad/index.html new file mode 100644 index 0000000000..c17554d944 --- /dev/null +++ b/files/de/tools/scratchpad/index.html @@ -0,0 +1,85 @@ +--- +title: JavaScript-Umgebung +slug: Tools/Scratchpad +tags: + - Tools +translation_of: Archive/Tools/Scratchpad +--- +
{{ToolsSidebar}}
+ +

Das Werkzeug „JavaScript-Umgebung“ bietet eine Umgebung zum Experimentieren mit JavaScript-Quelltext. Sie können Quelltext schreiben und testen, der mit den Inhalten der Webseite interagiert und dann zu Ihren gewohnten Entwicklungwerkzeugen wechseln, wo Sie Ihre Arbeit verfeinern und fertigstellen.

+ +

Anders als die Web-Konsole, die nur eine Zeile Quelltext auf einmal interpretieren soll, können Sie mit der JavaScript-Umgebung größere Blöcke JavaScript-Quelltext bearbeiten und diese dann auf vielfältige Weise ausführen, je nachdem, wie Sie das Ergebnis verwenden möchten.

+ +

{{EmbedYouTube("lvQf2u3rmkw")}}

+ +

Verwenden der JavaScript-Umgebung

+ +

Um ein Fenster der JavaScript-Umgebung zu öffnen, drücken Sie Umschalt+F4 oder öffnen Sie das Menü „Web-Entwickler“ (dieses ist unter Mac OS X und Linux ein Untermenü des Menüs „Extras“) und wählen Sie „JavaScript-Umgebung“. Dies öffnet ein Editorfenster der JavaScript-Umgebung mit einem Kommentar, der einige kurze Hinweise zur Verwendung der JavaScript-Umgebung liefert. Von dort aus können Sie direkt JavaScript-Quelltext eingeben und ausprobieren.

+ +

Das Fenster der JavaScript-Umgebung sieht ungefähr so aus (unter Mac OS X ist die Menüleiste am oberen Bildschirmrand):

+ +

German Scratchpad screenshot

+ +

Unter Verwenden des Quelltext-Editors finden Sie eine Dokumentation zum Editor selbst, einschließlich nützlicher Tastaturkürzel.

+ +

Im Datei-Menü finden Sie Optionen zum Speichern und Laden von Ausschnitten von JavaScript-Quelltext, so dass Sie Quelltext bei Gefallen später wiederverwenden können.

+ +

Ausführen Ihres Quelltexts

+ +

Sobald Sie Ihren Quelltext geschrieben haben, wählen Sie den Quelltext aus, den Sie ausführen möchten. Wenn Sie nichts auswählen, wird der gesamte Quelltext im Fenster ausgeführt. Klicken Sie dann mit der rechten Maustaste (oder verwenden Sie das Menü „Ausführen“ in der Menüleiste) und wählen Sie, wie Ihr Quelltext ausgewählt werden soll. Es gibt vier Möglichkeiten zur Ausführung.

+ +

Ausführen

+ +

Wenn Sie die Option „Ausführen“ wählen, wird der gewählte Quelltext ausgeführt. Dies können Sie verwenden, wenn Sie eine Funktion oder Quelltext ausführen möchten, der den Inhalt Ihrer Seite verändert, ohne dass Sie das Ergebnis sehen müssen.

+ +

Untersuchen

+ +

Mit der Option „Untersuchen“ wird der Quelltext ebenso ausgeführt wie bei der Option „Ausführen“; anschließend wird allerdings ein Objektinspektor geöffnet, mit dem Sie den Ergebniswert untersuchen können.

+ +

Wenn Sie beispielsweise diesen Quelltext eingeben:

+ +
window
+
+ +

und dann „Untersuchen“ wählen, öffnet sich der Objektinspektor und zeigt in etwa folgendes :

+ +

German Scratchpad inspection screenshot

+ +

 

+ +

Anzeigen

+ +

Die Option „Anzeigen“ führt den gewählen Quelltext aus und fügt das Ergebnis direkt als Kommentar in das Editor-Fenster Ihrer JavaScript-Umgebung ein. Dies ist ein bequemer Weg, um während Ihrer Arbeit ein fortlaufendes Protokoll Ihrer Testergebnisse zu erstellen. Zur Not können Sie dies auch als Taschenrechner verwenden, aber wenn Sie schon keinen Taschenrechnerprogramm haben, haben Sie vielleicht größere Probleme.

+ +

Neu laden und ausführen

+ +

Die Option „Neu laden und ausführen“ lädt erst die Seite neu und fürt dann den Quelltext aus, wenn das „load“-Ereignis der Seite ausgelöst wird. Dies ist hilfreich, wenn der Quelltext in einer sauberen Umgebung ausgeführt werden soll.

+ +

Wann ist es sinnvoll, Scratchpad zu benutzen?

+ +

Es gibt viele Möglichkeiten, die JavaScript-Umgebung sinnvoll einzusetzen. In diesem Abschnitt finden Sie einige davon.

+ +

Testen von neuem Quelltext

+ +

Die JavaScript-Umgebung ist besonders nützlich, um neuen Quelltext in einer laufenden Browser-Umgebung zu testen; Sie können den Quelltext, den Sie debuggen, in die JavaScript-Umgebung kopieren, ihn ausführen und dann anpassen, bis er funktioniert. Sobald er funktioniert, kopieren Sie ihn wieder in die Hauptdatei Ihres Quelltexts und schon sind Sie fertig. Oftmals können Sie Ihren Quelltext schreiben, debuggen und testen, ohne jemals die Seite laden zu müssen.

+ +

Wiederverwendbare Quelltext-Ausschnitte

+ +

Die Menüleiste der JavaScript-Umgebung bietet Befehle zum Speichern und Laden von JavaScript-Quelltext. Dies kann genutzt werden, um Teile von JavaScript-Quelltext aufzubewahren, den Sie häufig verwenden. Wenn Sie beispielsweise an einer Website arbeiten, die Daten mit AJAX-Anfragen lädt, können Sie Ausschnitte aufbewahren, die diese Ladeoperationen ausführen, um die Daten zu testen oder zu verifizieren. Ebenso können Sie hilfreiche allgemeine Debugging-Funktionen aufbewahren, wie solche, die bestimmte Arten von Informationen über das DOM liefern.

+ +

Umgebung der JavaScript-Umgebung

+ +

Quelltext, den Sie in der JavaScript-Umgebung ausführen, wird in der globalen Umgebung des zum Zeitpunkt der Ausführung gewählten Tabs ausgeführt. Variablen, die Sie außerhalb einer Funktion deklarieren, werden dem globalen Objekt für diesen Tab hinzugefügt.

+ +

Verwenden der JavaScript-Umgebung zum Zugriff auf Firefox-interne Funktionen

+ +

Wenn Sie an Firefox selbst arbeiten oder Add-ons entwickeln, finden Sie es möglicherweise hilfreich, über die JavaScript-Umgebung auf alle internen Funktionen des Browsers zuzugreifen. Um dies zu tun, müssen Sie in about:config die Einstellung devtools.chrome.enabled auf true setzen. Sobald dies geschehen ist, hat das Menü der Umgebung eine Option „Browser“; sobald Sie diese aktiviert haben, ist Ihre Umgebung nicht mehr nur der Inhalt der Seite, sondern der gesamte Browser.

+ +

Tastaturkürzel

+ +

{{ Page ("de/docs/tools/Keyboard_shortcuts", "scratchpad") }}

+ +

Tastaturkürzel des Quelltext-Editors

+ +

{{ Page ("de/docs/tools/Keyboard_shortcuts", "source-editor") }}

diff --git a/files/de/tools/seiten_inspektor/index.html b/files/de/tools/seiten_inspektor/index.html new file mode 100644 index 0000000000..f44fe105ce --- /dev/null +++ b/files/de/tools/seiten_inspektor/index.html @@ -0,0 +1,109 @@ +--- +title: Seiteninspektor +slug: Tools/Seiten_Inspektor +translation_of: Tools/Page_Inspector +--- +
{{ToolsSidebar}}

{{ fx_minversion_header("10") }}

+ +

Der Seiteninspektor ist ein handliches Werkzeug zur Untersuchung von Stuktur und Gestaltung einer Seite.

+ +

Den Inspektor öffnen

+ +

Es gibt verschiedene Wege, den Inspektor zu öffnen:

+ + + +

Der Inspektor erscheint in der Werkzeuge-Box am unteren Rand des Browser-Fensters.

+ +

Wenn Sie den Inspektor durch "Element untersuchen" aufgerufen haben, ist das gewählte Element bereits im Inspektor ausgewählt und er verhält sich, wie im Abschnitt "Ein Element auswählen" beschrieben.

+ +

Andernfalls wird das Element unter Ihrem Mauszeiger mit einem gestrichelten Rahmen und einer Notiz mit dem Namen des HTML-Elements angezeigt. Wenn Sie die Maus über die Webseite bewegen, ändert sich das hervorgehobene Element. Gleichzeitig wird seine HTML-Defintion im Kontext der Seite linken Bereich des Inspektors angezeigt. Ab Firefox 30 werden ebenfalls Rasterlinien für das Element und sein Box-Modell dargestellt.

+ +

Wenn Sie auf ein Element klicken, wird es ausgewählt und der Inspektor verhält sich, wie im Abschnitt "Ein Element auswählen" beschrieben.

+ +

Ein Element auswählen

+ +

Wenn ein Element ausgewählt ist, wird seine HTML-Definition im HTML-Abschntt im linken Teil und die Stil-Information im rechten CSS-Abschnitt des Inspektors angezeigt.Das Verhalten beim Auswählen von Elementen hat sich in Firefox 29 grundlegend geändert. Ab Firefox 30 zeigt der Inspektor das Box-Modell von Elementen in der Webseite.

+ +

Vor Firefox 29

+ +

Sobald Sie ein Element durch Klicken auf der Webseite auswählen, wird die Anzeige im Inspektor auf dieses Element fest gelegt, das heißt, Sie können die Maus über die Seite bewegen ohne dass der Inspektor zu einem anderen Element wechselt.

+ +

In der Notiz des Elements erscheint auf der linken und der rechten Seite eine Schaltfläche. Die Schaltfläche auf der linken Seite hebt die Festlegung auf das Element auf, so dass Sie neue Elemente auswählen können. Die Schaltfläche auf der rechten Seite öffnet ein Kontextmenü für das Element.

+ +

+ +

Firefox 29

+ +

In Firefox 29 wird der gestrichelte Rahmen um ein Element in der Seite sowie die Notiz nicht mehr angezeigt, wenn ein Element ausgewählt wird. Der Inspektor ist auch nicht mehr auf das ausgewählte Element festelegt: Wenn Sie die Maus im HTML-Teil des Inspektors bewegen, wird das entsprechende Element auf der Webseite hervorgehoben. Um ein anderes Element auf der Webseite auszuwählen, klicken Sie auf die Schaltfläche "Ein Element der Seite auswählen" in der Werkzeugleiste der Werkzeuge-Box:

+ +

{{EmbedYouTube("zBYEg40ByCM")}}

+ +

Firefox 30 und neuer

+ +

In Firefox 30 und neueren Version ist das Verhalten identisch zu Firefox 29, zusätzlich zeigt der Inspektor das Box-Modell und Rastlinien für das ausgewählte Element auf der Webseite.

+ +

{{EmbedYouTube("X1aGlwmUF94")}}

+ +

Das Element-Kontext-Menü

+ +

Sie können eine Reihe von üblichen Aufgaben mit Hilfe des Kontext-Menüs erledigen. Um das Kontext-Menü zu öffnen, klicken Sie mit der rechten Maustaste auf ein Element im <HTML-Bereich> des Inspektors.

+ +

+ +

Das Kontext-Menü bietet Ihnen folgende Möglichkeiten:

+ + + +

Grafik als Data-URI kopieren

+ +
+

Diese Funktion ist neu in Firefox 29.

+
+ +

In Firefox 29 und neuer enthält das Kontext-Menü einen Eintrag, der das ausgewählte Bild als Data-URI in die Zwischenablage kopiert.

+ +

+ +

HTML bearbeiten

+ +

Um das äußere HTML eines Elements zu bearbeiten, klicken Sie im Kontext-Menü auf "HTML bearbeiten". Es erscheint ein Textfeld im HTML-Bereich:

+ +

+ +

Sie können hier HTML beliebig bearbeiten: Ändern des Element-Elements, Ändern von Element-Eigenschaften oder Hinzufügen von neuen. Sobald sie außerhalb des Textfeldes klicken werden die Änderungen wirksam.

+ +

HTML-Bereich

+ +

+ +

Der HTML-Bereich zeigt das HTML der Webseite als Baum mit zusammenklappbaren Knoten. Das ausgewählte Element wird durch einen grauen Hintergrund hervorgehoben.

+ +

Sie können das HTML – Elemente, Attribute und Inhalt – in diesem Bereich direkt editieren: Klicken Sie doppelt auf das Element, nehmen Sie die gewünschten Änderungen vor und drücken Sie anschließend "Enter", um die Änderungen sofort anzuwenden.

+ +

Wenn Sie mit der rechten Maustaste auf ein Element klicken, erscheint das Element-Kontext-Menü.

+ +

HTML-Bereich Werkzeugleiste

+ +

Über dem HTML-Bereich befindet sich eine Werkzeugleiste, bestehend aus drei Teilen:

+ +
+

In Firefox 29 und neuer wurde die Schaltfläche "Ein Element der Seite auswählen" in die Werkzeuge-Box verschoben.

+
+ +

Ein Element der Seite auswählen: Wenn Sie diese Schaltfläche anklicken können Sie ein Element auf der Webseite auswählen.
+ HTML-Brotkrümelnavigation: Sie zeigt die komplette Hierarchie im aktuellen Zweig des ausgewählten Elements. Klicken und halten Sie auf ein Element in dieser Leiste, um ein Kontextmenü zu öffnen, in dem sie ein Geschwisterelement des ausgewählten Eintrags auswählen können. Klicken sie auf die Pfeile am Anfang und Ende der Leiste, um seitlich zu scrollen, falls sie größer als der zur Verfügung stehende Platz sein sollte.
+ HTML-Element-Suche:

+ +

 

diff --git a/files/de/tools/seiten_inspektor/tastenkombinationen/index.html b/files/de/tools/seiten_inspektor/tastenkombinationen/index.html new file mode 100644 index 0000000000..a77ee75e45 --- /dev/null +++ b/files/de/tools/seiten_inspektor/tastenkombinationen/index.html @@ -0,0 +1,12 @@ +--- +title: Tastenkombinationen +slug: Tools/Seiten_Inspektor/Tastenkombinationen +translation_of: Tools/Page_Inspector/Keyboard_shortcuts +--- +
{{ToolsSidebar}}
+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "page-inspector") }}

+ +

Global shortcuts

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git a/files/de/tools/shader-editor/index.html b/files/de/tools/shader-editor/index.html new file mode 100644 index 0000000000..baf56c7597 --- /dev/null +++ b/files/de/tools/shader-editor/index.html @@ -0,0 +1,57 @@ +--- +title: Shader Editor +slug: Tools/Shader-Editor +translation_of: Tools/Shader_Editor +--- +
{{ToolsSidebar}}

Der Shader Editor ermöglicht es, Vertex- and Fragment-Shader unter Verwendung von WebGL zu editieren.

+ +

{{EmbedYouTube("-pEZXNuFFWI")}}

+ +

WebGL ist eine JavaScript API um 3D und 2D Grafiken ohne zusätzliche PlugIns im Browser zu rendern. WebGL verfügt 2 Programme ("shader") auf der betreffenden Ebene der OpenGL rendering pipeline arbeiten:  ein vertex shader, der die Koordinaten für jeden Vertex liefert und den fragment shader, der Farbwerte jedes einzelnen pixels liefert, der gezeichnet werden soll.
+
+ Diese Programme ("Shader") wurden in der OpenGL Shading Language, or GLSL geschrieben. WebGL kann auf unterschiedliche Arten in Webseiten eingebunden werden: als hardcodierter Text in einem Java Skript Quellcode , als externe Quelldatei über das <script>-Tag oder als Klartext direkt vom Server abgerufen werden.Der auf der Webseite enthaltene Java Script code wird mittels einer WebGL API direkt auf der GPU des jeweiligen Gerät (Device) ausgeführt.

+ +

Mit dem Shader-Editor kann der Quellcode von Vertex- und Fragment-Shadern untersucht und bearbeiten werden.

+ +

Hier ein weiterer Screencast, der zeigt wie der Schader-Editor für complexe Applikationen genutzt werden kann (in diesem Fall, der Unreal Engine Demo):

+ +

{{EmbedYouTube("YBErisxQkPQ")}}

+ +

Öffnen des Shader-Editors

+ +

Standartmäßig ist der Shader-Editor deaktiviert. Dieser kann in den Toolbox settings unter "Default Firefox Developer Tools" aktiviert werden.  Der Shader Editor ist nun in der Toolbar verfügbar und kann mittels Mausklick auf Shader-Editor geöffnet werden.
+
+ Zunächst erscheint ein leeres Fenster mit einem RELOAD-Button um die Seite neu zu laden:

+ +

+ +

Der RELOAD der Seite erzeugt einen WebGL Kontext der das Programm lädt.
+ Der folgende Screenshot zeigt eine Demo der Unreal Engine.

+ +

Das Fenster ist in drei Bereiche unterteilt: links eine Auflistung der GLSL Programme, in der Mitte der Vertex-Shader mit dem aktuell selektierten Programm und der Fragment-Shader des aktuell selektierten Programms im rechten Fenster.

+ +

+ +

Programme verwalten

+ +

Im linken Fenster werden die aktuellen Programme des WebGL-Kontext aufgelistet. Fährt man mit dem Cursor über einen der Listeneinträge, wird die betreffende Geometrie in rot hervor gehoben:

+ +

Mit einen Mausklick auf das Auge-Icon links der Programmeinträge, wird das betreffende Programm deaktiviert. Das ist praktisch bei Fokussierung eines bestimmten Shaders oder zum auffinden überlappender Geometrien:

+ +

Durch Anklicken eines Programmeintrags erscheint dessen Vertex- und Fragment Shader in den beiden angrenzenden Fenstern und kann bearbeitet werden.

+ +

Shader bearbeiten

+ +

Das mittlere und rechte Fenster zeigen den Vertex- und den Fragment-Shader des aktuell ausgewählten Programms.
+
+ Sie können die Programme bearbeiten und die Ergebnisse ansehen nachdem der WebGL Kontext neu gezeichnet hat (beispielsweise im nächsten Animations-Frame). Zum Beispiel nach dem modifizieren der Farbwerte:

+ +

Der Editor markiert ("highlighted") Fehler im Quellcode:

+ +

Wenn Sie die X-Icons neben den Zeilen mit der Maus überfahren ("hovern") werden Ihnen detailierte Informationen zum jeweiligen Problem angezeigt:

+ +

+ +

 

+ +

 

diff --git a/files/de/tools/storage_inspector/cache_storage/index.html b/files/de/tools/storage_inspector/cache_storage/index.html new file mode 100644 index 0000000000..b8411a08dd --- /dev/null +++ b/files/de/tools/storage_inspector/cache_storage/index.html @@ -0,0 +1,15 @@ +--- +title: Cache Storage +slug: Tools/Storage_Inspector/Cache_Storage +translation_of: Tools/Storage_Inspector/Cache_Storage +--- +
{{ToolsSidebar}}
+ +

Under the Cache Storage type within the Storage Inspector you can see the contents of any DOM caches created using the Cache API. If you select a cache, you'll see a list of the resources it contains. For each resource, you'll see:

+ + + +

diff --git a/files/de/tools/storage_inspector/cookies/index.html b/files/de/tools/storage_inspector/cookies/index.html new file mode 100644 index 0000000000..9ed14c7fd6 --- /dev/null +++ b/files/de/tools/storage_inspector/cookies/index.html @@ -0,0 +1,43 @@ +--- +title: Cookies +slug: Tools/Storage_Inspector/Cookies +translation_of: Tools/Storage_Inspector/Cookies +--- +

{{ToolsSidebar}}

+ +

Wenn Sie im Speicherbaum eine Herkunft innerhalb des Cookie-Speichertyps auswählen, werden alle für diese Herkunft vorhandenen Cookies in einer Tabelle aufgelistet. Die Cookie-Tabelle enthält die folgenden Spalten:

+ + + +
+

Hinweis: Einige der Spalten werden standardmäßig nicht angezeigt. Um die Spaltenanzeige zu ändern, klicken Sie mit der rechten Maustaste auf die vorhandenen Tabellenüberschriften und verwenden Sie das resultierende Kontextmenü, um die Spalten anzuzeigen / auszublenden.

+
+ +

Sie können Cookies bearbeiten, indem Sie auf Zellen im Tabellen-Widget doppelklicken und die darin enthaltenen Werte bearbeiten. Fügen Sie neue Cookies hinzu, indem Sie auf die Schaltfläche "Plus" (+) klicken und dann die resultierende neue Zeile auf den gewünschten Wert bearbeiten.

+ +

Kontextmenü

+ +

Das Kontextmenü für jeden Cookie beinhaltet die folgenden Befehle:

+ + + +

diff --git a/files/de/tools/storage_inspector/index.html b/files/de/tools/storage_inspector/index.html new file mode 100644 index 0000000000..475f4c28d2 --- /dev/null +++ b/files/de/tools/storage_inspector/index.html @@ -0,0 +1,200 @@ +--- +title: Storage Inspector +slug: Tools/Storage_Inspector +tags: + - Entwicklerwerkzeug + - Sessionspeicher + - Speicher + - Werkzeuge + - lokaler Speicher +translation_of: Tools/Storage_Inspector +--- +
{{ToolsSidebar}}
+ +

Der Web-Speicher-Inspektor ermöglicht dir die Einsicht der verschiedenen Speicher-Typen, welche Websites zur Nutzung zur verfügung stehen. Zur Zeit besteht die Möglichkeit des auslesens folgender Speicher-Typen:

+ + + +

Vorerst ermöglicht der Web-Speicher-Inspektor nur Lesezugriff auf die einzelnen Speicher-Typen. Aber wir arbeiten daran in einer zukünftigen Version auch den Schreibzugriff zu ermöglichen, damit es möglich wird, die einzelnen Speicher Inhalte auch zu verändern.

+ +

Den Web-Speicher-Inspektor öffnen

+ +

Du kannst den Web-Speicher-Inspektor durch Auswählen von "Web-Speicher-Inspektor" im Entwickler-Untermenü im Firefox Hauptmenü (oder im Web-Entwickler-Menü, wenn die Menü-Zeile angezeigt wird oder bei Mac OS X) oder durch Drücken von Shift + F9 auf der Tastatur.

+ +

Die Entwickler-Box wird am Fuß des Browser-Fensters erscheinen, mit dem Web-Speicher-Inspektor aktiviert. In der Box heißt er nur "Web-Speicher".

+ +

+ +

Web-Speicher-Inspektor Benutzeroberfläche

+ +

Die Web-Speicher-Inspektor-Benutzeroberfläche ist in drei Hauptkomponenten unterteilt:

+ + + +

+ +

Speicherbaum

+ +

Der Speicherbaum zeigt alle Speichertypen, die der Web-Speicher-Inspektor anzeigen kann:

+ +

+ +

Unter jedem Type werden die Objekte nach ihrer Herkunft organisiert. Bei Cookies unterscheidet das Protokoll nicht die Herkunft. Für Indexed DB oder lokalen Speicher ist die Herkunft eine Kombination aus Protokoll und Hostnamen. Zum Beisiel sind "http://mozilla.org" und "https://mozilla.org" zwei verschiedene Herkünfte, somit kann lokaler speicher nicht zwischen ihnen ausgetauscht werden.

+ +

Unter "Cache-Speicher" sind die Objekte erst nach Herkunft und dann nach Name des Caches gespeichert:

+ +

+ +

IndexedDB sind nach Herkunft, dann nach Datenbank-Name und dann nach Objekt-Speicher-Name abgelegt:

+ +

+ +

Bei Cookies, lokalem Speicher und Sitzungs-Speicher gibt es nur eine Hierarchie-Ebene also sind die Objekte direkt unter der Herkunft aufgelistet:

+ +

+ +

Du kannst auf jeden Eintrag klicken, um die Untereinträge auf- oder zuzuklappen.

+ +

Klicken auf einen Untereintrag stellt detaillierte Informationen in der tabellarischen Ansicht rechts davon dar.Zum Beispiel führt das Klicken auf einen Eintrag im Cookies-Abschnitt dazu, dass alle Cookies von der ausgewählten Domain gezeigt werden.

+ +

Tabellarische Übersicht

+ +

Die tabellarische Übersicht ist der Platz, wo alle Einträge entsprechend zu dem gewählten Eintrag aufgelistet werden (egal ob Herkunft oder Datenbank).

+ +

Alle Spalten in der tabellarischen Übersicht sind skalierbar. Du kannst Spalten zeigen oder verstecken durch Klicken auf den Tabellenkopf und Auswählen welche Spalten du sehen möchtest:

+ +

+ +

Suche

+ +

Es gibt eine Suchzeile am Kopf der tabellarischen Übersicht:

+ +

+ +

Diese filtert die Tabelle damit nur noch Einträge die den Suchbegriff enthalten angezeigt werden. Einträge passen zum Suchbegriff, wenn in einem beliebigen Feld (auch den ausgeblendeten) der Begriff enthalten ist.

+ +

Ab Firefox 50 aufwärts kann man  Strg + F (Cmd + F beim Mac) drücken, um in die Suchbox zu springen.

+ +

Hinzufügen und aktualisieren des Speichers

+ +

Bei neueren Versionen des Firefox hast du Knöpfe verfügbar, um die aktuelle Ansicht des betrachteten Speichers zu aktualisieren und wo möglich einen eigenen Eintrag hinzuzufügen (du kannst bei IndexedDB oder Cache keine eigenen Einträge vornehmen):

+ +

+ + + +

Wenn du eine Reihe in der Tabelle auswählst, werden in der Sidebar Details über diese Zeile angezeigt. Wenn ein Cookie ausgewählt wird, werden alle Details dieses Cookies angezeigt.

+ +

Die Sidebar kann den Wert eines Cookies, lokalen Speicherobjekts oder eines Indexed DB Eintrags parsen und in einen aussagekräftiges Objekt erzeugen anstatt nur eines Strings. Zum Beispiel:

+ + + +

Die gezeigten Werte können mit Hilfe des Suchfeldes im Kopf der Sidebar gefiltert werden.

+ +

Cache Speicher

+ +

Unter dem Eintrag "Cache Storage" kannst du den Inhalt jedes DOM Caches sehen, der unter Verwendung von Cache API erzeugt wurde. Wenn du einen Cache auswählst, siehst du eine Liste der Einträge die er enthält. Für jeden Eintrag siehst du:

+ + + +

+ +

Cookies (Kekse ;-)

+ +

Wenn du eine Herkunft aus dem "Cookie Storage" Eintrag im Speicherbaum auswählst, werden alle Cookies die für diese Herkunft gespeichert sind im Tabellen-Fenster angezeigt. Die Cookies-Tabelle hat folgende Spalten:

+ + + +
+

Bitte beachten: Einige Spalten werden standardmäßig nicht gezeigt — um die Spaltendarstellung zu ändern, Rechts/Ctrl-Klick auf den angezeigten Tabellenkopf und das erscheinende Menü benutzen, um die Spalten ein- und auszuschalten.

+
+ +

Du kann die Cookies editieren, wenn du in der Tabellen-Ansicht doppelklickst und die angezeigten Werte veränderst. Neue Cookies können mit dem "Plus" (+) Knopf und dem Editieren der erscheinenden neuen Zeile erstellt werden.

+ +

Du kannst außerdem Cookies löschen, indem du das Menü in jeder Zeile benutzt:

+ +

+ +

Local storage / Session storage

+ +

Wenn ein Eintrag aus dem local Storage oder dem session storage ausgewählt wird, zeigt die Tabelle alle Einträge, die mit der entsprechenden Session und local oder session storage zu tun haben.

+ +

Du kannst die Einträge im local und session storage bearbeiten, wenn du in die entsprechende Zelle im Tabellen-Widget doppelklickst und die Werte editierst:

+ +

{{EmbedYouTube("UKLgBBUi11c")}}

+ +

Außerdem kannst die local und session storage Einträge mit Hilfe des Kontext-Menüs löschen:

+ +

+ +

Schließlich kannst du auch Einträge durch drücken des "Plus" (+) Knopfes hinzufügen und dann die erzeugte Zeile mit Wunschwerten füllen.

+ +

IndexedDB

+ +

Wenn du einen Ursprung innerhalb des Speichertyps IndexedDB in der Speicherstruktur auswählst, werden in der Tabelle die Details aller für diesen Ursprung vorhandenen Datenbanken aufgelistet.

+ +
+

Hinweis: Die in einer IndexedDB-Datenbank angezeigten Daten sind eine Momentaufnahme der Daten, wie sie beim Öffnen des Web-Speicher-Werkzeugs vorhanden waren.

+
+ +

Datenbanken haben folgende Details:

+ + + +

Wenn eine IndexedDB-Datenbank in der Speicherstruktur ausgewählt ist, werden Details zu allen Objektspeichern in der Tabelle aufgelistet. Jeder Objektspeicher enthält die folgenden Details:

+ + + +

+ +

Wenn ein Objektspeicher in der Speicherstruktur ausgewählt wird, werden alle Einträge in dem Objektspeicher in der Tabelle aufgelistet.

+ +

Du kannst eine Indexed DB Datenbank löschen, indem du den Eintrag aus dem Kontextmenü in der Speicherstruktur benutzt:

+ +

+ +

Wenn eine Datenbank nicht gelöscht werden kann (meistens, weil es noch aktive Verbindungen zur Datenbank gibt), wird eine Warnmeldung im Speicher-Inspektor angezeigt:

+ +

Du kannst das Kontext-Menü im Tabellen-Editor benutzen, um alle Einträge in einem Objektspeicher zu löschen oder nur einzelne:

+ +

diff --git a/files/de/tools/storage_inspector/indexeddb/index.html b/files/de/tools/storage_inspector/indexeddb/index.html new file mode 100644 index 0000000000..2ede236480 --- /dev/null +++ b/files/de/tools/storage_inspector/indexeddb/index.html @@ -0,0 +1,45 @@ +--- +title: IndexedDB +slug: Tools/Storage_Inspector/IndexedDB +translation_of: Tools/Storage_Inspector/IndexedDB +--- +
{{ToolsSidebar}}
+ +

When you select an origin inside the Indexed DB storage type in the storage tree of the Storage Inspector, a table lists the details of all the databases present for that origin.

+ +
+

Note: The data shown in an IndexedDB database is a snapshot of the data as it was when you opened the Storage Inspector tool.

+
+ +

Databases have the following details:

+ + + +

When an IndexedDB database is selected in the storage tree, details about all the object stores are listed in the table. Any object store has the following details:

+ + + +

+ +

When an object store is selected in the storage tree, all the items in that object store are listed in the table. All items have a key and a value associated with them.

+ +

You can delete an IndexedDB database using the context menu in the storage tree:

+ +

+ +

If the database cannot be deleted (most commonly because there are still active connections to the database), a warning message will be displayed in the Storage Inspector:

+ +

You can use the context menu in the table widget to delete all items in an object store, or a particular item:

+ +

diff --git a/files/de/tools/storage_inspector/local_storage_session_storage/index.html b/files/de/tools/storage_inspector/local_storage_session_storage/index.html new file mode 100644 index 0000000000..464345892a --- /dev/null +++ b/files/de/tools/storage_inspector/local_storage_session_storage/index.html @@ -0,0 +1,20 @@ +--- +title: Local Storage / Session Storage +slug: Tools/Storage_Inspector/Local_Storage_Session_Storage +translation_of: Tools/Storage_Inspector/Local_Storage_Session_Storage +--- +
{{ToolsSidebar}}
+ +

When an origin corresponding to local storage or session storage is selected within the Storage Inspector, the names and values of all the items corresponding to local storage or session storage will be listed in a table.

+ +

You can edit local and session storage items by double-clicking inside cells in the Table Widget and editing the values they contain:

+ +

{{EmbedYouTube("UKLgBBUi11c")}}

+ +

You can delete local storage and session storage entries using the context menu:

+ +

+ +

You can also delete local and session storage entries by selecting an item and pressing the Delete or Backspace key.

+ +

Finally, you can add new storage items by clicking the "Plus" (+) button and then editing the resulting new row to the value you want.

diff --git a/files/de/tools/style_editor/index.html b/files/de/tools/style_editor/index.html new file mode 100644 index 0000000000..bb39d8f812 --- /dev/null +++ b/files/de/tools/style_editor/index.html @@ -0,0 +1,54 @@ +--- +title: Style Editor +slug: Tools/Style_Editor +translation_of: Tools/Style_Editor +--- +
{{ToolsSidebar}}
+ +

Die Stilbearbeitung ermöglicht:

+ + + +

{{EmbedYouTube("7839qc55r7o")}}

+ + + +

Um die Stilbearbeitung zu öffnen, wählen Sie die Option "Stilbearbeitung" aus dem Menü "Webentwickler" (ein Untermenü im Menü "Werkzeuge" auf dem Mac). Die Toolbox erscheint am unteren Rand des Browser-Fensters, wobei die Stilbearbeitung aktiviert ist:

+ +

+ +

Links (oder oben, wenn Ihr Fenster sehr schmal ist) befindet sich eine Liste aller vom Dokument verwendeten Stylesheets, und rechts (oder unten, wenn Ihr Fenster sehr schmal ist) ist die Quelle für das Stylesheet, das Sie gerade in diesem Stylesheet-Fenster ausgewählt haben.

+ +

Die Stylesheet-Ansicht

+ +

Die Ansicht der Stylesheets auf der linken Seite listet alle Stylesheets auf, die vom aktuellen Dokument verwendet werden. Sie können die Verwendung eines bestimmten Stylesheets schnell ein- und ausschalten, indem Sie auf das Augesymbol links neben dem Stylsheetnamen klicken. Sie können alle Änderungen, die Sie am Stylesheet vorgenommen haben, auf Ihrem lokalen Computer speichern, indem Sie auf die Schaltfläche "Speichern" in der rechten unteren Ecke jedes Eintrags in der Liste klicken.

+ +

Das Bearbeitungsfenster

+ +

Auf der rechten Seite befindet sich das Bearbeitungsfenster. Hier steht Ihnen die Quelle für das ausgewählte Stylesheet zum Lesen und Bearbeiten zur Verfügung. Alle Änderungen, die Sie vornehmen, werden in Echtzeit auf die Seite angewendet. Dadurch ist es wirklich einfach, mit dem Aussehen Ihrer Seite zu experimentieren, sie zu überarbeiten und zu testen. Wenn Sie mit Ihren Änderungen zufrieden sind, können Sie eine Kopie lokal speichern, indem Sie auf die Schaltfläche Speichern am Eintrag des Blattes im Blattfenster klicken.

+ +

Der Editor bietet Zeilennummern und Syntaxhervorhebung, um das Lesen Ihres CSS zu erleichtern. Siehe Verwendung des Quelltexteditors für die Dokumentation über den Editor selbst, einschließlich nützlicher Tastaturkürzel.

+ +

Eine besonders praktische Funktion der Stilbearbeitung: Sie minimiert automatisch die von ihr erkannten Stilvorlagen, ohne das Original zu beeinflussen. Dies erleichtert die Arbeit auf optimierten Seiten erheblich.

+ +

Erstellen und Importieren von Stylesheets

+ +

Sie können ein neues Stylesheet erstellen, indem Sie auf die Schaltfläche Neu in der Symbolleiste klicken. Dann können Sie einfach mit der Eingabe von CSS in den neuen Editor beginnen und beobachten, wie die neuen Stile in Echtzeit angewendet werden, genau wie die Änderungen in den anderen Sheets.

+ +

Sie können ein Stylesheet von der Festplatte laden und auf die Seite anwenden, indem Sie auf die Schaltfläche Importieren klicken.

+ +

Siehe auch

+ + + +

{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}

diff --git a/files/de/tools/web_konsole/hilfe/index.html b/files/de/tools/web_konsole/hilfe/index.html new file mode 100644 index 0000000000..d8dd2b0241 --- /dev/null +++ b/files/de/tools/web_konsole/hilfe/index.html @@ -0,0 +1,65 @@ +--- +title: Konsole Bild +slug: Tools/Web_Konsole/Hilfe +tags: + - Anfänger + - Befehle + - Beispiele + - Debugging + - Deutsch + - Firefox + - Konsole + - Maxi + - Übersetzung +translation_of: Tools/Web_Console/Helpers +--- +
{{ToolsSidebar}}

Die Befehle

+ +

Die von der Web Console bereitgestellt JavaScript Kommandozeile bietet ein paar eingebauten Hilfsfunktionen, bestimmte Aufgaben zu erleichtern.
+
+ $ ()
+      Sucht nach einer CSS-Selektor-String, der Rückkehr auf das erste Element, das passt. Entspricht {{domxref ("document.querySelector ()")}} oder ruft die $ -Funktion in der Seite, wenn es vorhanden ist.
+ $$ ()
+      Sucht nach einer CSS-Selektor-String, der Rückkehr eine Liste von DOM-Knoten zusammenpasst. Dies ist eine Abkürzung für {{domxref ("document.querySelectorAll ()")}}.
+ $ 0
+      Das aktuell geprüft Element in der Seite.
+ $ x ()
+      Wertet einen XPath-Ausdruck und gibt ein Array von passenden Knoten.
+ keys ()
+      Für ein gegebenes Objekt wird eine Liste der Schlüsseln (oder Eigenschaftsnamen) für das Objekt angezeigt. Dies ist eine Abkürzung für Object.keys.
+ values ()
+      Für ein gegebenes Objekt wird eine Liste der Werte für das Objekt zurückgegeben; dient als Ergänzung zu keys ().
+ clear ()
+      Löscht den Ausgabebereich der Konsole.
+ inspect ()
+      Da ein Objekt öffnet den Objektinspektor für das Objekt.
+ pprint ()
+      Formatiert den angegebenen Wert in lesbarer Weise; Dies ist nützlich für die Dumping den Inhalt der Objekte und Arrays.
+ help()
+      Zeigt Hilfetext . Eigentlich in einem schönen Beispiel für Rekursion, es wird Sie zu dieser Seite zu bringen.
+ cd ()
+      Schalten Sie JavaScript Auswertung Kontext in einen anderen iframe auf der Seite. Siehe Arbeiten mit eingebetteten Frames anzeigen.
+ Bitte beachten Sie die Konsole API für weitere Informationen über die Anmeldung von Inhalten.
+
+ Beispiele
+ Beispiel: Eine Sicht auf den Inhalt einer DOM-Knoten
+
+ Angenommen, Sie haben einen DOM-Knoten mit der ID "Titel" zu haben. In der Tat, diese Seite, die Sie gerade lesen muss man, so können Sie öffnen Sie die Web-Konsole und versuchen Sie diese jetzt.
+
+ Werfen wir einen Blick auf den Inhalt dieses Knotens mit der $ () und prüfen () Funktionen:

+ +
inspect($("#Titel"))
+ +


+
+ Es öffnet sich automatisch das Objekt-Inspektor und zeigt Ihnen den Inhalt des DOM-Knoten, der die CSS-Selektor "#title", was natürlich ist das Element mit der ID "Titel" entspricht.
+ Beispiel: Dumping den Inhalt eines DOM-Knoten
+
+ Das ist schön und gut, wenn Sie geschehen, im Browser zu sitzen ein Problem aufweisen, aber lassen Sie uns sagen Sie remote Debugging für einen Benutzer, und müssen Sie einen Blick auf den Inhalt eines Knotens. Sie können Ihre Benutzer öffnen Sie die Web-Konsole und Dump den Inhalt der Knoten in das Protokoll, dann kopieren und fügen Sie ihn in eine E-Mail an Sie, mit Hilfe der pprint () -Funktion:
+  

+ +
pprint($("#Titel"))
+ +

 

+ +

This spews out the contents of the node so you can take a look. Of course, this may be more useful with other objects than a DOM node, but you get the idea.

diff --git a/files/de/tools/web_konsole/index.html b/files/de/tools/web_konsole/index.html new file mode 100644 index 0000000000..1616e7c9a7 --- /dev/null +++ b/files/de/tools/web_konsole/index.html @@ -0,0 +1,582 @@ +--- +title: Web-Konsole +slug: Tools/Web_Konsole +translation_of: Tools/Web_Console +--- +
{{ToolsSidebar}}
+ +

Die Web-Konsole

+ +
    +
  1. zeichnet Informationen auf, die mit einer Webseite verknüpft sind: alle Netzwerkanfragen, JavaScript, CSS und Sicherheitsfehler, sowie Fehler-, Warn- und Informationsmeldungen, die speziell von JavaScript-Code auf einer Seite verursacht werden
    2. +
  2. erlaubt es Ihnen, mit einer Webseite zu interagieren, indem Sie JavaScript-Befehle auf einer Seite ausführen
    3. +
+ +

Es ist ein Ersatz für die alte Fehlerkonsole, die in Firefox eingebaut war: sie hat Fehler, Warnungen und Nachrichten von allen Internetseiten, vom Browser-Code und Add-ons angezeigt. Das machte es viel schwerer zu sehen, welche Nachrichten zu welcher Internetseite gehören. Die Web-Konsole ist immer mit einer spezifischen Internetseite verknüpft und zeigt Informationen an, die mit dieser Seite zusammenhängen.

+ +

Der andere Teil der Fehlerkonsole ist die Browserkonsole, die Fehler, Warnungen und Meldungen vom Browser-Code und von Add-ons anzeigt.

+ +

{{EmbedYouTube("AlYMRAQnkX8")}}

+ +

Die Web-Konsole öffnen

+ +

Um die Web-Konsole zu öffnen, wählen Sie "Web-Konsole" vom Web-Entwickler Untermenü im Firefox-Menü (oder Extras-Menü, wenn Sie die Menüleiste aktiviert haben oder Mac OS X benutzen) aus, oder halten Sie die Tasten Steuerung-Umschalt-K (Befehl-Wahl-K auf einem Mac) gedrückt.

+ +

https://developer.mozilla.org/de/docs/Tools/Web_Konsole$edit

+ +

Die Browser-Werkzeuge werden zusammen mit der Web-Konsole (sie wird in der DevTools Werkzeugleiste nur "Konsole" genannt) am unteren Teil des Browser-Fensters angezeigt:

+ +

+ +

Unter der Symbolleiste der Entwicklerwerkzeuge ist die Oberfläche der Web-Konsole in drei Abschnitte eingeteilt:

+ + + +

Meldungsansicht

+ +

Der Großteil der Web-Konsole wird von der Meldungsansicht genutzt:

+ +

+ +

Die Meldungsanzeige zeigt folgende Meldungen an:

+ + + +

Jede Nachricht wird in einer neuen Zeile angezeigt:

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ZeitDie Zeit, zu der die Meldung aufgezeichnet wurde. Ab Firefox 28 wird sie standardmäßig nicht angezeigt, jedoch können Sie Zeitstempel mit einer Einstellung in der Werkzeugleiste anzeigen lassen.
Kategorie +

Kategorie: zeigt an, um welche Art von Meldung es sich handelt:

+ +
    +
  • Schwarz: HTTP-Anfrage
    • +
  • Blau: CSS-Warnung/Fehler/Meldung
    • +
  • Orange: JavaScript-Warnung/Fehler
    • +
  • Grün: Sicherheitswarnung/-fehler
    • +
  • Hellgrau: Meldungen, die explizit durch von der console-API ausgeführtem JavaScript-Code stammen
    • +
  • Dunkelgrau: Eingaben/Ausgaben von der interaktiven Kommandozeile
    • +
+
TypFür alle Meldungen außer HTTP-Anfragen und interaktiven Eingaben/Ausgaben, ein Symbol das anzeigt, ob es sich um ein Fehler(X), eine Warnung(!) oder eine Meldung (i) handelt.
MeldungDie Meldung an sich.
Anzahl der MeldungenWenn eine Zeile, die eine Warnung oder ein Fehler erzeugt, mehrmals ausgeführt wird, wird sie nur einmal aufgezeichnet und der Zähler zeigt die Anzahl an Meldungen an.
Dateiname und ZeilennummerJavaScript-, CSS- und console API-Meldungen können zu einer spezifischen Codezeile zurückverfolgt werden. Die Konsole gibt den Dateinamen und Zeilennummer des Codeabschnitts an, das die Meldung erzeugt hat.
+ +

HTTP-Anfragen

+ +

HTTP-Anfragen werden in einer Zeile dargestellt, die folgendermaßen aussieht:

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
ZeitDie Zeit, zu der die Meldung aufgezeichnet wurde.
KategorieZeigt an, dass die Meldung eine HTTP-Anfrage ist.
MethodeDie Methode der HTTP-Anfrage
URIDie Ziel-URI
ZusammenfassungDie HTTP-Version, Status-Code und Laufzeit.
+ +

Wenn Sie auf eine Meldung klicken, sehen Sie so ein Fenster mit mehr Informationen über die Anfrage und Antwort:

+ +

Durch Herunterscrollen sehen Sie die Antwort-Zeilen. Standardmäßig werden Anfrage- und Antwort-Inhalte nicht aufgezeichnet: um dies zu tun, wählen Sie im Auswahlmenü der Web-Konsole "Anfrage- und Antwort-Inhalte aufzeichnen" aus, laden Sie die Seite neu und öffnen Sie das Fenster "Netzwerk-Request untersuchen".

+ +

Nur das erste Megabyte an Daten wird für alle Anfrage- und Antwort-Inhalte aufgezeichnet, weshalb sehr große Anfragen und Antworten gekürzt werden.

+ +
+

Ab Firefox 30 werden Netzwerk-Meldungen standardmäßig nicht angezeigt.

+
+ +

JavaScript-Fehler und Warnungen

+ +

JavaScript-Meldungen sehen folgendermaßen aus:

+ +

+ +
+

Ab Firefox 30 werden JavaScript-Warnungen standardmäßig nicht angezeigt.

+
+ +

CSS-Fehler, -Warnungen und DOM-Neuberechnungen

+ +

CSS-Meldungen sehen folgendermaßen aus:

+ +

+ +

Standardmäßig werden CSS-Warnungen und Meldungen nicht angezeigt.

+ +

DOM-Neuberechnungen

+ +

Die Web-Konsole zeichnet auch DOM-Neuberechnungen unter der CSS-Kategorie auf. Eine Neuberechnung bezeichnet der Vorgang, bei dem der Browser das Layout von der ganzen Seite oder von Teilen berechnet. Neuberechnungen treten auf, wenn Änderungen auf einer Seite aufgetreten sind, von denen der Browser denkt, dass das Layout der Seite beeinflusst wurde. Viele Ereignisse können Neuberechnungen auslösen, inklusive: Skalieren des Browser-Fensters, Aktivieren von Pseudoklassen wie :hover oder Manipulieren des DOM in JavaScript.

+ +

Da Neuberechnungen manchmal Rechenaufwendig sind und die Benutzeroberfläche direkt beeinflussen, können sie einen großen Einfluss auf die responsiveness einer Webseite oder Web-App haben. Indem Neuberechnungen in der Web-Konsole aufgezeichnet werden, können Sie sehen, wann Neuberechnungen erzwungen werden, wie lange es dauert, sie auszuführen, ob die Neuberechnungen synchrone Neuberechnungen sind und von welchem JavaScript-Code sie erzwungen werden.

+ +

Neuberechnungen werden als "Logbuch"-Meldungen angezeigt, im Gegensatz zu CSS-Fehlern oder Warnungen. Standardmäßig sind sie deaktiviert. Sie können sie aktivieren, indem Sie auf die "CSS"-Schaltfläche in der Symbolleiste klicken und "Logbuch" auswählen.

+ +

Jede Meldung wird mit "reflow" markiert und zeigt die Zeit an, die für die Neuberechnung gebraucht wurde:

+ +

Wenn die Neuberechnung synchron ist und von JavaScript-Code erzwungen wurde, wird auch ein Link zur Codezeile angezeigt, die die Neuberechnung erzwungen hat.

+ +

Klicken Sie auf den Link um die Datei im Debugger zu öffnen.

+ +

Synchrone and asynchrone Neuberechnungen

+ +

Wenn eine Änderung das aktuelle Layout ungültig macht - zum Beispiel, wenn der Browser-Fenster skaliert wird oder JavaScript-Code das CSS eines Elements ändert - wird das Layout nicht augenblicklich neu berechnet. Stattdessen geschieht die Neuberechnung asynchron, sobald der Browser entscheidet, dass es notwendig ist (üblicherweise, wenn das Aussehen des Browser-Fensters neu gezeichnet wird). So kann der Browser mehrere ungültig machende Änderungen sammeln und alle auf einmal neuberechnen.

+ +

Wenn ein JavaScript-Code jedoch CSS ausliest, das geändert wurde, muss der Browser eine synchrone Neuberechnung durchführen um das berechnete Aussehen zurückzugeben. Folgender Code-Beispiel löst beim Aufruf von window.getComputedStyle(thing).height sofort eine synchrone Neuberechnung aus:

+ +
var thing = document.getElementById("the-thing");
+thing.style.display = "inline-block";
+var thingHeight = window.getComputedStyle(thing).height;
+ +

Deshalb ist es eine gute Idee, Verschachtelungen von Schreib- und Leseanfragen zu vermeiden, da bei jedem Lesen eines durch eine vorangegangene Schreibanfrage ungültig gemachten Stils eine synchrone Neuberechnung erzwungen wird.

+ +

Sicherheitswarnungen und -fehler

+ +

Sicherheitswarnungen und -fehler sehen folgendermaßen aus:

+ +

Die Sicherheitsmeldungen in der Web-Konsole helfen Ihnen dabei, (potentielle) Sicherheitslücken in Ihren Seiten zu finden. Außerdem helfen diese Meldungen Entwickler dabei, zu lernen, da sie mit einem Link "Weitere Informationen" enden, womit Sie zu einer Seite mit Hintergrundinformationen und Hilfestellungen zur Problemlösung geführt werden.

+ +

Die folgende Liste führt alle Sicherheitsmeldungen auf:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MeldungDetails
Laden von gemischten aktiven Inhalten wurde blockiert.Die Seite besitzt gemischte aktive Inhalte: die Hauptseite wurde über HTTPS bereitgestellt, hat den Browser aber gebeten, "aktive Inhalte" wie Skripte über HTTP zu laden. Der Browser hat diesen aktiven Inhalt blockiert. Siehe Gemischte Inhalte für mehr Details.
Laden von gemischten Ansichtsinhalten wurde blockiert.Die Seite besitzt gemischte Ansichtsinhalte: die Hauptseite wurde über HTTPS bereitgestellt, hat den Browser aber gebeten, "Ansichtsinhalte" wie Bilder über HTTP zu laden. Der Browser hat diesen aktiven Inhalt blockiert. Siehe Gemischte Inhalte für mehr Details.
Lade gemischte (unsichere) aktive Inhalte auf einer sicheren SeiteDie Seite besitzt gemischte aktive Inhalte: die Hauptseite wurde über HTTPS bereitgestellt, hat den Browser aber gebeten, "aktive Inhalte" wie Skripte über HTTP zu laden. Der Browser hat diesen aktiven Inhalt geladen. Siehe Gemischte Inhalte für mehr Details.
Lade gemischte (unsichere) anzeige-Inhalte auf einer sicheren SeiteDie Seite besitzt gemischte Ansichtsinhalte: die Hauptseite wurde über HTTPS bereitgestellt, hat den Browser aber gebeten, "Ansichtsinhalte" wie Bilder über HTTP zu laden. Der Browser hat diesen aktiven Inhalt geladen. Siehe Gemischte Inhalte für mehr Details.
Diese Website hat Kopfzeilen sowohl mit X-Content-Security-Policy/Report-Only als auch Content-Security-Policy/Report-Only angegeben. Jene mit X-Content-Security-Policy/Report-Only werden ignoriert.Siehe Content Security Policy für mehr Details.
Die Kopfzeilen X-Content-Security-Policy und X-Content-Security-Report-Only werden in Zukunft nicht mehr unterstützt. Verwenden Sie bitte stattdessen die Kopfzeilen Content-Security-Policy und Content-Security-Report-Only mit CSP-Spezifikations-kompatibler Syntax.Siehe Content Security Policy für mehr Details.
Passwort-Felder sind auf einer unsicheren (http://) Seite vorhanden. Dies ist ein Sicherheitsrisiko, durch das Zugangsdaten gestohlen werden können.Seiten mit Anmeldeformularen müssen über HTTPS, nicht HTTP, bereitgestellt werden.
Passwort-Felder sind in einem Formular mit einer unsicheren (http://) Formular-aktion vorhanden. Dies ist ein Sicherheitsrisiko, durch das Zugangsdaten gestohlen werden können.Formulare mit Passwortfeldern müssen diese über HTTPS, nicht HTTP, absenden.
Passwort-Felder sind in einem unsicheren (http://) Iframe vorhanden. Dies ist ein Sicherheitsrisiko, durch das Zugangsdaten gestohlen werden können.iframes, die Anmeldeformulare beinhalten, müssen über HTTPS, nicht HTTP, bereitgestellt werden.
Diese Website hat eine ungültige Strict-Transport-Security-Kopfzeile angegeben.Siehe HTTP Strict Transport Security für mehr Details.
+ +

Bug 863874 ist ein Problembericht um für Sicherheit relevante Meldungen in der Web-Konsole zu sammeln. Wenn Sie mehr Ideen für nützliche Funktionen wie diese haben, oder einfach nur mitmachen wollen, schauen Sie sich den Fehlerbericht und die davon abhängigen an.

+ +

console API-Meldungen

+ +


+

+ +

Dieser Abschnitt beschreibt die Ausgaben der Web-Konsole für die console API-Aufrufe, die Ausgaben erzeugen. Für mehr oberflächliche Informationen über die console API, siehe folgende Dokumentationsseite.

+ +

Fehlermeldungen

+ + + + + + + + + + + + + + + + + + + + + + +
APIMeldungsinhalt
error() +

Argument für error().

+ + 
+console.error("an error");
+
exception()Alias für error().
assert() +
+

Neu in Firefox 29.

+
+ +

Wenn die Aussage erfolgreich ist, nichts. Wenn die Aussage fehlschlägt, Argument:

+ + 
+console.assert(false, "My assertion always fails");
+
+ +

Warnmeldungen

+ + + + + + + + + + + + + + +
APIMeldungsinhalt
warn() +

Argument für warn().

+ + 
+console.warn("a warning");
+
+ +

Informationsmeldungen

+ + + + + + + + + + + + + + +
APIMeldungsinhalt
info() +

Argument für info().

+ + 
+console.info("some info");
+
+ +

Meldungen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
APIMeldungsinhalt
count() +
+

Diese Meldung ist neu in Firefox 30.

+
+ +

Diese Beschreibung gibt an, ob und wie oft  count() aufgerufen wurde mit der gegebenen Beschriftung:

+ + 
+console.count(user.value);
+ +

+
log() +

Argument für log().

+ + 
+console.log("logged");
+
trace() +

Stack-Trace:

+ + 
+console.trace();
+
dir() +

Auflisten der Objekteigenschaften:

+ + 
+var user = document.getElementById('user');
+console.dir(user);
+
time() +

Benachrichtigung, dass der spezifische Timer gestartet wurde.

+ + 
+console.time("t");
+
timeEnd() +

Dauer für den spezifischen Timer.

+ + 
+console.timeEnd("t");
+
+ +

Gruppieren von Meldungen

+ +

Sie können console.group() benutzen um eingerückte Gruppen in der Konsolenausgabe zu erstellen. Siehe Gruppen in der Konsole benutzen für mehr Informationen.

+ +

Eingabe-/Ausgabemeldungen

+ +

Befehle, die dem Browser über die Kommandozeile der Web-Konsole geschickt wurden und die dazugehörigen Antworten werden mit Zeilen wie diese aufgezeichnet:

+ +

Die dunkelgraue Leiste gibt an, dass es sich um Eingabe-/Ausgabemeldungen handelt, während die Richtung, in die die Pfeile zeigen, zwischen Eingabe und Ausgabe unterscheidet.

+ +

Filtern und suchen

+ +

Sie können die Symbolleiste oben benutzen, um die angezeigten Ergebnisse zu verfeinern.

+ +

Sie können nur bestimmte Meldungen oder Meldungen, die einen bestimmten String enthalten, anzeigen lassen.

+ +

Zuletzt können Sie diese Symbolleiste benutzen um die Aufzeichnungen zu löschen.

+ +
+
+ +

Der Kommandozeileninterpreter

+ +

Sie können JavaScript-Ausdrücke mit der von der Web-Konsole bereitgestellten Kommandozeile in Echtzeit interpretieren.

+ +

+ +

Ausdrücke eingeben

+ +

Um Ausdrücke einzugeben, tippen Sie sie in die Kommandozeile ein und drücken Sie die Eingabetaste.

+ +

Die Eingabe, die Sie eintippen, wird in der Meldungsansicht zusammen mit dem Ergebnis angezeigt:

+ +

+ +

Auf Variablen zugreifen

+ +

Sie können auf Variablen, die auf der Seite definiert werden, zugreifen, egal ob eingebaute Variablen wie window oder Variablen, die von JavaScript-Code erstellt wurden, wie jQuery:

+ +

+ +

Automatische Vervollständigung

+ +

Die Kommandozeile hat eine automatische Vervollständigung: geben Sie die ersten Buchstaben ein und ein Dialogfenster mit möglichen Vervollständigungen erscheint:

+ +

Drücken Sie die Eingabe- oder Tabulatortaste um den Vorschlag zu übernehmen, benutzen Sie die Pfeiltasten um zu einem anderen Vorschlag zu gelangen, oder tippen Sie einfach weiter, wenn Ihnen keines der Vorschläge gefällt.

+ +

Die Konsole schlägt Vervollständigungen im Umfang des momentan ausgeführten Stack-Frames vor. Das heißt, wenn Sie ein Haltepunkt erreichen, bekommen Sie Vervollständigungen für für die Funktion lokale Objekte.

+ +

Ab Firefox 30 können auch Array-Elemente automatisch vervöllständigt werden:

+ +

+ +

Elemente untersuchen

+ +

Falls das Ergebnis ein Objekt ist, wird es kursiv dargestellt. Beim Anklicken erscheint eine Ansicht mit weiteren Informationen zum Objekt:

+ +

Um diese Ansicht zu schließen, drücken Sie die Escape-Taste.

+ +
+

Vor Firefox 30 erscheinen untersuchbare Objekte in eckigen Klammern und sind unterstrichen, wie [Objekt Funktion].

+
+ +

Variablen festlegen

+ +

Sie können Ihre eigenen Variablen festlegen und auf diese zugreifen:

+ +

+ +

Knoten hervorheben und untersuchen

+ +
+

Diese Funktion ist neu in Firefox 30.

+
+ +

Wenn Sie mit dem Mauszeiger über ein DOM-Element in der Konsolenausgabe fahren, wird es auf der Seite hervorgehoben:

+ +

In dem oberen Bildschirmfoto können Sie auch ein "Ziel"-Symbol in blau neben dem Knoten in der Konsolenausgabe sehen: klicken Sie darauf um den Knoten zu untersuchen.

+ +

Befehlsverlauf

+ +

Die Kommandozeile merkt sich Ihre eingegebenen Befehle: um durch den Verlauf zu navigieren, benutzen Sie die Pfeiltasten.

+ +

Mit iframes arbeiten

+ +
+

Diese Funktion ist neu in Firefox 30.

+
+ +

Wenn eine Seite über eingebettete iframes verfügt, können Sie den cd()-Befehl benutzen um den Umfang der Konsole auf einen spezifischen iframe zu setzen und Funktionen, die im iframe-Dokument definiert werden, auszuführen. Es gibt drei Wege um ein iframe mit cd() auszuwählen:

+ +

Sie können das iframe DOM-Element übergeben:

+ +
var frame = document.getElementById("frame1");
+cd(frame);
+ +

Sie können einen CSS-Selektor übergeben, der zum iframe gehört:

+ +
cd("#frame1");
+ +

Sie können den globalen Fensterobjekt des iframes übergeben:

+ +
var frame = document.getElementById("frame1");
+cd(frame.contentWindow);
+
+ +

Um zum übergeordneten Fenster zu wechseln, rufen Sie cd() ohne Argumente auf:

+ +
cd();
+ +

Nehmen wir beispielsweise an, wir haben ein Dokument, das ein iframe einbettet:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
+  </body>
+</html>
+ +

Der iframe definiert eine neue Funktion:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script>
+      function whoAreYou() {
+        return "I'm frame1";
+      }
+   </script>
+  </head>
+  <body>
+  </body>
+</html>
+ +

So können Sie den Umfang zum iframe wechseln:

+ +
cd("#frame1");
+ +

Nun werden Sie sehen, dass das Dokument des globalen Fensters der iframe ist:

+ +

Sie können auch die Funktion, die in dem iframe definiert wird, aufrufen:

+ +

+ +

Hilfsbefehle

+ +

{{ page("/en/Using_the_Web_Console/Helpers", "Die Befehle") }}

+ +

Die geteilte Konsole

+ +
+

Die geteilte Konsole ist neu in Firefox 28.

+
+ +

{{EmbedYouTube("G2hyxhPHyXo")}}

+ +

Ab Firefox 28 können Sie die Konsole zusammen mit anderen Werkzeugen benutzen. Während Sie in einem anderen Werkzeug in der Werkzeugkiste sind, drücken Sie die Escape-Taste oder die Schaltfläche "Erzwingen der Anzeige der Konsole umschalten, gegebenenfalls zusätzlich zum aktuellen Entwicklerwerkzeug" in der Werkzeugleiste. Die Werkzeugkiste wird nun geteilt dargestellt, mit dem ursprünglichen Werkzeug über der Web-Konsole.

+ +

Wie üblich funktioniert $0 als Abkürzung für das in der Ansicht "Element unterschen" ausgewählte Element:

+ +

Wenn Sie die geteilte Konsole zusammen mit dem Debugger benutzen, wird der Umfang der Konsole auf den momentan ausgeführten Stack-Frame beschränkt. Wenn Sie einen Haltepunkt einer Funktion erreichen, wird der Umfang auf diese Funktion beschränkt. Sie können in der Funktion definierte Objekte automatisch vervollständigen und spontan ändern:

+ +

+ +

Tastenkürzel

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "web-console") }}

+ +

Allgemeine Tastenkürzel

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git a/files/de/tools/webide/index.html b/files/de/tools/webide/index.html new file mode 100644 index 0000000000..def42cbac3 --- /dev/null +++ b/files/de/tools/webide/index.html @@ -0,0 +1,280 @@ +--- +title: WebIDE +slug: Tools/WebIDE +translation_of: Archive/WebIDE +--- +
{{ToolsSidebar}}
+

Die WebIDE ist verfügbar in Firexfox 34 und neuer

+ +

Du kannst sie aber auch schon in Firefox 33 aktivieren in dem du die Einstellungen veränderst: Besuche about:config, finde die Einstellung devtools.webide.enabled und stelle sie auf true um.

+
+ +
+

Die WebIDE ist der Ersatz des App Managers. Genauso wie der App Manager, kannst du mit der WebIDE Firefox OS Apps ausführen und debuggen mit dem Firefox OS Simulator oder einem richtigen Firefox OS Gerät

+ +

Darüber hinaus ist sie dir eine vollwertige Entwicklungsumgebung zur Erstellung und Bearbeitung deiner Firefox OS Apps.  WebIDE bietet eine Baumansicht zur strukturierten Anzeige, Bearbeitung und Sichern aller Dateien deiner App.  Für den leichten Einstieg helfen dir zwei App Templates.

+
+ +

{{EmbedYouTube("2xmj4W8O3E4")}}

+ +

Mit der WebIDE, musst du zuerst eine oder mehr Laufzeiten erstellen. Eine Laufzeit ist eine Umgebung, in der du deine App ausführst und debuggst. Eine Laufzeit kann ein Gerät mit Firefox OS sein, welches per USB verbunden ist oder auch der Firefox OS Simulator.

+ +

Als Nächstes öffnest oder erstellst du eine App. Falls du eine neue App erstellst, beginnst du mit einer Vorlage, die die Verzeichnisstruktur und die minimalen Textbausteine enthält, die du zu Anfang benötigst. Du kannst auch mit einer umfangreicheren Vorlage anfangen, die zeigt, wie du eine privilegierte API benutzt. Die WebIDE zeigt deine App-Dateien in einer Baumansicht und du kannst sie mit dem eingebauten Quelleditor bearbeiten und speichern. Natürlich kannst du deine Apps auch mit deinen bevorzugten Werkzeugen entwickeln und die WebIDE nur zur Fehlersuche benutzen.

+ +

Finally, you can install the app in one of the runtimes and run it. You can then open the usual suite of developer tools - the Inspector, Console, JavaScript Debugger and so on - to examine and modify the running app.

+ +

System requirements

+ +

To develop and debug apps using the WebIDE, all you need is Firefox version 33 or later. To test on a real Firefox OS device, you need a device running Firefox OS 1.2 or later, and a USB cable.

+ +

You can only use the WebIDE if you're targeting Firefox OS 1.2 or later.

+ +

Opening the WebIDE

+ +

In the Web Developer menu, click on the WebIDE entry and the WebIDE opens. You can also use the keybinding Shift-F8:The dropdown on the left labeled "Open App" lets you open existing apps or create new ones. The dropdown on the right labeled "Select Runtime" lets you select a runtime or set up a new runtime.

+ +

The buttons in the middle run, stop, and debug the app: they are only enabled when you have opened an app and selected a runtime.

+ +

Setting up runtimes

+ +

Under the "Select Runtime" dropdown, runtimes are grouped into three types:

+ + + +

The first time you click the dropdown, you might not see any runtimes here:

+ +

The rest of this section describes how you can add some runtimes.

+ +

Connecting a Firefox OS device

+ +

Before you can connect a Firefox OS device, there's some setup you have to go through:

+ + + +
+

Linux only:

+ + +
+ +
+

Windows only:

+ + +
+ +

If there are any other Android devices connected to your computer, disconnect them. Now connect the device to the computer using USB. You should see the device appear under "USB DEVICES":

+ +

+ +

If you don't see your device, see the Troubleshooting page.

+ +

Adding a Simulator

+ +

The Firefox OS Simulator is a version of the higher layers of Firefox OS that simulates a Firefox OS device, but runs on the desktop. It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.

+ +

This means that in many cases, you don't need a real device to test and debug your app.

+ +

The Simulator is big, so it doesn't ship inside Firefox but as a Firefox add-on. If you click "Install Simulator" in the Runtimes dropdown menu, you will go to a page from which you can install Simulators for various versions of Firefox OS.

+ +

You can install as many as you like. Be patient, though: the Simulator is large and may take a few minutes to download. Once you've installed some Simulators you can close this "Extra Components" window, and the Simulators you've installed appear as options in the Runtimes dropdown menu:

+ +

To learn more about the Simulator, see its documentation page.

+ +

Custom runtimes

+ +

With a custom runtime you can use an arbitrary hostname and port to connect to the remote device.

+ +

Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or ADB. By default, the WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.

+ +

This is convenient in most cases, but sometimes you might want to use ADB outside of the WebIDE: for example, you might be running ADB directly from the command line. In that case you'll connect to the device by specifying a host and port using the adb forward command.
+
+ If you then want to use WebIDE to connect as well, you should disable the ADB Helper add-on and connect WebIDE using the Custom runtime option, entering the host and port that you passed to adb forward.

+ +

Also, the ADB Helper does not yet support connecting to Firefox for Android, so if you want to connect WebIDE to Firefox for Android, you'll need to set up your own port forwarding and use a custom runtime. See more about connecting to Firefox for Android using ADB.

+ +

Selecting a runtime

+ +

Once you've set up a runtime you can select it using the "Select Runtime" menu.

+ + + +

Now the "play" button in the center of the WebIDE toolbar is enabled: click it to install and run the app in the selected runtime.

+ +

Runtime actions

+ +

When a runtime is selected, the Runtimes dropdown menu has three extra items:

+ + + +

+ +

+ +

Creating and opening apps

+ +

Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:

+ +

+ +

Create a new app

+ +

Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".

+ +

+ +

Both templates are from Mozilla's app template collection, and provide you with the basic structure you need to get started. The "Privileged App" shows how an app can use permissions to load cross-origin content.

+ +

Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the project editor.

+ +

Open a packaged app

+ +

Select "Open Packaged App..." to open a packaged app. You'll be asked to select a directory containing the app's manifest, and the app will be opened in the project editor.

+ +

Open a hosted app

+ +

Select "Open Hosted App..." to open a hosted app. You'll be asked to enter a URL pointing to the app's manifest, and the app will be opened in the project editor.

+ +

Editing apps

+ +

The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right.

+ +

The app summary page

+ +

When you first open or create an app, the editor pane is occupied by the app summary page, which is shown below:

+ +

+ +

You can always get back to the app summary page by clicking on the root of the tree on the left.

+ +

Manifest validation

+ +

The WebIDE automatically checks the manifest for certain common problems. If it finds a problem it indicates that the app is invalid and describes the problem in the app's summary:

+ +

+ +

Of course, you can edit the manifest.webapp file right in the project editor as well.

+ +

The source editor

+ +

The WebIDE uses the CodeMirror source editor.

+ +

Source editor shortcuts

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

+ +

Code completion

+ +

When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:

+ +

To display autocomplete suggestions in JavaScript press Control + Space:

+ +

+ +

Inline documentation

+ +

The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:

+ +

+ +

Clicking the [docs] link in the popup will take you to the MDN page for the symbol.

+ +

Saving files

+ +

For changes to your files to take effect you need to save them. Files with unsaved changes get an asterisk next to their name in the tree view, and you can save files using the menu or Control+S (Command+S on Mac OS X).

+ +

Removing projects

+ +

To remove an app from the WebIDE, go to the app summary page and click "Remove Project".

+ +

Running and debugging apps

+ +

When you're ready to run the app, you need to select a runtime from the "Select Runtime" dropdown menu. If you don't have any available runtimes here, find out how to add some in Setting up runtimes.

+ +

The "play" button in the center of the WebIDE toolbar is now enabled: click it to install and run the app in the selected runtime:

+ +

To debug the app, click the "Pause" button and the Developer Tools Toolbox appears, connected to your app:

+ +

Exactly which tools you'll have available depends on the runtime, but you will at least have the basics: the Inspector, Console, JavaScript Debugger, Style Editor, Profiler and Scratchpad. Just as in a web page, any changes you make in the tools are visible immediately in the app, but are not persistent. Conversely, any changes you make in the editor pane can be saved straight back to disk, but are not visible without restarting the app.

+ +

Debugging certified apps

+ +

With the Simulator, if you click on the app dropdown menu while the runtime is selected, you can see and debug not only your app but all apps running in that runtime, including certified apps:

+ +

+ +


+ However, to debug certified apps on a real device:

+ + + +

To enable certified app debugging, connect to the runtime, and then, in the menu, go to Runtime > Runtime Info. From here, if you see "DevTools restricted privileges: yes", that means certified apps can't be debugged. The path then differs depending on what you are debugging against:

+ + + +

Now (or after a restart of the B2G desktop client) in the WebIDE you should see all the certified apps on the device.

+ +

Monitoring performance

+ +

If you're interested in the performance of your apps, there are a few ways to measure their impact on the runtime in WebIDE:

+ + + +

Troubleshooting

+ +

If you have any problems working with the WebIDE, see the Troubleshooting page.

+ +

 

+ +

 

diff --git "a/files/de/tools/webide/probleml\303\266sung/index.html" "b/files/de/tools/webide/probleml\303\266sung/index.html" new file mode 100644 index 0000000000..1e15175d33 --- /dev/null +++ "b/files/de/tools/webide/probleml\303\266sung/index.html" @@ -0,0 +1,165 @@ +--- +title: WebIDE Problemlösung +slug: Tools/WebIDE/Problemlösung +translation_of: Archive/WebIDE/Troubleshooting +--- +
{{ToolsSidebar}}

Mit einem Firefox-OS-Gerät verbinden

+ +

Wenn du mit dem WebIDE eine Verbindung zu deinem Firefox-OS-Gerät herstellen möchtest, das Gerät aber nicht angezeigt wird, prüfe folgendes:

+ + + +

Über Wi-Fi mit Firefox OS verbinden

+ + + +

Über USB mit Firefox für Android verbinden

+ +

Wenn du versucht dich mit einer laufenden Firefox Anwendung auf deinem Android-Gerät zu verbinden und dieses nicht angezeigt wird, versuche folgendes:

+ + + +

Über Wi-Fi mit Firefox für Android verbinden

+ + + +

Verbindung zu anderen Browsern herstellen (Chrome, Safari, iOS)

+ +

WebIDE nutzt Valence (Firefox Tools Adapter), um sich mit anderen Browsern, wie Chrome, Safari oder iOS, zu verbinden.

+ +

Wenn du Probleme bei der Verbindung mit anderen Browsern hast, überprüfe die Installationsschritte und andere Hinweise für diese Browser auf der Valence-Seite.

+ +

Manche Apps sind nicht debuggbar

+ +

Wenn du der Meinung bist, dass zertifizierte Apps, eingebaute Apps oder bereits auf einem echten Gerät installierte Apps nicht debuggbar sind, dann kann dies durch die Restricted Privileges Security Policies des WebIDE (dt.: Sicherheitsrichtlinien für beschränkte Berechtigungen) ausgelöst werden. Für mehr Informationen sieh dir Unrestricted app debugging (including certified apps, main process, etc.) (dt.: Unbeschränktes App-Debugging) an.

+ +

Die Projekt-Liste kann nicht geladen werden

+ +

Wenn du das WebIDE in einer Firefox-Version öffnest und dann zu einer früheren Version von Firefox mit dem selben Profil wechselst, kann es passieren, dass der Fehler "Die Projekt-Liste kann nicht geladen werden" beim Öffnen des WebIDE mit der früheren Version auftritt.

+ +

Dieser Fehler tritt auf, da das vom WebIDE genutzte Speicherungssystem in neuere Versionen die Daten verschiebt und restrukturiert. Somit wird die Projekt-Liste unbenutzbar für frühere Versionen

+ +

Die Daten gehen dabei nicht verloren, aber du wirst die neueste Version von Firefox nutzen müssen, um deine Projekt-Liste nutzen zu können.

+ +

Wenn du wirklich eine ältere Version von Firefox benutzen willst, kannst du versuchen einfach die Projekt-Liste zu löschen, dieser Weg wird jedoch nicht empfohlen und wird nicht unterstützt. Es können Probleme auftreten und Daten verloren gehen.

+ +

Anleitung:

+ +
    +
  1. Schließe Firefox.
    2. +
  2. Öffne den Firefox-Profil-Ordner.
    3. +
  3. Öffne den darin enthaltenen storage-Ordner.
    4. +
  4. An manchen Stellen des Dateibaums sollten Dateien oder Ordner mit folgendem Namen beginnen: 4268914080AsptpcPerjo  (gehashter Name der Datenbank). +
      +
    • Beispielsweise kann solch eine Datei im Ordner /storage/permanent/indexeddb+++fx-devtools/idb sein.
      • +
    +
    5. +
  5. Lösche alle so aussehenden Dateien und Ordner.
    6. +
  6. Starte Firefox und WebIDE neu.
    7. +
+ +

Logging aktivieren

+ +

Du kannst auch die ausführliche Protokollierung aktivieren, um eine genauere Diagnose zu erhalten:

+ +
    +
  1. Öffne about:config.
    2. +
  2. Erstelle eine neue Einstellung, die extensions.adbhelper@mozilla.org.sdk.console.logLevel heißt. und den String-Inhalt all enthält.
    3. +
  3. Setze den Wert von extensions.adbhelper@mozilla.org.debug auf true.
    4. +
  4. Öffne den AddOns-Manager, deaktivere und reaktiviere das ADB Helper-AddOn.
    5. +
  5. Öffne die Browser-Konsole, dort kannst du nun Eintragungen mit dem Präfix adb sehen. Wenn dir diese Eintragungen nichts sagen, dann frage bitte nach Hilfe.
    6. +
+ +

Hilfe bekommen

+ +

Gehe in den #devtools room on IRC und es wird versucht dir zu helfen (Vorwiegend englischer IRChat).

diff --git a/files/de/tools/webide_clone/index.html b/files/de/tools/webide_clone/index.html new file mode 100644 index 0000000000..c0be23b241 --- /dev/null +++ b/files/de/tools/webide_clone/index.html @@ -0,0 +1,279 @@ +--- +title: WebIDE +slug: Tools/WebIDE_clone +--- +
{{ToolsSidebar}}
+

Die WebIDE ist in Firexfox 34 und neuer verfügbar

+ +

Du kannst sie bereits in Firefox 33 aktivieren. Besuche hierzu about:config, gehe zur Einstellung devtools.webide.enabled und setzte den Wert auf true.

+
+ +
+

Die WebIDE ersetzt den App Manager. Genau wie im App Manager kannst du mit der WebIDE Firefox OS Apps mithilfe des Firefox OS Simulator oder einem richtigen Firefox OS Gerät ausführen und debuggen.

+ +

Darüber hinaus ist es eine vollwertige Entwicklungsumgebung zur Erstellung und Bearbeitung deiner Firefox OS Apps. Sie bietet eine Baumansicht zur strukturierten Anzeige, Bearbeitung und Sicherung aller Dateien deiner App. Für die Erleichterung deines Einstiegs helfen dir zwei App Templates.

+
+ +

{{EmbedYouTube("2xmj4W8O3E4")}}

+ +

In der WebIDE, musst du zuerst ein oder mehrere Laufzeiten erstellen. Eine Laufzeit ist eine Umgebung, in der du deine Apps ausführst und debuggst. Sie ist entweder ein Firefox OS Gerät, welches per USB verbunden ist oder der Firefox OS Simulator.

+ +

Als nächstes kannst du eine App erstellen oder öffnen. Wenn du eine neue App öffnest beginnst du mit einem Template, welches bereits das mindeste an Ordnerstrucktur und Code enthält, was du für den Start benötigst. Du kannst auch mit einem umfangreicheren Code Template anfangen, welcher dir Zeigt, wie man mit privilegierte APIs umgeht. Deine App Dateien werden in einer Baumansicht dargestellt und mithilfe des eingebauten Quelleditors kannst du sie jederzeit komfortabel ändern und speichern. Natürlich kannst du auch mit deinem Quelleditor deiner Wahl arbeiten und die WebIDE nur zum debuggen verwenden.

+ +

Zum Schluss kannst du deine App in eine der Laufzeiten installieren und ausführen. Ab dann kannst du auch zu den üblichen Entwickler Tools, wie Inspector, Console, JavaScript Debugger und mehr zurückgreifen, um deine laufende App zu prüfen und modifizieren.

+ +

Systemanforderungen

+ +

Alles was du zum Entwickeln und Debugging mit der WebIDE benötigst ist Firefox Version 33 oder höher. Zum Test deiner App auf einem echten Firefox OS Gerät benötigst du ein Gerät mit min. Firefox OS 1.2 und einem USB Kabel.

+ +

Du kannst die WebIDE nur nutzen, wenn du dich auf Firefox OS 1.2 oder höher ausrichtest.

+ +

Öffnen der WebIDE

+ +

Klick hierzu im Web Entwickler Menü auf den WebIDE Eintrag. Die WebIDE sollte sich öffnen. Alternativ kannst du auch die Tastenkombination Shift-F8 nutzen:The dropdown on the left labeled "Open App" lets you open existing apps or create new ones. The dropdown on the right labeled "Select Runtime" lets you select a runtime or set up a new runtime.

+ +

The buttons in the middle run, stop, and debug the app: they are only enabled when you have opened an app and selected a runtime.

+ +

Setting up runtimes

+ +

Under the "Select Runtime" dropdown, runtimes are grouped into three types:

+ + + +

The first time you click the dropdown, you might not see any runtimes here:

+ +

The rest of this section describes how you can add some runtimes.

+ +

Connecting a Firefox OS device

+ +

Before you can connect a Firefox OS device, there's some setup you have to go through:

+ + + +
+

Linux only:

+ + +
+ +
+

Windows only:

+ + +
+ +

If there are any other Android devices connected to your computer, disconnect them. Now connect the device to the computer using USB. You should see the device appear under "USB DEVICES":

+ +

+ +

If you don't see your device, see the Troubleshooting page.

+ +

Adding a Simulator

+ +

The Firefox OS Simulator is a version of the higher layers of Firefox OS that simulates a Firefox OS device, but runs on the desktop. It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.

+ +

This means that in many cases, you don't need a real device to test and debug your app.

+ +

The Simulator is big, so it doesn't ship inside Firefox but as a Firefox add-on. If you click "Install Simulator" in the Runtimes dropdown menu, you will go to a page from which you can install Simulators for various versions of Firefox OS.

+ +

You can install as many as you like. Be patient, though: the Simulator is large and may take a few minutes to download. Once you've installed some Simulators you can close this "Extra Components" window, and the Simulators you've installed appear as options in the Runtimes dropdown menu:

+ +

To learn more about the Simulator, see its documentation page.

+ +

Custom runtimes

+ +

With a custom runtime you can use an arbitrary hostname and port to connect to the remote device.

+ +

Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or ADB. By default, the WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.

+ +

This is convenient in most cases, but sometimes you might want to use ADB outside of the WebIDE: for example, you might be running ADB directly from the command line. In that case you'll connect to the device by specifying a host and port using the adb forward command.
+
+ If you then want to use WebIDE to connect as well, you should disable the ADB Helper add-on and connect WebIDE using the Custom runtime option, entering the host and port that you passed to adb forward.

+ +

Also, the ADB Helper does not yet support connecting to Firefox for Android, so if you want to connect WebIDE to Firefox for Android, you'll need to set up your own port forwarding and use a custom runtime. See more about connecting to Firefox for Android using ADB.

+ +

Selecting a runtime

+ +

Once you've set up a runtime you can select it using the "Select Runtime" menu.

+ + + +

Now the "play" button in the center of the WebIDE toolbar is enabled: click it to install and run the app in the selected runtime.

+ +

Runtime actions

+ +

When a runtime is selected, the Runtimes dropdown menu has three extra items:

+ + + +

+ +

+ +

Creating and opening apps

+ +

Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:

+ +

+ +

Create a new app

+ +

Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".

+ +

+ +

Both templates are from Mozilla's app template collection, and provide you with the basic structure you need to get started. The "Privileged App" shows how an app can use permissions to load cross-origin content.

+ +

Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the project editor.

+ +

Open a packaged app

+ +

Select "Open Packaged App..." to open a packaged app. You'll be asked to select a directory containing the app's manifest, and the app will be opened in the project editor.

+ +

Open a hosted app

+ +

Select "Open Hosted App..." to open a hosted app. You'll be asked to enter a URL pointing to the app's manifest, and the app will be opened in the project editor.

+ +

Editing apps

+ +

The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right.

+ +

The app summary page

+ +

When you first open or create an app, the editor pane is occupied by the app summary page, which is shown below:

+ +

+ +

You can always get back to the app summary page by clicking on the root of the tree on the left.

+ +

Manifest validation

+ +

The WebIDE automatically checks the manifest for certain common problems. If it finds a problem it indicates that the app is invalid and describes the problem in the app's summary:

+ +

+ +

Of course, you can edit the manifest.webapp file right in the project editor as well.

+ +

The source editor

+ +

The WebIDE uses the CodeMirror source editor.

+ +

Source editor shortcuts

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

+ +

Code completion

+ +

When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:

+ +

To display autocomplete suggestions in JavaScript press Control + Space:

+ +

+ +

Inline documentation

+ +

The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:

+ +

+ +

Clicking the [docs] link in the popup will take you to the MDN page for the symbol.

+ +

Saving files

+ +

For changes to your files to take effect you need to save them. Files with unsaved changes get an asterisk next to their name in the tree view, and you can save files using the menu or Control+S (Command+S on Mac OS X).

+ +

Removing projects

+ +

To remove an app from the WebIDE, go to the app summary page and click "Remove Project".

+ +

Running and debugging apps

+ +

When you're ready to run the app, you need to select a runtime from the "Select Runtime" dropdown menu. If you don't have any available runtimes here, find out how to add some in Setting up runtimes.

+ +

The "play" button in the center of the WebIDE toolbar is now enabled: click it to install and run the app in the selected runtime:

+ +

To debug the app, click the "Pause" button and the Developer Tools Toolbox appears, connected to your app:

+ +

Exactly which tools you'll have available depends on the runtime, but you will at least have the basics: the Inspector, Console, JavaScript Debugger, Style Editor, Profiler and Scratchpad. Just as in a web page, any changes you make in the tools are visible immediately in the app, but are not persistent. Conversely, any changes you make in the editor pane can be saved straight back to disk, but are not visible without restarting the app.

+ +

Debugging certified apps

+ +

With the Simulator, if you click on the app dropdown menu while the runtime is selected, you can see and debug not only your app but all apps running in that runtime, including certified apps:

+ +

+ +


+ However, to debug certified apps on a real device:

+ + + +

To enable certified app debugging, connect to the runtime, and then, in the menu, go to Runtime > Runtime Info. From here, if you see "DevTools restricted privileges: yes", that means certified apps can't be debugged. The path then differs depending on what you are debugging against:

+ + + +

Now (or after a restart of the B2G desktop client) in the WebIDE you should see all the certified apps on the device.

+ +

Monitoring performance

+ +

If you're interested in the performance of your apps, there are a few ways to measure their impact on the runtime in WebIDE:

+ + + +

Troubleshooting

+ +

If you have any problems working with the WebIDE, see the Troubleshooting page.

+ +

 

+ +

 

-- cgit v1.2.3-54-g00ecf