Jak mogę debugować javascript na Androidzie?

281

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?

jvenema
źródło
2
Nie na temat, ale rozważ sprawdzenie Snap.svg. Jest to remake RaphaelJS od tej samej osoby. Jest odtwarzany bez obsługi starych przeglądarek, więc jest szybszy, kod jest czystszy itp.
Lajos Meszaros
Uwaga do zaakceptowanej odpowiedzi: W Samsung Experience> = 9, jeśli nie znalazłeś swojego urządzenia, zmień typ USB na złącze dźwiękowe.
BOZ

Odpowiedzi:

245

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.

Pierre-Antoine LaFayette
źródło
12
kiedy och, kiedy będę mógł debugować lokalnie na Androidzie w przypadkach, gdy nie mogę tego zrobić zdalnie?
Michael
Niepewny. Na małym urządzeniu, takim jak telefon, nie miałoby to większego sensu, ponieważ nieruchomość na ekranie byłaby tak ograniczona dla pełnego inspektora sieci. Na tabletach może to mieć większy sens, ale musieliby ponownie wymyślić Inspektora sieci, aby uzyskać interfejs dotykowy, co jest znaczącym wysiłkiem. Może pracują nad tym, ale kto wie.
Pierre-Antoine LaFayette,
1
Podejrzewam, że pierwsze cięcie bez znaczących adaptacji byłoby dobrym początkiem, tzn. Pozwoliło na użycie znacznej ilości funkcji. Niektóre tablety mają nawet rysik, więc zdarzenia myszy mogą działać tak samo.
Michael
Co to takiego o małym urządzeniu, takim jak telefon!?!?!? bestbuy.com/site/samsung-galaxy-view-18-4-32gb-black/…
Michael Dillon
Uwaga z linku do zdalnego debugowania Chrome na Androida: „Powinieneś zalogować się do Chrome za pomocą jednego ze swoich kont Google. Zdalne debugowanie nie działa w trybie incognito ani w trybie gościa”. Wow dlaczego?
sdbbs,
135

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;
}
Mads Mobæk
źródło
23
Właśnie próbowałem, ale sztuczka debugowania about: nie działała na moim Nexusie S z ICS 4.0.3.
derflocki
6
Powinieneś spróbować przejść do about:debugtej samej zakładki, na której otwarta jest bieżąca strona. Zamiast nawigowania, u góry wyświetli się „POKAŻ KONSOLĘ JAVASCRIPT”. Jeśli spróbujesz uzyskać dostęp about:debugz nowej karty, nie zadziała.
Denilson Sá Maia
10
To jest tylko standardowa przeglądarka, prawda? Próbuję go w Chrome dla Androida beta na KitKat bez powodzenia. (wydaje się, że KitKat nie ma już standardowej przeglądarki)
James
7
To wymaga standardowej przeglądarki na Androida i nie działa w Chrome :)
giorgio79
6
Standardowa przeglądarka KitKat, jeśli używa tego producent, to Chromium. about:debugnaprawdę przekazuje do przodu, chrome://debugktóry mówi „nie można znaleźć”, ale pokazuje Debugopcję w ustawieniach. Niektóre opcje nie wchodzą w życie, dopóki nie zostanie otwarta nowa karta.
cde
21

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 (?).)

KajMagnus
źródło
Dodano przewodnik krok po kroku dla weinr w OS X na stackoverflow.com/questions/13330221/…
leymannx
Próbowałem już Weinre i nie byłem bardzo zadowolony z tego narzędzia. Dziennik nie jest naprawdę niezawodny. Niektóre błędy nie są wyświetlane. Nawet jeśli są pokazane, Weinre wyświetla tylko komunikat o błędzie, bez śladu stosu. To mnie całkowicie wkurzyło.
Lewis,
Próbowałem już Weinre i nie byłem bardzo zadowolony z tego narzędzia. Dziennik nie jest naprawdę niezawodny. Niektóre błędy nie są wyświetlane. Nawet jeśli są pokazane, Weinre wyświetla tylko komunikat o błędzie, bez śladu stosu. To mnie całkowicie wkurzyło.
Lewis,
17

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.

cyberflohr
źródło
Dlaczego zostało to zanegowane? Jest to jedno z niewielu narzędzi, które obsługuje zdalne debugowanie webViews w aplikacjach natywnych.
Alfie Hanssen
Ponieważ nie mówi, jak to zrobić, z wyjątkiem tego, że wskazuje link do całego projektu, więc musisz go dużo wykopać, zanim faktycznie odniesiesz sukces
Adaptabi
2
To narzędzie jest całkiem dobre i rozwiązało mój problem. Szkoda, że ​​musiałem przekopać się w wyszukiwarce Google zamiast zobaczyć tę odpowiedź, ponieważ ktoś postanowił ją zakopać. (Skończyłem tutaj jako pierwszy) Dodam kilka szczegółów, aby poprawić tę odpowiedź, zobaczyć, jak działa to całe SO?
Aardvark,
Aplikacja jsHybugger nie jest już dostępna w Google Play ani do pobrania. Projekt jest przechowywany tutaj: github.com/dcendents/jsHybugger ; ale wydaje się, że nie zawiera kodu do generowania pakietu APK.
Adrian Herscu,
14

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.

Ludvig Svenonius
źródło
Dzięki Ludvig, zrozumiałem to niedługo po oryginalnym poście, ale dobra kontynuacja.
jvenema
To nie jest odpowiedź na główne pytanie, proszę zamienić to w komentarz (lub osobne pytanie) i usunąć.
PJ Brunet,
12

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.

Charlie
źródło
5

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.

użytkownik3905
źródło
5

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)
użytkownik3663132
źródło
5

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

honzajde
źródło
6
Tak, ale nie ma nic na konsolę
Nico,
3

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>
Yorg
źródło
Jest to świetne do debugowania javascript na urządzeniach mobilnych. Dzięki
ako
3

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ź”.

Gregory R.
źródło
Nie wiem, dlaczego ta odpowiedź nie zyskała większego uznania. To było niezwykle proste i działa na emulatorze i urządzeniu fizycznym
Frank
3

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)

BurninLeo
źródło
1

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 obrazwprowadź opis zdjęcia tutaj
Antonio Petricca
źródło
0

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

Reign.85
źródło
0

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 .

Christian Læirbag
źródło
0

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/

Devashish Priyadarshi
źródło
0

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)

allofmex
źródło