Jak włączyć aplikację Chrome DevTools do zdalnego debugowania
Aplikacja Chrome DevTools jest tworzona przez Kennetha Auchenberga w celu wyjęcia devtools z przeglądarki - w tym przypadku z przeglądarki Chrome. Ta aplikacja jest oparta na NW.js i może działać na Mac OS X, a także na Linux i Windows.
Istnieje wiele powodów, które skłoniły producenta do tego, ale jego wizja polega na zapewnieniu twórcom wygody zdalne debugowanie w wielu przeglądarkach, wszystkie z tej samej zunifikowanej platformy (aplikacji). Pomysł zajmie trochę czasu, aby go złapać i zmaterializować z różnych powodów (i oporu, które możesz przeczytać na swoim blogu).
Przyjrzymy się krótko aplikacji Chrome DevTools i zobaczymy, co Google ma do zaoferowania programistom.
Więcej o Hongkiat:
- Pierwsze kroki z Chrome Developer Tools
- 5 (więcej) Przydatne narzędzia Chrome DevTools dla programistów
- Jak dostosować motyw Google Chrome DevTools
Instalacja
Pobierz Chrome-Devtools.app.zip i rozpakuj go. Kliknij dwukrotnie, aby uruchomić. Uruchom przeglądarkę Chrome i włącz zdalne debugowanie.
Aby to zrobić na komputerze Mac, otwórz terminal i uruchom poniższe polecenie:
sudo / Applications / Google Chrome.app/Contents/MacOS/Google Chrome-zdalny debugowanie-port = 9222
Jeśli uruchomisz system Windows, otwórz wiersz polecenia i użyj tego polecenia:
start chrome.exe -remote-debugging-port = 9222
Jak używać
Gdy Chrome jest już otwarty, z włączoną funkcją zdalnego debugowania możesz teraz przejść do dowolnej witryny. Na przykład otworzyliśmy Hongkiat.com do tego ćwiczenia. Następnie przejdziemy do okna aplikacji Chrome DevTools i odśwież tę listę (przycisk znajduje się w prawym dolnym rogu).
Teraz zobaczysz link Hongkiat.com na liście (jak pokazano poniżej).
Teraz kliknij przycisk „Idź”. Zostaniesz przeniesiony do nowego okna. to jest to! Masz już uruchomioną aplikację Chrome DevTools. To, co zobaczysz tutaj, jest takie samo, jak w przypadku „przeglądania elementu” w przeglądarce Chrome.
Z tego miejsca możesz korzystać z aplikacji Chrome DevTools, podobnie jak przy użyciu DevTools w Chrome natywnie: możesz sprawdzić element DOM, debugować JavaScript, pracować z konsolą i nie tylko.
Co dalej?
Ta aplikacja jest nadal bardzo eksperymentalna. Ale na razie pomysł wykorzystania DevTool z Chrome pozwala programistom traktować aplikację jako funkcjonalny edytor i pracować z innymi środowiskami wykonawczymi, takimi jak node.js i iOS. Aby uzyskać więcej możliwości, możesz sprawdzić pociąg myśli Auchenberg tutaj.
