Remotedebuggen von Windows-Geräten

Remotedebuggen von Liveinhalten auf einem Windows 10 oder höher von Ihrem Windows- oder macOS-Computer.

In diesem Tutorial lernen Sie die folgenden Aufgaben kennen:

• Richten Sie Ihr Windows-Gerät für das Remotedebuggen ein, und stellen Sie von Ihrem Entwicklungscomputer aus eine Verbindung damit her.

• Überprüfen und debuggen Sie Liveinhalte auf Ihrem Windows-Gerät von Ihrem Entwicklungscomputer aus.

• Screencastinhalt von Ihrem Windows-Gerät auf eine DevTools-instance auf Ihrem Entwicklungscomputer.

Schritt 1: Einrichten des Hosts (Debugcomputer)

Der Host- oder Debugcomputer ist das Windows 10 oder höher, das Sie debuggen möchten. Es kann sich um ein Remotegerät handelt, auf das Sie nur schwer zugreifen können, oder es verfügt möglicherweise nicht über Tastatur- und Maus-Peripheriegeräte, was die Interaktion mit den Microsoft Edge DevTools auf diesem Gerät erschwert.

So richten Sie den Hostcomputer (debuggee) ein:

1. Installieren und Konfigurieren von Microsoft Edge

2. Installieren der Remotetools für Microsoft Edge (Beta) aus dem Microsoft Store

3. Aktivieren des Entwicklermodus und Aktivieren des Geräteportals

Installieren und Konfigurieren von Microsoft Edge

1. Wenn Sie dies noch nicht getan haben, installieren Sie Microsoft Edge auf dem Windows 10 oder höher, das Sie debuggen möchten, über diese Seite.

2. Wenn Sie eine vorinstallierte Version von Microsoft Edge auf dem Hostcomputer (debuggee) verwenden, vergewissern Sie sich, dass Microsoft Edge (Chromium) und nicht Microsoft Edge (EdgeHTML) vorhanden ist. Eine schnelle Möglichkeit, dies zu überprüfen, besteht darin, im Browser zu laden edge://settings/help und zu bestätigen, dass die Versionsnummer 75 oder höher ist.

3. Wechseln Sie in Microsoft Edge zu edge://flags .

4. Geben Sie unter Suchflags die Zeichenfolge Remotedebugging über das Windows-Geräteportal aktivieren ein. Legen Sie dieses Flag auf Aktiviert fest. Klicken Sie dann auf die Schaltfläche Neu starten , um Microsoft Edge neu zu starten.

Installieren der Remotetools für Microsoft Edge (Beta)

Installieren Sie die Remotetools für Microsoft Edge (Beta) aus dem Microsoft Store.

Die Schaltfläche Abrufen für die Remotetools für Microsoft Edge (Beta) ist möglicherweise deaktiviert, wenn Sie Windows 10 oder höher version 1809 oder früher verwenden. Um den Hostcomputer (debuggee) einzurichten, muss er Windows 10 Version 1903 oder höher ausgeführt werden. Aktualisieren Sie den Hostcomputer (debuggee), um die Remotetools für Microsoft Edge (Beta) zu erhalten.

Starten Sie Remotetools für Microsoft Edge (Beta), und akzeptieren Sie das Dialogfeld "Berechtigungen" in der App, wenn Sie dazu aufgefordert werden. Sie können die Remotetools für Microsoft Edge (Beta) jetzt schließen und müssen sie nicht für zukünftige Remotedebuggingsitzungen geöffnet haben.

Aktivieren des Entwicklermodus und Aktivieren des Geräteportals

Wenn Sie sich in einem WLAN-Netzwerk befinden, stellen Sie sicher, dass das Netzwerk als Domäne oder Privat gekennzeichnet ist. Sie können den Zustand überprüfen, indem Sie die Windows-Sicherheit-App öffnen, Firewall & Netzwerkschutz auswählen und überprüfen, ob Ihr Netzwerk als Domänennetzwerk oder privates Netzwerk aufgeführt ist.

Wenn Ihr Netzwerk als öffentlich aufgeführt ist, wechseln Sie zu Einstellungen>Netzwerk &Internet-WLAN>, klicken Sie auf Ihr Netzwerk, und schalten Sie die Schaltfläche Netzwerkprofil auf Privat um.

Öffnen Sie nun die App "Einstellungen" . Geben Sie unter Einstellung suchen die Einstellung ein Developer settings , und wählen Sie sie aus. Schalten Sie den Entwicklermodus ein. Sie können jetzt das Geräteportal aktivieren, indem Sie Remote-Diagnose über lokale Netzwerkverbindungen aktivieren auf Ein festlegen. Sie können dann optional die Authentifizierung aktivieren, sodass das Clientgerät (Debugger) die richtigen Anmeldeinformationen angeben muss, um eine Verbindung mit diesem Gerät herzustellen.

Wenn Remote-Diagnose über lokale Netzwerkverbindungen aktivieren. zuvor aktiviert war, müssen Sie es deaktivieren und wieder aktivieren, damit das Geräteportal mit den Remotetools für Microsoft Edge (Beta) funktioniert. Wenn der Abschnitt Für Entwickler in den Einstellungen nicht angezeigt wird, ist das Geräteportal möglicherweise bereits aktiviert. Versuchen Sie stattdessen, das Windows 10 gerät oder höher neu zu starten.

Notieren Sie sich die IP-Adresse und den Verbindungsport des Computers, die unter Verbinden mit: angezeigt werden. Die IP-Adresse in der folgenden Abbildung lautet 192.168.86.78 , und der Verbindungsport lautet 50080:

Im nächsten Abschnitt geben Sie die Informationen auf dem Clientgerät (Debugger) ein. Öffnen Sie Registerkarten in Microsoft Edge und progressive Web-Apps (PWAs) auf dem Hostcomputer (debuggee), den Sie über den Clientcomputer (Debugger) debuggen möchten.

Schritt 2: Einrichten des Clients (Debuggercomputer)

Der Client- oder Debuggercomputer ist das Gerät, von dem aus Sie debuggen möchten. Dieses Gerät kann Ihr täglicher Entwicklungscomputer sein, oder es kann nur Ihr PC oder MacBook sein, wenn Sie von zu Hause aus arbeiten.

1. Um den Clientcomputer (Debugger) einzurichten, installieren Sie Microsoft Edge auf dieser Seite , sofern noch nicht geschehen.

2. Wenn Sie eine vorinstallierte Version von Microsoft Edge auf dem Hostcomputer (debuggee) verwenden, vergewissern Sie sich, dass Microsoft Edge (Chromium) und nicht Microsoft Edge (EdgeHTML) vorhanden ist. Eine schnelle Möglichkeit, dies zu überprüfen, besteht darin, im Browser zu laden edge://settings/help und zu bestätigen, dass die Versionsnummer 75 oder höher ist.

3. Wechseln Sie zur edge://inspect Seite in Microsoft Edge. Standardmäßig sollten Sie sich im Abschnitt Geräte befinden.

4. Geben Sie unter Verbindung mit einem Windows-Remotegerät herstellen die IP-Adresse und den Verbindungsport des Hostcomputers (debuggee) in das Textfeld nach folgendem Muster ein: http://IP address:connection port.

5. Klicken Sie auf Mit Gerät verbinden.

   

6. Wenn Sie die Authentifizierung für den Hostcomputer (Debuggen) einrichten, werden Sie aufgefordert, den Benutzernamen und das Kennwort für den Clientcomputer (Debugger) einzugeben, damit die Verbindung erfolgreich hergestellt werden kann.

Verwenden von https anstelle von HTTP

Wenn Sie eine Verbindung mit dem Hostcomputer (debuggee) herstellen möchten, indem Sie https anstelle von httpverwenden:

1. Wechseln Sie in Microsoft Edge auf dem Clientcomputer (Debugger) zu http://IP address:50080/config/rootcertificate . Dadurch wird automatisch ein Sicherheitszertifikat mit dem Namen heruntergeladen rootcertificate.cer.

2. Wählen Sie aus rootcertificate.cer. Dadurch wird das Windows-Zertifikat-Manager-Tool geöffnet.

3. Klicken Sie auf Zertifikat installieren..., stellen Sie sicher, dass Aktueller Benutzer aktiviert ist, und klicken Sie dann auf Weiter.

4. Klicken Sie auf Alle Zertifikate im folgenden Speicher speichern und dann auf Durchsuchen....

5. Wählen Sie den Speicher Vertrauenswürdige Stammzertifizierungsstellen aus, und klicken Sie dann auf OK.

6. Klicken Sie auf Weiter und dann auf Fertig stellen.

7. Wenn Sie dazu aufgefordert werden, bestätigen Sie, dass Sie dieses Zertifikat im Speicher für vertrauenswürdige Stammzertifizierungsstellen installieren möchten.

8. Wenn Sie nun über den Clientcomputer (Debugger) mithilfe der Seite eine Verbindung mit edge://inspect dem Hostcomputer (Debuggen) herstellen, müssen Sie einen anderen connection port Wert verwenden. Standardmäßig verwendet 50080 das Geräteportal für Desktop-Windows als connection porthttp. Für httpsverwendet 50043 das Geräteportal daher das folgende Muster: https://IP address:50043 auf der edge://inspect Seite. Erfahren Sie mehr über die Standardports, die vom Geräteportal verwendet werden.

Standardports

Der Standardport für http ist 50080 und der Standardport für https ist 50043, aber dies ist nicht immer der Fall, da Device Portal auf Desktop-Anspruchsports im kurzlebigen Bereich (>50.000) ansprüche, um Konflikte mit vorhandenen Portansprüchen auf dem Gerät zu verhindern. Weitere Informationen finden Sie im Abschnitt Porteinstellungen für das Geräteportal auf dem Windows-Desktop.

Schritt 3: Debuggen von Inhalten auf dem Host vom Client

Wenn der Clientcomputer (Debugger) erfolgreich eine Verbindung mit dem Hostcomputer (debuggee) herstellt, zeigt die edge://inspect Seite auf dem Client jetzt eine Liste der Registerkarten in Microsoft Edge und alle geöffneten PWAs auf dem Host an.

Bestimmen Sie den Inhalt, den Sie debuggen möchten, und klicken Sie dann auf Überprüfen. Die Microsoft Edge DevTools werden auf einer neuen Registerkarte geöffnet und der Inhalt wird vom Hostcomputer (debuggee) auf den Clientcomputer (Debugger) übertragen. Sie können jetzt die volle Leistungsfähigkeit von Microsoft Edge DevTools auf dem Client für Inhalte nutzen, die auf dem Host ausgeführt werden. Weitere Informationen zur Verwendung der Microsoft Edge DevTools finden Sie hier.

Überprüfen von Elementen

Versuchen Sie beispielsweise, ein Element zu untersuchen. Wechseln Sie zum Elementtool Ihrer DevTools-instance auf dem Client, und zeigen Sie auf ein Element, um es im Viewport des Hostgeräts hervorzuheben.

Sie können auch auf ein Element auf dem Bildschirm Ihres Hostgeräts tippen, um es im Tool Elemente auszuwählen. Wählen Sie Element auswählen in Ihrer DevTools-instance auf dem Client aus, und tippen Sie dann auf das Element auf dem Bildschirm Ihres Hostgeräts.

Wählen Sie Element ist nach der ersten Berührung deaktiviert aus, sodass Sie es jedes Mal wieder aktivieren müssen, wenn Sie dieses Feature verwenden möchten.

Wichtig

Der Bereich Ereignislistener im Tool Elemente ist in Windows 10 Version 1903 leer. Dies ist ein bekanntes Problem, und das Team plant, den Bereich Ereignislistener in einem Wartungsupdate auf Windows 10 Version 1903 zu beheben.

Schritt 4: Screencast ihres Hostbildschirms auf Ihr Clientgerät

Standardmäßig ist für die DevTools-instance auf dem Client screencasting aktiviert, sodass Sie den Inhalt auf dem Hostgerät in Ihrer DevTools-instance auf Ihrem Clientgerät anzeigen können. Klicken Sie auf Screencast umschalten , um dieses Feature zu aktivieren oder zu deaktivieren.

Sie können auf verschiedene Arten mit dem Screencast interagieren:

• Klicks werden in Taps übersetzt, die richtige Touchereignisse auf dem Gerät auslösen.
• Tastaturanschläge auf Ihrem Computer werden an das Gerät gesendet.
• Um eine Zusammendrückbewegung zu simulieren, halten Sie während des Ziehens die UMSCHALTTASTE gedrückt.
• Verwenden Sie zum Scrollen Ihr Trackpad oder Mausrad, oder zeigen Sie mit dem Mauszeiger.

Hinweise zu Screencasts:

• Screencasts zeigen nur Seiteninhalte an. Transparente Teile des Screencasts stellen Geräteschnittstellen dar, z. B. die Microsoft Edge-Adressleiste, die Windows 10 oder höher taskleiste und die Windows 10 oder höher Tastatur.

• Screencasts wirken sich negativ auf die Bildfrequenzen aus. Deaktivieren Sie screencasting beim Messen von Bildläufen oder Animationen, um ein genaueres Bild von der Leistung Ihrer Seite zu erhalten.

• Wenn der Bildschirm Ihres Hostgeräts gesperrt wird, wird der Inhalt des Screencasts nicht mehr angezeigt. Entsperren Sie den Bildschirm Ihres Hostgeräts, um den Screencast automatisch fortzusetzen.

Bekannte Probleme

• Der Bereich Ereignislistener im Tool Elemente ist in Windows 10 Version 1903 leer. Das Team plant, den Bereich Ereignislistener in einem Wartungsupdate auf Windows 10 Version 1903 zu korrigieren.

• Der Bereich Cookies im Bereich Anwendung ist in Windows 10 Version 1903 leer. Das Team plant, den Bereich Cookies in einem Dienstupdate auf Windows 10 Version 1903 zu korrigieren.

• Das Überwachungstool , das 3D-Ansichtstool , der Abschnitt Emulierte Geräte in den Einstellungen und der Bereich Barrierefreiheitsstruktur im Tool Elemente funktionieren derzeit nicht wie erwartet.

• Der Datei-Explorer wird beim Remotedebuggen nicht über die DevTools im Quellentool oder im Bereich Sicherheit gestartet.