Remotedebuggen von Windows-Geräten

Remotedebuggen von Liveinhalten auf einem Gerät unter 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 Remotedebugging ein, und stellen Sie von Ihrem Entwicklungscomputer aus eine Verbindung mit ihm her.

  • Untersuchen und debuggen Sie Liveinhalte auf Ihrem Windows-Gerät von Ihrem Entwicklungscomputer aus.

  • Screencast von Inhalten von Ihrem Windows-Gerät in eine DevTools-Instance auf Ihrem Entwicklungscomputer.

Schritt 1: Einrichten des Hosts (zu debuggender Computer)

Der Host- oder zu debuggende Computer ist das Windows 10-Gerät oder höher, das Sie debuggen möchten. Möglicherweise handelt es sich um ein Remotegerät, auf das Sie nur schwer physisch zugreifen können, oder es verfügt möglicherweise nicht über Tastatur- und Mausperipheriegeräte, sodass die Interaktion mit den Microsoft Edge DevTools auf diesem Gerät erschwert wird.

Verwende die folgenden Unterabschnitte der Reihe nach, um den Hostcomputer (Debuggee) einzurichten.

Installieren und Konfigurieren von Microsoft Edge

  1. Falls noch nicht installiert, installieren Sie Microsoft Edge auf dem Windows 10 oder höher-Gerät, das Sie debuggen möchten, über "Microsoft Edge kennenlernen".

  2. Wenn Sie eine vorinstallierte Version von Microsoft Edge auf dem Hostcomputer (Debuggee) verwenden, stellen Sie sicher, dass Sie über Microsoft Edge (Chromium) und nicht über Microsoft Edge (EdgeHTML) verfügen. 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 im Feld "Flags suchen" den Begriff "Remotedebuggen über Windows-Geräteportal aktivieren" ein. Legen Sie dieses Kennzeichen auf "Aktiviert" fest. Klicken Sie dann auf die Schaltfläche Neustart , um Microsoft Edge neu zu starten.

Einstellung

Installieren der Remotetools für Microsoft Edge

  1. Installieren Sie die Remotetools für Microsoft Edge aus dem Microsoft Store.

    Um den Hostcomputer (Debuggee) einzurichten, muss auf ihm Windows 10 Version 1903 oder höher ausgeführt werden. Wenn Sie Windows 10 oder höher, Version 1809 oder früher, verwenden, ist die Schaltfläche Herunterladen oder Abrufen auf dieser Seite "Remotetools für Microsoft Edge" möglicherweise deaktiviert. Aktualisieren Sie den Hostcomputer (Debuggee), um Remotetools für Microsoft Edge zu erwerben.

    Die Remotetools für Microsoft Edge im Microsoft Store

  2. Starten Sie Remotetools für Microsoft Edge und akzeptieren Sie das Berechtigungsdialogfeld in der App, wenn Sie dazu aufgefordert werden.

  3. Schließen Sie die Remotetools für Microsoft Edge. Sie müssen sie nicht für zukünftige Remotedebuggingsitzungen geöffnet haben.

Entwicklermodus aktivieren und Geräteportal aktivieren

  1. Entwicklermodus aktivieren; Weitere Informationen finden Sie unter Aktivieren Ihres Geräts für die Entwicklung.

  2. Geräteportal aktivieren; siehe Übersicht über das Windows-Geräteportal.

  3. Wenn Sie sich in einem WLAN-Netzwerk befinden, stellen Sie sicher, dass das Netzwerk entweder als Domäne oder als Privat gekennzeichnet ist. Sie können den Status ü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.

  4. 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".

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

  6. Wenn Aktivieren Sie die RemoteDiagnose über LAN-Verbindungen. zuvor aktiviert wurde, müssen Sie sie deaktivieren und erneut aktivieren, damit das Geräteportal mit Remotetools für Microsoft Edge funktioniert.

    Wenn der Abschnitt "Für Entwickler" in den Einstellungen nicht angezeigt wird, ist das Geräteportal möglicherweise bereits aktiviert. Starten Sie daher stattdessen das Gerät unter Windows 10 oder höher neu.

    Die Einstellungen-App mit konfiguriertem Entwicklermodus und Geräteportal

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

    Notieren Sie sich die IP-Adresse und den Verbindungsport in den Einstellungen

    Geben Sie die Informationen auf dem Client (Debugger)-Gerät im nächsten Abschnitt "Schritt 2: Einrichten des Clients (Debuggercomputer)" ein.

  8. Öffnen Sie Registerkarten in Microsoft Edge und Progressive Web-Apps (PWAs) auf dem Hostcomputer (Debugger), den Sie vom 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 Ihre tägliche Entwicklungsmaschine sein, oder es kann einfach Ihr PC oder MacBook sein, wenn Sie von zu Hause aus arbeiten.

  1. Installieren Sie Microsoft Edge über "Microsoft Edge kennenlernen ", um den Clientcomputer (Debugger) einzurichten, sofern noch nicht geschehen.

  2. Wenn Sie eine vorinstallierte Version von Microsoft Edge auf dem Hostcomputer (Debuggee) verwenden, stellen Sie sicher, dass Sie über Microsoft Edge (Chromium) und nicht über Microsoft Edge (EdgeHTML) verfügen. 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 zu der 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 die IP-Adresse und den Verbindungsport des Hostcomputers (zu debuggen) in das Textfeld ein, indem Sie der folgenden Struktur folgendermaßen folgen: http://IP address:connection port.

  5. Klicken Sie auf Mit Gerät verbinden.

    Die edge://inspect Seite auf dem Client

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

Verwenden von https anstelle von http

If you want to connect to the host (debuggee) machine using https instead of http:

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

  2. Auswählen rootcertificate.cer. Daraufhin wird das Tool Windows-Zertifikat-Manager geöffnet.

  3. Klicken Sie auf Zertifikat installieren..., vergewissern Sie sich, dass der aktuelle Benutzer aktiviert ist, und klicken Sie dann auf Weiter.

  4. Klicken Sie auf Alle Zertifikate in folgendem Speicher platzieren und dann auf Durchsuchen.

  5. Wählen Sie den Speicher der vertrauenswürdigen 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 der vertrauenswürdigen Stammzertifizierungsstellen installieren möchten.

  8. Wenn Sie nun vom Clientcomputer (Debugger) über die edge://inspect Seite eine Verbindung mit dem Hostcomputer (Debuggee) herstellen, müssen Sie einen anderen connection port Wert verwenden. Standardmäßig wird 50080 das Geräteportal für Desktop-Windows als for connection porthttpverwendet. Für httpsverwendet das Geräteportal 50043 also folgendes Muster: https://IP address:50043 auf der edge://inspect Seite ein.

Die vom Geräteportal verwendeten Standardports finden Sie in der Tabelle unter Setup in der Übersicht über das Windows-Geräteportal.

Standardports

Der Standardport für http ist 50080 und der Standardport für https ist 50043, Dies ist jedoch nicht immer der Fall, da das Geräteportal auf dem Desktop Ports im kurzlebigen Bereich (>50.000) beansprucht, um Konflikte mit vorhandenen Portansprüchen auf dem Gerät zu verhindern.

Die vom Geräteportal verwendeten Standardports finden Sie in der Tabelle unter Setup in der Übersicht über das Windows-Geräteportal.

Informationen zu Porteinstellungen finden Sie unter Windows-Geräteportal für Desktop.

Siehe auch:

Schritt 3: Debuggen von Inhalten auf dem Host über den Client

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

Auf der Seite

Bestimmen Sie den Inhalt, den Sie debuggen möchten, und klicken Sie dann auf "Überprüfen". Microsoft Edge DevTools wird in einer neuen Registerkarte geöffnet und führt Screencasts des Inhalts vom Hostcomputer (Debuggee) zum Clientcomputer (Debugger) durch. Sie können jetzt die volle Leistungsfähigkeit der Microsoft Edge DevTools auf dem Client für Inhalte nutzen, die auf dem Host ausgeführt werden.

Die Microsoft Edge DevTools auf dem Client, die eine Registerkarte in Microsoft Edge auf dem Host debuggen

Siehe auch:

Elemente untersuchen

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 in Ihrer DevTools-Instance auf dem Client aus, und tippen Sie dann auf das Element auf dem Bildschirm Ihres Hostgeräts.

"Element auswählen " ist nach der ersten Berührung deaktiviert, daher müssen Sie es jedes Mal erneut aktivieren, wenn Sie dieses Feature verwenden möchten.

Wichtig

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

Schritt 4: Screencast Ihres Hostbildschirms auf Ihr Clientgerät

Standardmäßig ist in der 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.

Die Schaltfläche

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

  • Klicks werden in Tippen übersetzt, wodurch die richtigen Touchereignisse auf dem Gerät ausgelöst werden.
  • Tastenanschläge auf Ihrem Computer werden an das Gerät gesendet.
  • Um eine Pinch-Geste zu simulieren, halten Sie während des Ziehens die UMSCHALTTASTE gedrückt.
  • Verwenden Sie zum Scrollen Ihr Trackpad oder Mausrad, oder schleudern 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 Taskleiste für Windows 10 oder höher und die Tastatur für Windows 10 oder höher.

  • Screencasts wirken sich negativ auf die Bildraten aus. Deaktivieren Sie das Screencasting während der Messung von Bildläufen oder Animationen, um ein genaueres Bild der Leistung Ihrer Seite zu erhalten.

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

  • Last updated on