Ein spezieller Gastbeitrag von Adil, Mitglied des Samsung Internet Engineering Group Teams!
Die von den Browsern bereitgestellten Entwicklertools sind der ständige Begleiter vieler Webentwickler. Wir können sie nutzen, um unseren Code zu überprüfen, uns über Fehler zu informieren und verschiedene Audits durchzuführen. Mit den DevTools in Chrome können Sie auch die Anzeigegröße an Ihr mobiles Gerät anpassen. Diese Funktion wird von vielen Entwicklern häufig genutzt. Einer der hilfreichen Punkte dieser Funktion ist, dass Sie unter den gängigen Mobilgeräten wählen können und DevTools die Bildschirmgröße genau an das jeweilige Gerät anpasst. So können wir Webseiten mit der Größe des mobilen Geräts testen und debuggen.
Chrome DevTools ist nicht nur für die Inspektion von DOM-Elementen und CSS-Attributen. Wir können es auch für die Untersuchung von Netzwerkanfragen und den Zugriff auf speicherbezogene Parameter verwenden. Außerdem können Sie JavaScript-Code direkt ausführen und die Meldungen auf der Konsole sehen. Ist das nicht erstaunlich?
Angenommen, Sie haben ein Mobiltelefon in der Hand und es treten bestimmte Probleme auf, insbesondere auf diesem Gerät, und Sie können das Problem mit DevTools und der oben beschriebenen Methode nicht reproduzieren. Oder stellen Sie sich eine Situation vor, in der Ihr mobiler Browser über spezifische APIs verfügt und Sie diese debuggen möchten. In diesem Fall benötigen Sie DevTools auf Ihrem Mobiltelefon.
Was Sie vielleicht nicht wissen, ist, dass Sie Desktop DevTools zum Debuggen von Blink-basierten Browsern (wie Samsung Internet) auch auf Ihren Android-Geräten verwenden können.
Um dies zu tun, aktivieren Sie zunächst „USB Debugging“ auf Ihrem Android-Gerät und verbinden Sie es mit Ihrem Computer.
Jetzt kommt der spannende Teil. Rufen Sie die URL „chrome://inspect“ auf und klicken Sie dann auf „Geräte“. Hurra! Sie sehen die Liste der aktiven Browsersitzungen auf Ihrem mobilen Gerät.
Klicken Sie auf „Inspect“, und Sie sehen die Browseransicht auf Ihrem Computer. Jetzt können Sie mit DevTools beliebige Manipulationen vornehmen.
Sie können auf die Liste der mobilen Geräte auch über „Remote Devices“ aus dem DevTools-Menü zugreifen.
Hoffentlich haben Sie Spaß daran, diese Technik zu verwenden, um das Debugging auf Ihrem Handy zu vereinfachen!