So aktivieren Sie die Chrome DevTools-App für das Remote-Debugging
Die Chrome DevTools-App wurde von Kenneth Auchenberg erstellt, um Devtools aus dem Browser zu entfernen - in diesem Fall aus dem Chrome-Browser. Diese Anwendung basiert auf NW.js und kann sowohl unter Mac OS X als auch unter Linux und Windows ausgeführt werden.
Es gibt viele Gründe, die den Hersteller dazu veranlasst haben, dies zu schaffen Remote-Debugging über mehrere Browser hinweg, von derselben einheitlichen Plattform (App). Die Idee wird einige Zeit in Anspruch nehmen und sich aus verschiedenen Gründen (und Widerständen, die Sie in seinem Blog nachlesen können) durchsetzen..
Wir werden einen kurzen Blick auf die Chrome DevTools App werfen und sehen, was Google Entwicklern bietet.
Mehr zu Hongkiat:
- Erste Schritte mit den Chrome Developer Tools
- 5 (Weitere) nützliche Chrome DevTools-Tipps für Entwickler
- So passen Sie das Google Chrome DevTools-Design an
Installation
Laden Sie die Datei Chrome-Devtools.app.zip herunter und extrahieren Sie sie. Doppelklicken Sie zum Ausführen. Starten Sie Ihren Chrome Browser und aktivieren Sie das Remote-Debugging.
Öffnen Sie dazu auf dem Mac das Terminal und führen Sie den folgenden Befehl aus:
Sudo / Applications / Google \ Chrome.app/Contents/MacOS/Google \ Chrome -remote-debugging-port = 9222
Wenn Sie Windows ausführen, öffnen Sie die Eingabeaufforderung und verwenden Sie diesen Befehl:
Starten Sie chrome.exe -remote-debugging-port = 9222
Wie benutzt man
Wenn Ihr Chrome bereits geöffnet ist und die Remote-Debugging-Funktion aktiviert ist, können Sie jetzt zu jeder Site navigieren. Zum Beispiel haben wir für diese Übung Hongkiat.com geöffnet. Als nächstes gehen wir zum Chrome DevTools-App-Fenster und Aktualisieren Sie diese Liste (der Knopf befindet sich unten rechts).
Nun wird der Hongkiat.com-Link aufgelistet (wie unten gezeigt)..
Jetzt Klicken Sie auf die Schaltfläche "Los". Sie werden zu einem neuen Fenster weitergeleitet. Das ist es. Sie haben bereits die Chrome DevTools-App installiert. Was Sie hier sehen, ist dasselbe wie wenn Sie "Element" im Chrome-Browser "untersuchen".
Von hier aus können Sie die Chrome DevTools-App genauso verwenden, wie die DevTools für Chrome nativ: Sie können das DOM-Element überprüfen, JavaScript debuggen, mit Console arbeiten und vieles mehr.
Was kommt als nächstes?
Diese App ist noch sehr experimentell. Die Idee, das DevTool aus Chrome herauszunehmen, ermöglicht es den Entwicklern jedoch, die App als funktionalen Editor zu behandeln und mit anderen Laufzeiten wie node.js und iOS zu arbeiten. Weitere Möglichkeiten finden Sie hier in Auchenbergs Gedankengang.
