Erste Schritte mit remote debuggen Windows 10 Geräte

Remotedebuggern von Liveinhalten auf einem Windows 10 gerät von Ihrem Windows oder macOS-Computer aus. In diesem Lernprogramm werden die folgenden Aufgaben erläutert.

  • Richten Sie Ihr Windows 10 remote debuggen ein, und stellen Sie eine Verbindung mit dem Gerät von Ihrem Entwicklungscomputer aus.
  • Überprüfen und Debuggen von Liveinhalten auf Ihrem Windows 10 von Ihrem Entwicklungscomputer aus.
  • Screencast-Inhalte von Ihrem Windows 10 auf eine DevTools-Instanz auf Ihrem Entwicklungscomputer.

Schritt 1: Einrichten des Hosts (Debuggecomputer)

Der Host- oder Debuggecomputer ist das Windows 10, das Sie debuggen möchten. Es kann ein Remotegerät sein, auf das Sie nur schwer physisch zugreifen können, oder es hat keine Tastatur- und Mausperipheriegeräte, was die Interaktion mit den Microsoft Edge DevTools auf diesem Gerät erschwert. Zum Einrichten des Hostcomputers (debuggee) müssen Sie die folgenden Aktionen ausführen.

Installieren und Konfigurieren Microsoft Edge (Chromium)

Falls noch nicht, installieren Sie Microsoft Edge (Chromium) auf dieser Seite. Wenn Sie eine vorinstallierte Version von Microsoft Edge auf dem Hostcomputer (debuggee) verwenden, stellen Sie sicher, dass Sie Microsoft Edge (Chromium) und nicht Microsoft Edge (EdgeHTML) haben. Eine schnelle Möglichkeit zum Überprüfen ist das Laden im Browser und bestätigen, dass die Versionsnummer edge://settings/help 75 oder höher ist.

Navigieren Sie nun edge://flags in Microsoft Edge (Chromium). Geben Sie unter Suchflagsdie Option Remotedebuggen überdas Windows aktivieren ein. Legen Sie dieses Flag auf Aktiviert fest. Wählen Sie dann die Schaltfläche Neustart aus, um Microsoft Edge (Chromium) neu zu starten.

Festlegen der Option Remotedebuggen über Windows Geräteportal aktivieren auf Aktiviert

Installieren der Remotetools für Microsoft Edge (Beta)

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

Hinweis

Die Schaltfläche Get für die Remotetools für Microsoft Edge (Beta) ist möglicherweise deaktiviert, wenn Sie sich Windows 10 Version 1809 oder früher befinden. Zum Einrichten des Hostcomputers (debuggee) muss Windows 10 Version 1903 oder höher ausgeführt werden. Aktualisieren Sie den Hostcomputer (debuggee), um die Remotetools für Microsoft Edge (Beta) zu erwerben.

Die Remotetools für Microsoft Edge \(Beta\) im Microsoft Store

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

Aktivieren des Entwicklermodus und Aktivieren des Geräteportals

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.

Wenn sie als Öffentlich aufgeführt ist, navigieren Sie zu Einstellungen > Netzwerk & > Internet-WLAN, **** wählen Sie in Ihrem Netzwerk aus, und schalten Sie die Schaltfläche Netzwerkprofil auf Privat um.

Öffnen Sie nun die Einstellungen App. Geben Sie unter Suchen einer Einstellungein, und wählen Sie sie Developer settings aus. Umschalten im Entwicklermodus. Sie können nun das Geräteportal aktivieren, indem Sie Remotediagnosen über lokale Netzwerkverbindungen auf Ein aktivieren festlegen. Anschließend können Sie die **** Authentifizierung optional aktivieren, damit das Clientgerät (Debugger) die richtigen Anmeldeinformationen für die Verbindung mit diesem Gerät bereitstellen muss.

Hinweis

Wenn Remotediagnosen über Lokale Netzwerkverbindungen aktivieren. zuvor aktiviert war, müssen Sie es deaktivieren und **** erneut aktivieren, damit Das Geräteportal mit den Remotetools für Microsoft Edge (Beta) funktioniert. Wenn der Abschnitt Für Entwickler nicht inEinstellungen angezeigt wird, ist das Geräteportal möglicherweise bereits aktiviert, und starten Sie stattdessen Windows 10 Gerät neu.

Die Einstellungen app mit Entwicklermodus und Geräteportal konfiguriert

Beachten Sie die COMPUTER-IP-Adresse und den Verbindungsport, die unter Verbinden angezeigt werden:. Die IP-Adresse in der abbildung unten 192.168.86.78 ist und der Verbindungsport ist 50080 .

Beachten Sie die IP-Adresse und den Verbindungsport im Einstellungen

Sie geben die Informationen auf dem Clientgerät (Debugger) im nächsten Abschnitt ein. Öffnen Sie registerkarten in Microsoft Edge und Progressive Web Apps (PWAs) auf dem Hostcomputer (debuggee), den Sie auf dem Clientcomputer debuggen möchten.

Schritt 2: Einrichten des Clients (Debuggercomputer)

Der Client- oder Debuggercomputer ist das Gerät, von dem 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.

Wenn Sie den Clientcomputer (Debugger) einrichten möchten, installieren Sie Microsoft Edge (Chromium) auf dieser Seite, falls noch nicht vorhanden. Wenn Sie eine vorinstallierte Version von Microsoft Edge auf dem Hostcomputer (debuggee) verwenden, stellen Sie sicher, dass Sie Microsoft Edge (Chromium) und nicht Microsoft Edge (EdgeHTML) haben. Eine schnelle Möglichkeit zum Überprüfen ist das Laden im Browser und bestätigen, dass die Versionsnummer edge://settings/help 75 oder höher ist.

Navigieren Sie nun edge://flags in Microsoft Edge (Chromium). Geben Sie unter Suchflagsdie Option Remotedebuggen Windows gerätedebuggen in edge://inspect. Legen Sie dieses Flag auf Aktiviert fest. Wählen Sie dann die Schaltfläche Neustart aus, um Microsoft Edge (Chromium) neu zu starten.

Festlegen der Option Remote-Windows gerätedebuggen über edge://inspect aktivieren auf Aktiviert

Navigieren Sie nun zu edge://inspect der Seite in Microsoft Edge (Chromium). Standardmäßig sollten Sie im Abschnitt Geräte angezeigt werden. Geben Verbinden zu einem Remote-Windows-Gerätdie IP-Adresse und den Verbindungsport des Hostcomputers (debuggee) in das Textfeld ein, das folgende Muster enthält: http:// IP address : connection port . Wählen Sie jetzt Verbinden auf Gerät aus.

Die edge://inspect auf dem Client

Wenn Sie die Authentifizierung für den Hostcomputer (debuggee) **** einrichten, **** werden Sie aufgefordert, den Benutzernamen und das Kennwort für den Clientcomputer (Debugger) einzugeben, um eine erfolgreiche Verbindung herzustellen.

Verwenden von https anstelle von http

Wenn Sie eine Verbindung mit dem Hostcomputer (debuggee) anstelle von herstellen möchten, müssen Sie in Microsoft Edge auf dem Clientcomputer https http http://IP address:50080/config/rootcertificate (Debugger) zu navigieren. Dadurch wird automatisch ein Sicherheitszertifikat mit dem Namen rootcertificate.cer heruntergeladen.

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

Wählen Sie Zertifikat installieren... aus, stellen Sie sicher, dass der aktuelle Benutzer aktiviert ist, und wählen Sie Weiter aus. Wählen Sie jetzt Alle Zertifikate im folgenden Speicher platzieren aus, und wählen Sie Durchsuchen... aus. Wählen Sie den Speicher der vertrauenswürdigen Stammzertifizierungsstellen aus, und wählen Sie OK aus. Wählen Sie Weiter und dann Fertig stellen aus. Wenn Sie dazu aufgefordert werden, bestätigen Sie, dass Sie dieses Zertifikat im Speicher der vertrauenswürdigen Stammzertifizierungsstellen installieren möchten.

Wenn Sie nun über die Seite eine Verbindung mit dem Hostcomputer (debuggee) vom Clientcomputer (Debugger) herstellen, müssen Sie einen edge://inspect anderen Wert connection port verwenden. Standardmäßig wird für desktop-Windows das Geräteportal 50080 als die für connection port http verwendet. Für https verwendet das Geräteportal dieses 50043 Muster: https:// : auf der IP address 50043 edge://inspect Seite. Weitere Informationen zu den standardports, die vom Geräteportal verwendet werden.

Hinweis

Der Standardport für ist und der Standardport für ist, aber dies ist nicht immer der Fall als Geräteportal auf Desktop-Anspruchsports im kurzlebigen Bereich http 50080 https (>50.000), um Kollisionen mit vorhandenen Portansprüchen auf dem Gerät zu 50043 verhindern. Weitere Informationen finden Sie im Abschnitt Port Einstellungen device portal on Windows desktop.

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

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

Auf edge://inspect seite auf dem Client werden die Registerkarten in Microsoft Edge und PWAs auf dem Host angezeigt.

Bestimmen Sie den Inhalt, den Sie debuggen möchten, und wählen Sie überprüfen aus. Die Microsoft Edge DevTools wird auf einer neuen Registerkarte geöffnet und der Inhalt wird vom Hostcomputer (debuggee) auf den Clientcomputer (Debugger) übertragen. Sie können jetzt die volle Leistung des Microsoft Edge DevTools auf dem Client für Inhalte nutzen, die auf dem Host ausgeführt werden. Erfahren Sie mehr über die Verwendung der Microsoft Edge DevTools hier.

Die Microsoft Edge DevTools auf dem Client debuggen eine Registerkarte in Microsoft Edge host

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

Überprüfen von Elementen

Versuchen Sie beispielsweise, ein Element zu überprüfen. Navigieren Sie zum Elementtool Ihrer DevTools-Instanz auf dem Client, und zeigen Sie auf ein Element, um es im Viewport des Hostgeräts zu markieren.

Sie können auch auf ein Element auf dem Bildschirm des Hostgeräts tippen, um es im Elementtool zu wählen. Wählen Sie Element auswählen auf Ihrer DevTools-Instanz auf dem Client aus, und tippen Sie dann auf das Element auf dem Hostgerätbildschirm.

Hinweis

Select Element ist nach dem ersten Touch deaktiviert, daher müssen Sie es jedes Mal wieder 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 auf Windows 10, Version 1903, zu beheben.

Schritt 4: Screencast your host screen to your client device

Standardmäßig ist für die DevTools-Instanz auf dem Client die Screencasting aktiviert, mit der Sie die Inhalte auf dem Hostgerät in Ihrer DevTools-Instanz auf Ihrem Clientgerät anzeigen können. Wählen Sie Screencast umschalten aus, um dieses Feature zu deaktivieren oder zu aktivieren.

Die Schaltfläche Screencast umschalten in den Microsoft Edge DevTools auf dem Client

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

  • Auswahlen werden in Tipptasten übersetzt, die richtige Touchereignisse auf dem Gerät abfeuern.
  • Tastaturanschläge auf Ihrem Computer werden an das Gerät gesendet.
  • Halten Sie beim Ziehen gedrückt, um eine Shift Prisegeste zu simulieren.
  • Wenn Sie einen Bildlauf durchführen möchten, verwenden Sie das Trackpad oder mausrad oder bewegen Sie sich mit dem Mauszeiger.

Einige 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-Taskleiste oder die Windows 10-Tastatur.
  • Screencasts wirken sich negativ auf die Frameraten aus. Deaktivieren Sie das Screencasting, während Sie Bildlauf oder Animationen messen, um ein genaueres Bild der Leistung Ihrer Seite zu erhalten.
  • Wenn der Bildschirm des Hostgeräts gesperrt wird, wird der Inhalt des Screencasts ausgeblendet. Entsperren Sie den Bildschirm Des Hostgeräts, um den Screencast automatisch fortsetzen zu können.

Bekannte Probleme

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

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

Das Überwachungstool, **** das 3D-Ansichtstool, der Abschnitt **** Emulierte Geräte unter Einstellungenund der Barrierefreiheitsstrukturbereich im Elementtool funktionieren derzeit nicht wie erwartet. Das Team plant, die aufgeführten Tools in einem zukünftigen Update von Microsoft Edge zu beheben.

Der Datei-Explorer wird beim Remotedebugger nicht **** über die DevTools im Tool Quellen oder im Sicherheitsbereich gestartet. Das Team plant, die Tools in einem zukünftigen Update von Microsoft Edge zu beheben.