Front-End-Entwicklung war früher (irgendwie) einfach. Sie können eine Reihe von Browsern auf einigen verschiedenen Computern / Betriebssystemen, physisch oder virtuell, installieren und die in fast jeden Browser eingebauten Entwickler -Tools verwenden, um Kompatibilitätsprobleme zu lösen, oder verschiedene Implementierungen von Webstandards umarbeiten. Dies ist nicht mehr der Fall, nicht da die Mobilfunknetze schneller wurden, die Telefone intelligenter und leichte „Tablet“ -Geräte einen weiteren Weg boten, um Menschen mit dem Internet zu verbinden, wo immer sie sind. Das Debuggen in diesen (meistens) mobilen Geräten ist eine andere Art von Spiel, und die Tatsache, dass mehr als ein Dutzend verschiedene mobile Browser existieren, macht den Job nicht einfacher. Hier ist das entfernte Debuggen nützlich.
Webinspektor -Fernbedienung wurde entwickelt, um die Ferninspektion und das Debuggen von Webseiten auf verschiedenen Geräten zu ermöglichen. Es ist ein nützliches Tool, insbesondere wenn Sie ein "UIWebview" oder eine Safari auf iOS debuggen müssen, während Sie sich unter Linux oder Windows entwickeln. Weinre wiederverwendet den Benutzeroberflächencode aus dem Web Inspector Project unter webkit damit die meisten Front-End-Entwickler bereits mit der Toolbox vertraut sein sollten.
Die Installation von Weinre ist am offiziellen Standort dokumentiert. Es ist ein Node.js -Modul, also müssen Sie das zuerst installieren. Unter Mac OSX und Linux ist die Installation nach der Installation von node.js so einfach wie auszuführen:
<span>sudo npm -g install weinre</span>
Die Dokumentation ist nicht ganz so klar, wie Sie Weinre unter Windows verwenden können. Daher werde ich ein bisschen mehr Informationen auf der Windows -Seite des Prozesses bereitstellen. Das erste, was Sie wissen sollten, ist Ihre IP -Adresse, da der Besuch der Seiten von Localhost oder 127.0.0.1 dies nicht zu tun hat. Sie können Ihre IP mit IFConfig unter Linux oder Mac OS und IPConfig unter Windows herausfinden. Eine statische IP -Adresse wäre ideal für Entwickler, die Weinre verwenden, sonst müssen Sie möglicherweise jedes Mal, wenn Sie Ihren Computer starten, Ihre IP entdecken! So erhalten Sie eine bestimmte IP -Adresse aus Ihrem lokalen Netzwerk über den Umfang dieses Artikels, aber hier finden Sie eine Anleitung für Windows, eine Anleitung für Mac OSX und eine für Ubuntu.
Sie benötigen dann einen HTTP -Server, da Sie HTML -Dateien auf einem mobilen Gerät nicht laden können (weshalb Sie die IP -Adresse Ihres Computers kennen!). Sie können Node.js, Apache, IIS oder einen statischen Site -Generator wie Middleman oder Jekyll verwenden - was auch immer zu Ihrem Workflow am besten passt. Es gibt auch ein Rubygem, das dem Mittelsmann eine einfache Helfermethode verleiht. Ich werde Apache verwenden und die folgende - nicht besonders interessante HTML -Datei mit genügend Stilen bedienen, um etwas aus der Ferne zu überprüfen:
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>
<span><span><span><head</span>></span>
</span> <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span> <span><span><span><title</span>></span>WEb INspector REmote<span><span></title</span>></span>
</span> <span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1"</span>></span>
</span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/foundation.min.css"</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span> <span><span>.flex-wrapper</span> {
</span></span></span><span><span> <span>display: -webkit-box;
</span></span></span><span><span> <span>display: -webkit-flex;
</span></span></span><span><span> <span>display: -ms-flexbox;
</span></span></span><span><span> <span>display: flex;
</span></span></span><span><span> <span>-webkit-flex-wrap: wrap;
</span></span></span><span><span> <span>-ms-flex-wrap: wrap;
</span></span></span><span><span> <span>flex-wrap: wrap;
</span></span></span><span><span> <span>}
</span></span></span><span><span>
</span></span><span><span> <span><span>.flex-box</span> {
</span></span></span><span><span> <span>-webkit-box-flex: 1;
</span></span></span><span><span> <span>-webkit-flex: 1 1 30em;
</span></span></span><span><span> <span>-ms-flex: 1 1 30em;
</span></span></span><span><span> <span>flex: 1 1 30em;
</span></span></span><span><span> <span>}
</span></span></span><span><span> </span><span><span></style</span>></span>
</span><span><span><span></head</span>></span>
</span>
<span><span><span><body</span>></span>
</span>
<span><span><span><div</span> class<span>="wrapper"</span>></span>
</span> <span><span><span><div</span> class<span>="row"</span>></span>
</span> <span><span><span><div</span> class<span>="large-10 large-offset-1 column"</span>></span>
</span> <span><span><span><h1</span>></span>Remote Debugging for Front-end Developers<span><span></h1</span>></span>
</span>
<span><span><span><div</span> class<span>="flex-wrapper"</span>></span>
</span> <span><span><span><div</span> class<span>="flex-box"</span>></span>
</span> <span><span><span><p</span>></span>Front-end development used to be (kind of) easy.
</span> One could easily install a bunch of browsers on a couple
of different computers / operating systems, physical
or virtual, and use the developer tools built in almost
every browser to solve compatibility problems, or work
around different implementations of web standards.
This is no longer the case, not since cellular networks
became faster, phones became smarter and light “tablet”
devices offered a new way to connect people to the internet
from wherever they are. Debugging in these (mostly)
mobile devices is a different kind of game, and the fact
that more than a dozen different mobile browsers
exist is not making the job any easier.<span><span><span></p</span>></span>
</span> <span><span><span></div</span>></span>
</span> <span><span><span><div</span> class<span>="flex-box"</span>></span>
</span> <span><span><span><blockquote</span> cite<span>="http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html"</span>></span>
</span> <span><span><span><p</span>></span>weinre is WEb INspector REmote. Pronounced like
</span> the word “winery”. Or maybe like the word “weiner”. Who
knows, really.<span><span><span></p</span>></span>
</span> <span><span><span></blockquote</span>></span>
</span> <span><span><span><p</span>></span>WEb INspector REmote was built to enable remote inspection
</span> and debugging of web pages across different devices. It’s a
useful tool, especially when you need to debug a ”UIWebView”
or Safari on iOS while developing on Linux or Windows. weinre
*reuses the user interface code from the Web Inspector project
at WebKit* so most front-end developers should already be
familiar with the toolbox.<span><span><span></p</span>></span>
</span> <span><span><span></div</span>></span>
</span> <span><span><span></div</span>></span>
</span> <span><span><span></div</span>></span>
</span> <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>Wenn Sie Weinre nicht jedes Mal konfigurieren möchten, wenn Sie sie ausführen, sollten Sie eine Server.Properties -Datei in einem .weinre -Verzeichnis erstellen. Öffnen Sie eine Eingabeaufforderung in Ihrem Profilverzeichnis (Windows -Benutzer: Sie müssen die Konsole verwenden, um einen Ordner mit diesem Namen zu erstellen! Drücken Zeichen von "Eingabeaufforderung", drücken Sie dann die Eingabetaste) und geben Sie Mkdir .weinre ein, um ein neues Verzeichnis zu erstellen. Der resultierende Pfad für Windows -Benutzer sollte so etwas wie C: userSYOU_USER_NAME.WeinRE.
sein.Sobald dieser Ordner fertig ist, erstellen Sie eine neue Textdatei in den benannten Server.Properties mit den folgenden Inhalten:
<span>boundHost: -all- </span><span>httpPort: 8081 </span><span>reuseAddr: true </span><span>readTimeout: 1 </span><span>deathTimeout: 5</span>
Fühlen Sie sich frei, die HTTPPORT zu ändern, wenn dieser besetzt ist. Sie sollten jetzt in der Lage sein, Weinre auszuführen, indem Sie Weinre in die Eingabeaufforderung eingeben, und der Weinre Server hört den ausgewählten Port an. Fügen Sie die folgende Zeile auf der Seite hinzu, die Sie zum Debuggen benötigen (oder die oben angegebene Test -HTML -Datei, die wir oben angegeben haben):
<span><span><span><script</span> src<span>="http://YOUR_IP_ADDRESS:8081/target/target-script-min.js"</span>></span><span><span></script</span>></span></span>
Starten Sie Ihren bevorzugten Webkit-basierten Browser und geben Sie die Adresse des Weinre-Servers ein: http: // your_ip_address: 8081/client/. Dies ist dein Debugger! Öffnen Sie nun die Webseite, die Sie gerade mit Ihrem Smartphone/Tablet, einem anderen Browser, Computer oder sogar einem virtuellen Betriebssystem/Gerät in das Skript hinzugefügt haben - es macht keinen Unterschied. Sie sollten in der Lage sein, diesen Client auf dem Weinre -Debugger zu sehen und diese Entwickler -Tools zu verwenden, um die Seite auf dem Gerät zu inspizieren! Sie können (die meisten) angewandte CSS auf jedem DOM -Element anzeigen, Inline -Stile hinzufügen, entfernen oder ändern und JavaScript -Nachrichten in der Konsole anzeigen. Sie können auch JavaScript -Befehle in der Konsole ausführen und die DOM manipulieren. Das sollte mehr als genug sein, um alle Rendering -Fehler oder unerwartetes Verhalten zu bestimmen!
Hier ist ein Beispiel für die Überprüfung des Standardbrowsers in Android 4.1.2:
Wir können die Textfarbe mit der JavaScript -Konsole ändern:
zusammen mit anderen JavaScript -Befehlen:
Valenz ist ein Add-On für Firefox, das es den Firefox-Entwickler-Tools ermöglicht, die Browser, Chrome und Safari auf iOS aus der Ferne zu inspizieren / zu debuggen. Das Debug-Ziel kann ein iOS-Gerät oder ein Chrome-Desktop-Browser sein (mit dem-Remote-Debugging-Port = 9222 Speziales „Flag“, um eine Remote-Inspektion zu ermöglichen, finden Sie im Valenz-Standort an der Valenz-Site für Anweisungen oder Anweisungen) oder Firefox OS. Valenz kann leider keine Android -Geräte -Emulatoren oder ältere Android -Geräte inspizieren, aber UIWebviews und Simulatoren auf iOS können inspiziert werden - obwohl ich es nicht ausprobiert habe, da ich keinen Apple -Computer besitze.
Das Smartphone / Tablet muss physisch mit Ihrem Computer verbunden sein. Wenn Sie Windows verwenden, müssen Sie wahrscheinlich USB -Treiber für Ihr Gerät installieren, was möglicherweise nicht einmal existiert oder nicht! Windows -Benutzer müssen auch iTunes installieren, wenn sie iOS inspizieren müssen. Zuletzt muss der Entwicklermodus und/oder USB -Debugging aktiviert sein. Denken Sie bitte daran, die Einstellungen zu deaktivieren, wenn Ihre Arbeit erledigt ist! Valenz ist im Moment ziemlich begrenzt und etwas instabil, wie es eine frühe Beta sein kann, aber es ist ein vielversprechendes Werkzeug.
Inspizieren Sie die HTML -Quelle und die Stile eines Chrombrowsers auf einem Android 5 -Smartphone:
Jede Site kann überprüft werden:
Hinzufügen von Farbattributen zu SVG -Pfaden, um das Logo zu ändern:
ok reagieren… Danke, dass du die Konsolennachricht für mich unten hinterlassen hast!
Hier ist ein Beispiel für das Debuggen von JavaScript:
Debugie, dass CSS Inkonsistenzen oder unterschiedliches JavaScript -Verhalten auf Desktop Browsern relativ einfach - und heutzutage selten benötigt, da die meisten modernen Browser regelmäßig aktualisiert werden und einen großen Satz von Webstandards unterstützen. Aber mobil Browser sind nicht so einfach zu entwickeln. Es gibt buchstäblich Dutzende von ihnen, und während die Datenbank mit der Verwendung von Can i verwenden alle! Weinre und Valenz können Front-End-Entwicklern erheblich helfen und Tools zur Auswahl / Debugie von mobilen Geräten aus der Ferne zur Verfügung stellen.
Das obige ist der detaillierte Inhalt vonRemote-Debugging für Front-End-Entwickler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
