Jak mogę debugować javascript na Androidzie?

Pracuję nad projektem z udziałem Raphaeljsa. Okazuje się, że nie działa na Androidzie. To działa na iPhone.

Jak, do cholery, zacząłem debugować coś w przeglądarce Androida? To WebKit, więc jeśli znam wersję, czy debugowanie jej w pełnej wersji WebKit da te same wyniki?

Aktualizacja: zdalne debugowanie

Wcześniej logowanie do konsoli było najlepszą opcją do debugowania JavaScript na Androidzie. Obecnie dzięki zdalnemu debugowaniu Chrome na Androida jesteśmy w stanie korzystać ze wszystkich zalet narzędzi programistycznych Chrome na komputery stacjonarne na Androida. Sprawdź https://developers.google.com/chrome-developer-tools/docs/remote-debugging, aby uzyskać więcej informacji.

Aktualizacja: konsola JavaScript

Możesz także przejść do about: debugowanie na pasku adresu URL, aby aktywować menu debugowania i konsolę błędów JavaScript na najnowszych urządzeniach z Androidem. Powinieneś zobaczyć POKAŻ KONSOLĘ JAVASCRIPT u góry przeglądarki.

Obecnie w systemie Android 4.0.3 (Ice Cream Sandwich) logcat wysyła dane do kanału przeglądarki. Możesz więc filtrować za pomocą adb logcat browser:* *:S.

Oryginalna odpowiedź

Za pomocą wbudowanego consoleobiektu JavaScript można drukować komunikaty dziennika, które można przeglądać adb logcat.

console.error('1');
console.info('2');
console.log('3');
console.warn('4')

Daje to wyjście:

D/WebCore (  165): Console: 1 line: 0 source: http://...
D/WebCore (  165): Console: 2 line: 0 source: http://...
D/WebCore (  165): Console: 3 line: 0 source: http://...
D/WebCore (  165): Console: 4 line: 0 source: http://...

Określanie wersji WebKit

Jeśli wpiszesz javascript:alert(navigator.userAgent)na pasku lokalizacji, zobaczysz wersję WebKit na liście, np

W Chrome: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.2 (KHTML, like Gecko) Chrome/4.0.221.6 Safari/532.2

Na emulatorze Androida Mozilla/5.0 (Linux; U; Android 1.6; en-us; sdk Build/DRC76) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1

NB

Wersje WebKit, które nie są częścią wydania Safari, mają znak + po numerze wersji, a ich numer wersji jest na ogół wyższy niż najnowsza wersja WebKit. Na przykład 528+ to nieoficjalna kompilacja WebKit, która jest nowsza niż wersja 525.x, dostarczana jako część Safari 3.1.2.

Próbować:

1. otwórz stronę, którą chcesz debugować

2. będąc na tej stronie, w pasku adresu zwykłej przeglądarki Androida wpisz:

   about:debug 

   (Uwaga: nic się nie dzieje, ale niektóre nowe opcje zostały włączone).

Działa na urządzeniach, które wypróbowałem. Przeczytaj więcej na temat przeglądarki Androida na temat: debugowanie, co robią te ustawienia?

Edycja: Aby uzyskać dodatkowe informacje, takie jak numer linii, należy dodać ten kod do skryptu:

window.onerror = function (message, url, lineNo){
    console.log('Error: ' + message + '\n' + 'Line Number: ' + lineNo);
    return true;
}

Http://jsconsole.com ( http://jsconsole.com/remote-debugging.html ) zapewnia sposób piękny można użyć, aby uzyskać dostęp do zawartości z was strony internetowej.

Używam Weinre , części Apache Cordova .

Dzięki Weinre dostaję konsolę debugowania Google Chrome w przeglądarce na pulpicie i mogę podłączyć Androida do tej konsoli oraz debugować HTML i CSS. Mogę wykonywać polecenia Javascript w konsoli, które wpływają na stronę internetową w przeglądarce Androida. Wiadomości dziennika z Androida są wyświetlane w konsoli debugowania na pulpicie.

Myślę jednak, że nie można wyświetlić ani przejrzeć właściwego kodu JavaScript. Więc łączę Weinre z komunikatami dziennika.

(Nie wiem dużo o JConsole, ale wydaje mi się, że inspekcja HTML i CSS nie jest możliwa przy pomocy JConsole, tylko polecenia Javascript i logowanie (?).)

Spójrz na jsHybugger . Umożliwi to zdalne debugowanie kodu js w celu:

• Aplikacje hybrydowe na Androida (przeglądanie stron internetowych, telefonowanie, oświetlenie robocze)
• Strony internetowe, które działają w domyślnej przeglądarce Androida (nie Chrome, obsługuje rozszerzenie ADB bez tego narzędzia)

Jak to działa (więcej szczegółów i alternatywy na stronie projektów, to był najlepszy sposób).

1. Zainstaluj aplikację jsHybugger na swoim urządzeniu
2. Włącz debugowanie USB na swoim urządzeniu.
3. Podłącz urządzenie z Androidem do komputera stacjonarnego przez USB
4. Uruchom aplikację na urządzeniu z Androidem („jsHybugger”)
5. Wprowadź docelowy adres URL i stronę w aplikacji. Naciśnij Start Service i wreszcie otwórz przeglądarkę
   • Zostanie wyświetlona lista zainstalowanych przeglądarek, wybierz jedną.
   • Uruchomi się przeglądarka.
6. Z powrotem na komputerze otwórz Chrome na chrome: // inspect /
7. Pojawi się okno inspektorów z chromowanymi narzędziami do debugowania połączonymi ze stroną na urządzeniu z Androidem.
8. debuguj!

Ponownie, z Chrome na Androida użyj rozszerzenia ADB bez jsHybugger. Myślę, że zostało to już opisane w przyjętej odpowiedzi na to pytanie.

FYI, powodem, dla którego RaphaelJS nie działa na Androidzie, jest to, że android webkit (w przeciwieństwie do iPhone'a) nie obsługuje obecnie SVG. Google dopiero niedawno doszedł do wniosku, że obsługa SVG na Androidzie to dobry pomysł, więc nie będzie jeszcze dostępny przez pewien czas.

Pełne zdalne debugowanie Chrome natywnej przeglądarki Androida na Galaxy S6 na Androida 5.1.1:

1. Włącz debugowanie USB na telefonie (Ustawienia, informacje, szybko stuknij numer kompilacji, ustawienia programisty, debugowanie USB)
2. Otwórz „Internet”
3. Przejdź do „about: debug” (zobaczysz błąd)
4. WIĘCEJ menu> Ustawienia> Debugowanie> Zdalne debugowanie
5. Podłącz telefon do komputera za pomocą kabla USB
6. W telefonie w przeglądarce internetowej otwórz witrynę, którą chcesz debugować
7. Otwórz Chrome na komputerze
8. Przejdź do „chrome: // inspect”
9. Kliknij przycisk inspekcji na karcie przeglądarki, którą chcesz sprawdzić

Urządzenia Galaxy S5 są wyświetlane w Chrome, ale zakładki pojawiają się dopiero po ponownym uruchomieniu. Po ponownym uruchomieniu i próbie dołączenia przeglądarka mobilna ulega awarii.

Raphael nie jest obsługiwany w przeglądarkach Androida w wersji wcześniejszej niż 3.0, na tym polega twój problem. Nie obsługują grafiki SVG. Ma jednak obsługę płótna. Jeśli nie musisz go animować, możesz renderować grafikę za pomocą canvg:

http://code.google.com/p/canvg/

W ten sposób udało nam się obejść ten problem z renderowaniem ikon SVG w domyślnej przeglądarce Androida.

about:debug(Lub chrome:\\debugoba powiedzieć strona nie można znaleźć, ale włączyć menu Debug w ustawieniach), gdy próbował na Chrome lub Opera na Android KitKat 4.4.2 na Samsung Tab

Jeśli masz uprawnienia ROOT na swoim urządzeniu, możesz wyświetlać komunikaty konsoli bezpośrednio na urządzeniu. Użyj aplikacji takiej jak CatLog, aby wyświetlić dane wyjściowe dziennika - https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=pl Umożliwi to przeglądanie całej aktywności logcat.

W systemie Android KitKat / 4.4.2 konsola przeglądarki jest wysyłana do kanału Chromium. Możesz filtrować według „Chromium”, aby uzyskać całą aktywność przeglądarki (w tym aktywność wewnętrzną przeglądarki), lub po prostu filtrować według „Konsoli”, aby zobaczyć tylko dziennik konsoli przeglądarki.

chromium [INFO:CONSOLE(3)]  "The key "x-minimal-ui" is not recognized and ignored.", source http://mywebsite.com/ (3)

Umieść w wierszu adresu chrome://about. Zobaczysz linki do wszystkich możliwych stron deweloperów.

Można spróbować YConsole a js osadzonych konsolę. Jest lekki i prosty w użyciu.

• Dzienniki połowu i błędy.
• Edytor obiektów.

Jak używać :

<script type="text/javascript" src="js/YConsole-compiled.js"></script>
<script type="text/javascript" >YConsole.show();</script>

Podczas korzystania z emulatora Androida otwórz przeglądarkę Google Chrome, a w polu adresu wpisz:

chrome://inspect/#devices

Zobaczysz listę swoich zdalnych celów. Znajdź swój cel i kliknij link „sprawdź”.

Chrome ma wspaniałą funkcję, która po prostu przenosi rzeczywistą zawartość Androida (w tym inspekcję itp.) Na ekran komputera ...

• Włącz debugowanie USB w urządzeniu, być może będziesz musiał połączyć się raz adb devices aby wywołać dialog „zezwól na komunikację z ...” na urządzeniu mobilnym,
• podłącz urządzenie z Androidem do komputera,
• uruchom Chrome na obu urządzeniach i
• następnie przejdź do chrome://inspect/#devicesna komputerze.
• Tutaj karty z telefonu komórkowego Chrome są wymienione i można je sprawdzić.

W sieci znajduje się również szczegółowy podręcznik: https://www.till.net/technologie/html-javascript/remote-web-debugging-unter-android-und-chrome

(stwierdzono, że po adb logcatnie pokazał nic z przeglądarki)

Moje rozwiązanie to (dla standardowej przeglądarki):

• Przeglądarka zapasów
• „consolo.log” w kodzie źródłowym JS
• Debugowanie USB włączone
• Android SDK
• Z systemu Android SDK: monitor.bat
• Monitoruj filtr jako załączony obraz

Android studio zapewnia wszystko, czego potrzebujesz, aby zobaczyć console.log i inne. W logcat wystarczy przefiltrować do „/ Web Console”, a zobaczysz swoje dzienniki js ...

Jeśli pojawi się jakikolwiek problem, możesz dodać tę wtyczkę: https://github.com/apache/cordova-plugin-console

Jeśli szukasz opcji innych niż zdalne:

We wcześniejszych i niezrootowanych wersjach Jellybean można użyć przeglądarki logcat, jeśli Android.permission.READL_LOGS zostanie udzielony przez adb raz.

W Firefoksie znajduje się dodatek do konsoli, który odczytuje i wyświetla wszystkie dzienniki aplikacji, a także Firebug Lite .

Możesz wypróbować „javascript-compiler-deva” z biblioteki npm, uruchamiając polecenie „npm install javascript-compiler-deva”, a następnie uruchamiając plik compiler.is przy użyciu „node compiler.js”.

Tworzy serwer na porcie 8888. Następnie możesz nacisnąć „ http: // localhost: 8888 ” i wprowadzić kod JavaScript i zobaczyć wynik dowolnego kodu JavaScript, w tym „console.log” w samej przeglądarce telefonu.

Jest również hostowany w „ https://javascript-compiler-deva.herokuapp.com/ ”

Lokalne opcje debugowania / about: config ... wydają się już nie działać w ponad 2020 przeglądarkach chrome / ff / ..

Inną przeglądarką z nie-zdalną konsolą js jest DevBrowser

lub WebInspector (nie działa selektor plików)