1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
---
title: Externes Debugging mit Firefox for Android
slug: Tools/Remote_Debugging/Firefox_for_Android
translation_of: Tools/Remote_Debugging/Firefox_for_Android
---
<div>{{ToolsSidebar}}</div><p>Diese Anleitung erklärt, wie man <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_usage_tips/Remote_debugging">remote debugging</a> verwendet, um Code unter <a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android</a> über USB zu inspizieren und zu debuggen.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5833/remote-debugging-overview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p>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.</p>
<h2 id="Voraussetzungen">Voraussetzungen</h2>
<p>Um zu beginnen, benötigen Sie folgendes:</p>
<ul>
<li>einen Computer oder Laptop mit Firefox</li>
<li>ein Android-Mobilgerät mit Firefox for Android installiert </li>
<li>ein USB-Kabel, um das Mobilgerät mit dem Computer zu verbinden</li>
</ul>
<h3 id="ADB_Installation">ADB Installation</h3>
<p>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 <a href="https://developer.android.com/tools/help/adb.html">adb</a> Kommandozeilen-Programm verwendet.</p>
<h4 class="note" id="Auf_dem_Android-Mobilgerät">Auf dem Android-Mobilgerät</h4>
<ul>
<li><a href="http://developer.android.com/guide/developing/device.html#setting-up">USB Debugging aktivieren (nur Schritt 2 von diesem Link)</a>.</li>
<li>Schliessen Sie das Mobilgerät über USB an den Computer an</li>
</ul>
<h4 class="note" id="Auf_dem_ComputerLaptop">Auf dem Computer/Laptop</h4>
<ul>
<li>Installieren Sie die passende <a href="http://developer.android.com/sdk/index.html">Android SDK</a> Version für Ihr Mobilgerät.</li>
<li>Installieren die <a href="http://developer.android.com/sdk/installing.html#components">Android Platform Tools</a> mit Hilfe des Android SDK.</li>
<li>Android Platform Tools installiert adb im "platform-tools" Ordner im Android-SDK-Installationspfad. Stellen Sie sicher, dass der "platform-tools" Ordner in der PATH-Variable eingetragen ist.</li>
</ul>
<p>Um dies zu testen, können Sie folgenden Befehl in der Kommandozeile eingeben:</p>
<pre>adb devices</pre>
<p>Nun sehen Sie eine Ausgabe analog zu folgender:</p>
<pre>List of devices attached
51800F220F01564 device
</pre>
<p>(Die lange Hex-Zeichenkette wird verschieden sein.)</p>
<p>Wenn diese Ausgabe korrekt ist, wurde ADB korrekt installiert und ADB konnte das Mobilgerät korrekt erkennen.</p>
<p>Falls unter OSX die Zeile unterhalb von "List of devices attached" leer sein sollte, könnte es an EasyTether liegen:</p>
<blockquote>
<p>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/</p>
<p>(Aus der Webseite von EasyTether)</p>
</blockquote>
<h3 id="Remote_Debugging_aktivieren">Remote Debugging aktivieren</h3>
<p>Als nächstes muss "Remote Debugging" auf dem Mobilgerät und dem Computer aktiviert werden.</p>
<h4 id="Firefox_for_Android_24_und_früher">Firefox for Android 24 und früher</h4>
<p>Um "Remote Debugging" auf dem Mobilgerät zu aktivieren, muss der Wert der <code>devtools.debugger.remote-enabled</code> Einstellung auf <code>true</code> gesetzt werden.</p>
<p>Gehen Sie nach <code>about:config</code> 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 <code>devtools Einstellung debugger.remote-enabled</code> auf <code>true</code>, indem Sie auf "Umschalten" klicken.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5803/remote-debugger-about-config-toggle.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h4 class="note" id="Firefox_for_Android_25_und_später">Firefox for Android 25 und später</h4>
<p>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":</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5829/remote-debugging-device-enable.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p>Der Browser zeigt nun eine Notifikation an, dass die Portweiterleitung noch aktiviert werden muss. Dies werden wir später machen.</p>
<h4 id="Auf_dem_Computer">Auf dem Computer</h4>
<p>Auf dem Computer wird "Remote debugging" über die Entwicklerwerkzeuge aktiviert. <a href="/en-US/docs/Tools_Toolbox" title="/en-US/docs/Tools_Toolbox">Öffnen Sie die Entwicklerwerkzeuge</a>, klicken Sie auf die "Einstellungen" Schaltfläche in der Symbolleiste und aktivieren Sie das Kontrollkästchen neben "Externes Debugging aktivieren":</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5827/remote-debugger-toolbox-settings.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<div class="Note">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...":</div>
<div class="Note"> </div>
<p><img alt="" src="https://mdn.mozillademos.org/files/5811/remote-debugging-connect-menuitem.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h2 id="Verbinden">Verbinden</h2>
<p>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.</p>
<h4 class="note" id="Auf_dem_Computer_2">Auf dem Computer</h4>
<p>Öffnen Sie ein Kommandozeilen-Fenster und tippen Sie:</p>
<pre>adb forward tcp:6000 tcp:6000</pre>
<p>(Falls Sie den zu verwendeten Port auf dem Android-Mobilgerät geändert haben, müssen Sie hier den geänderten Wert eintragen.)</p>
<p>Für Firefox OS, tippen Sie:</p>
<pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre>
<p>Diesen Befehl müssen Sie immer ausführen, wenn das Mobilgerät über USB-Kabel an den Computer angeschlossen wird.</p>
<p>Gehen Sie nun ins "Web-Entwickler" Menü und wählen Sie "Verbinden...". Sie werden folgende Seite sehen:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5813/remote-debugging-desktop-connect.png" style="display: block; margin-left: auto; margin-right: auto;">Sofern Sie den Android-Port nicht geändert haben, wählen Sie hier 6000 und drücken auf "Verbinden".</p>
<h4 class="note" id="Auf_dem_Android-Mobilgerät_2">Auf dem Android-Mobilgerät</h4>
<p>Nun sehen Sie auf Ihrem Mobilgerät folgende Meldung, da sich nun Firefox mit Ihrem Mobilgerät verbinden möchte.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5815/remote-debugging-device-connect.png" style="display: block; margin-left: auto; margin-right: auto;">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.</p>
<h4 class="note" id="Auf_dem_Computer_3">Auf dem Computer</h4>
<p>Als nächsten sehen Sie auf Ihrem Computer folgende Anzeige:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5819/remote-debugging-desktop-select-target.png" style="display: block; margin-left: auto; margin-right: auto;">Nun werden Sie gefragt, ob Sie den Code in einem Browser Tab oder den Browser selbst debuggen möchten.</p>
<ul>
<li>Sie sehen jeweils pro geöffnetem Tab einen Eintrag unter "Verfügbare externe <span class="highlight">Tabs</span>". Sobald Sie auf den gewünschten Tab klicken, wird der Debugger an den Inhalt dieses Tabs angehängt. Wählen Sie diese Option, wenn Sie den Inhalt eines Tabs debuggen möchten.</li>
<li>Sie sehen einen Eintrag unter "Verfügbare externe Prozesse": das ist der Browser selbst. Wählen Sie diese Option, wenn Sie den Browser selbst debuggen möchten.</li>
</ul>
<p>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:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5821/remote-debugging-console.png" style="display: block; margin-left: auto; margin-right: auto;">Die Entwicklerwerkzeuge unterscheiden nicht zwischen lokalem Inhalt und Inhalt auf anderen Geräten. Sie funktionieren in beiden Fällen identisch.<img alt="" src="https://mdn.mozillademos.org/files/5823/remote-debugging-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
|
