From 4ab365b110f2f1f2b736326b7059244a32115089 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:45:38 +0100 Subject: unslug de: move --- .../tools/add-ons/dom_inspector/index.html | 89 +++++++ files/de/orphaned/tools/add-ons/index.html | 17 ++ files/de/orphaned/tools/webide_clone/index.html | 279 +++++++++++++++++++++ 3 files changed, 385 insertions(+) create mode 100644 files/de/orphaned/tools/add-ons/dom_inspector/index.html create mode 100644 files/de/orphaned/tools/add-ons/index.html create mode 100644 files/de/orphaned/tools/webide_clone/index.html (limited to 'files/de/orphaned/tools') diff --git a/files/de/orphaned/tools/add-ons/dom_inspector/index.html b/files/de/orphaned/tools/add-ons/dom_inspector/index.html new file mode 100644 index 0000000000..20c3654c81 --- /dev/null +++ b/files/de/orphaned/tools/add-ons/dom_inspector/index.html @@ -0,0 +1,89 @@ +--- +title: DOM Inspector +slug: DOM_Inspector +translation_of: Tools/Add-ons/DOM_Inspector +--- +
{{ToolsSidebar}}

Der DOM Inspector (auch bekannt als DOMi) ist ein Entwicklertool, das zum Besichtigen, Durchsuchen und Editieren des Document Object Model von Dokumenten benutzt wird  - normalerweise Websiten oder XUL Fenster. Die DOM Hierarchie kann mit Hilfe eines zweigeteilten Fensters navigiert werden, welches die Vielfalt von verschiedenen Ansichten auf das Dokument und alle darin enthaltenen Nodes erlaubt.

+ + + + + + + + +
+

Dokumentation

+ +
+
Einführung in den DOM Inspector
+
Ein geführtes Tutorials, welches beim Einstieg in den DOM Inspector hilft.
+
+ +
+
DOM Inspector FAQ
+
Antworten zu den verbreitesten Fragen bezüglich des DOM Inspectors.
+
+ +
+
DOM Inspector Seite auf MozillaZine
+
Mehr Informationen zum DOM Inspector.
+
+ +

Erhalte DOM Inspector

+ +
+
Firefox & Thunderbird
+
Der DOM Inspector muss von der AMO Website gedownloadet  und installiert werden. (Thunderbird Benutzer, welche die AMO Website in Firefox öffnen sollten den Installationslink speichern, oder die DOM Inspector für Thunderbird Seite besuchen.)
+
+ +
+
Thunderbird 2
+
DOM Inspector für Thunderbird 2 ist auf Thunderbird Add-ons verfügbar. Oder, konstruiere deinen Thunderbird selbst mit den folgenden Optionen:
+
+ + 
+ac_add_options --enable-extensions="default inspector"
+ac_add_options --enable-inspector-apis
+
+ +
+
Mozilla Suite and SeaMonkey
+
Wähle Extras > Web-Entwickler > DOM Inspector. Du kannst die Sidebar mit Bearbeiten > Bevorzugung > Erweitert > DOM Inspector installieren, danach einfach das Inspector Panel öffnen und eine Website besuchen.
+
+ 		+

Gemeinschaft

+ +
    +
  • View Mozilla forums...
    • +
  • {{ DiscussionList("dev-apps-dom-inspector", "mozilla.dev.apps.dom-inspector") }}
    • +
+ +

Melde einen Fehler im DOM Inspector

+ +

Benutze die passend benannte "DOM Inspector" Komponente in Bugzilla.

+ +

Um herauszufinden, wer den DOM Inspector Code kennt und wo es lebt, siehe die DOM Inspector Module Auflistung.

+ +

Siehe auch

+ +

Firebug ist ein funktionalere und einfachere Erweiterung von den Ersteller des DOM Inspectors.

+ + + +
+
DOM, HTML, XUL, Web Entwicklung
+
+
+ +
+

Original Document Information

+ + +
+ +

{{ languages( { "es": "es/DOM_Inspector", "it": "it/DOM_Inspector", "fr": "fr/Inspecteur_DOM", "ja": "ja/DOM_Inspector", "ko": "ko/DOM_Inspector", "pl": "pl/Inspektor_DOM" } ) }}

diff --git a/files/de/orphaned/tools/add-ons/index.html b/files/de/orphaned/tools/add-ons/index.html new file mode 100644 index 0000000000..24ffbe79e9 --- /dev/null +++ b/files/de/orphaned/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/orphaned/tools/webide_clone/index.html b/files/de/orphaned/tools/webide_clone/index.html new file mode 100644 index 0000000000..c0be23b241 --- /dev/null +++ b/files/de/orphaned/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