Czy można otworzyć konsolę narzędzi programistycznych w przeglądarce Chrome na telefonie z systemem Android?

165

Aplikacja AngularJS działa dobrze na komputerze, ale nie renderuje się poprawnie na telefonie komórkowym (wyświetlany jest rzeczywisty kod). To jest na telefonie z Androidem.

Chciałbym zobaczyć jakie błędy wyświetlają się w konsoli.

Czy można otworzyć konsolę JS w aplikacji Chrome na telefonie komórkowym (tak jak na komputerze)?

google-chrome-devtools mobile-chrome tim_xyz
źródło

Odpowiedzi:

134

Możesz to zrobić za pomocą zdalnego debugowania, oto oficjalna dokumentacja . Podstawowy proces:

  1. Podłącz urządzenie z systemem Android
  2. Wybierz swoje urządzenie: Więcej narzędzi> Sprawdź urządzenia za *pomocą narzędzi deweloperskich na komputerze PC / Mac.
  3. Autoryzuj na telefonie komórkowym.
  4. Miłego debugowania!

* To jest teraz „Urządzenia zdalne”.

PseudoAj
źródło
2
Myślę, że szczegółowe wyjaśnienie znajduje się w linku do dokumentacji
PseudoAj
59
Czy można to zrobić bez komputera zewnętrznego?
Eric Reed
59
Pytanie dotyczy otwartej konsoli narzędzi programistycznych w przeglądarce Chrome na telefonie z systemem Android? twoja soultion wymaga oddzielnej maszyny do debugowania. W twojej odpowiedzi debugowanie nie jest w samym telefonie
Fennekin
5
Nie ma innego sposobu, w jaki jestem świadomy @fennekin. Prosimy o aktualizację, jeśli uważasz, że istnieje lepszy sposób,
PseudoAj
5
Począwszy od stycznia 2019 roku, nie był w stanie znaleźć Sprawdzić urządzenia pod więcej narzędzi, ale w końcu okazało się, że w chrome: // wglądu, i trzeba, aby umożliwić debugowanie USB z telefonem
Abhinav Singh
53

Jeśli nie masz pod ręką komputera, możesz użyć Erudy, która jest devtools dla przeglądarek mobilnych https://github.com/liriliri/eruda
Jest dostarczana jako osadzalny javascript, a także bookmarklet (wklejenie bookmarkletu w chrome usuwa javascript: prefix, więc musisz wpisać go sam)

trogper
źródło
1
Bardzo dobry towarzysz narzędzi takich jak Termux, które sprawiają, że programowanie na samotnych urządzeniach mobilnych jest realne! I już zintegrowane eruda-webpack-pluginw jednym projekcie: npm i eruba-webpack-plugin --save-optional.
vintproykt
Najłatwiejszy sposób na zdobycie tego, co jest w konsoli
makwana.a
Niesamowite rozwiązanie. Jest dostępny w CDN.
netishix
To chyba nie działa dla mnie. Wklejenie go w pasku adresu (a następnie odczytanie „javascript:”) wydaje się nic nie robić.
BT,
@BT Niektóre strony internetowe ograniczają się do ładowania skryptów z wymienionych dozwolonych domen. Wypróbuj na innej stronie internetowej.
trogper
10

Jeśli chcesz tylko zobaczyć, co zostało wydrukowane w konsoli, możesz po prostu dodać "wydrukowaną" część gdzieś w swoim HTML, aby pojawiła się na stronie internetowej. Możesz to zrobić dla siebie, ale istnieje plik javascript, który zrobi to za Ciebie. Możesz o tym przeczytać tutaj:

http://www.hnldesign.nl/work/code/mobileconsole-javascript-console-for-mobile-devices/

Kod jest dostępny na Github ; możesz go pobrać i wkleić do pliku javascipt i dodać do kodu HTML

John Balvin Arias
źródło
FYI: Możesz napotkać sytuację, w której konsola NIE pojawi się. Opierając się na rozmowie na końcu oficjalnej strony głównej , możesz spróbować to wprost mobileConsole.init(). Ta sztuczka pomaga w moim przypadku. YMMV.
RayLuo
1
ten link nadal działa, po prostu ładowanie zajmuje dużo czasu. Niemniej jednak mogę podsumować, że ta rozmowa między mną a właścicielem biblioteki zakończyła się dodaniem przez niego następujących informacji do sekcji Notatki na jego stronie głównej: „Jeśli mobileConsole nie uruchamia się (nie udaje się wykrywanie urządzeń mobilnych), możesz zastąpić autostart poprzez ustawienie overrideAutorun na true lub dodaj następujący skrypt do swojej strony: if (!mobileConsole.status.initialized) { mobileConsole.init(); } „
RayLuo
7

Zrób sobie przysługę i po prostu naciśnij łatwy przycisk:

pobierz Web Inspector (Open Source) ze sklepu Play.

OSTRZEŻENIE: ATTOW, wyjście konsoli nie akceptuje pozostałych parametrów! To znaczy, jeśli masz coś takiego:

console.log('one', 'two', 'three');

zobaczysz tylko

jeden

zalogowany do konsoli. Będziesz musiał ręcznie zawinąć parametry w Array i połączyć, na przykład:

console.log([ 'one', 'two', 'three' ].join(' '));

aby zobaczyć oczekiwane wyniki.

Ale aplikacja jest open source ! Poprawka może być nieuchronna ! Może to być nawet Ty!

Sensei James
źródło
3

Przeglądarka Kiwi jest mobilnym Chromium i umożliwia instalowanie rozszerzeń . Zainstaluj Kiwi, a następnie zainstaluj rozszerzenie Chrome „Mini JS console” (po prostu wyszukaj w Google i zainstaluj ze strony rozszerzeń Chrome, działa również uBlock;). Stanie się dostępny w menu Kiwi na dole i pokaże wyjście konsoli dla bieżącej strony.

Paweł
źródło
-1

Prawdopodobnie możesz wypróbować przeglądarkę Gear Browser, która może sprawdzać elementy i debugować witrynę tylko na urządzeniach mobilnych.

https://gear4.app

Angolao
źródło
5
Aplikacja jest przeznaczona tylko dla iPhone'ów. Pytanie dotyczyło Androida.
Pete