Apakah mungkin untuk membuka konsol alat pengembang di Chrome di ponsel Android?

165

Aplikasi AngularJS berfungsi dengan baik di desktop, tetapi tidak merender dengan benar di ponsel (kode aktual ditampilkan). Ini ada di ponsel Android.

Saya ingin melihat kesalahan apa yang ditampilkan di konsol.

Apakah mungkin untuk membuka konsol JS pada aplikasi chrome di ponsel (seperti di desktop)?

google-chrome-devtools mobile-chrome tim_xyz
sumber

Jawaban:

134

Anda dapat melakukannya menggunakan debugging jarak jauh, di sini adalah dokumentasi resmi . Proses dasar:

  1. Hubungkan perangkat android Anda
  2. Pilih perangkat Anda: Alat lainnya> Periksa perangkat *dari alat dev di pc / mac.
  3. Otorisasi di ponsel Anda.
  4. Selamat men-debug !!

* Ini sekarang "Perangkat jarak jauh".

PseudoAj
sumber
2
Saya pikir penjelasan terperinci disediakan dalam tautan dokumentasi
PseudoAj
59
Apakah ini mungkin dilakukan tanpa komputer eksternal?
Eric Reed
59
Pertanyaan meminta konsol alat pengembang terbuka di Chrome di ponsel Android? soultion Anda membutuhkan mesin debugging terpisah. Dalam jawaban Anda, debugging tidak ada di telepon itu sendiri
Fennekin
5
Tidak ada cara lain saya mengetahui @fennekin. Silakan memperbarui jika Anda berpikir ada cara yang lebih baik,
PseudoAj
5
Pada Januari 2019, saya tidak dapat menemukan perangkat Inspect di bawah More Tools, saya akhirnya menemukannya di chrome: // inspect, dan Anda harus mengizinkan debugging usb dari ponsel Anda
Abhinav Singh
53

Ketika Anda tidak memiliki PC, Anda dapat menggunakan Eruda, yang merupakan devtools untuk peramban seluler https://github.com/liriliri/eruda
Ini disediakan sebagai javascript yang dapat disematkan dan juga bookmarklet (menempelkan bookmarklet di chrome menghapus javascript: awalan, jadi Anda harus mengetiknya sendiri)

trogper
sumber
1
Pendamping yang sangat baik untuk alat-alat seperti Termux yang membuat pengembangan pada perangkat seluler tunggal menjadi nyata! Saya sudah terintegrasi eruda-webpack-pluginke dalam satu proyek: npm i eruba-webpack-plugin --save-optional.
vintproykt
Cara termudah untuk mendapatkan apa yang ada di konsol
makwana.a
Solusi yang luar biasa. Ini tersedia dalam CDN.
netishix
Ini sepertinya tidak berhasil untuk saya. Menempelnya di bilah alamat (dan kemudian membaca 'javascript:') sepertinya tidak melakukan apa-apa.
BT
@BT beberapa situs web membatasi untuk memuat skrip dari dari domain yang diizinkan yang terdaftar. Cobalah di situs web lain.
trogper
10

Saya hanya ingin melihat apa yang dicetak di konsol. Anda dapat dengan mudah menambahkan bagian "tercetak" di suatu tempat di HTML Anda sehingga akan muncul di halaman web. Anda bisa melakukannya sendiri, tetapi ada file javascript yang melakukan ini untuk Anda. Anda dapat membacanya di sini:

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

Kode tersedia dari Github ; Anda dapat mengunduhnya dan menempelkannya ke file javascipt dan menambahkannya ke HTML Anda

John Balvin Arias
sumber
FYI: Anda mungkin menghadapi situasi di mana konsol TIDAK akan muncul. Berdasarkan beberapa percakapan di akhir beranda resminya , Anda dapat mencoba secara eksplisit mobileConsole.init(). Trik itu membantu dalam kasus saya. YMMV.
RayLuo
1
tautan itu masih berfungsi, hanya butuh waktu lama untuk memuat. Meskipun demikian saya dapat meringkas bahwa percakapan antara saya dan pemilik lib itu berakhir dengan dia menambahkan informasi berikut ke bagian Catatan di halaman utamanya: "Jika mobileConsole tidak memulai (deteksi seluler gagal), Anda dapat mengganti autostart dengan mengatur overrideAutorun menjadi true atau tambahkan skrip berikut ke halaman Anda: if (!mobileConsole.status.initialized) { mobileConsole.init(); } "
RayLuo
7

Tolong bantu diri Anda dan tekan saja tombol mudah:

unduh Web Inspector (Open Source) dari Play store.

A CAVEAT: ATTOW, output konsol tidak menerima params sisanya! Yaitu jika Anda memiliki sesuatu seperti ini:

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

Anda hanya akan melihat

satu

masuk ke konsol. Anda harus membungkus params secara manual dalam Array dan bergabung, seperti:

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

untuk melihat output yang diharapkan.

Tetapi aplikasinya adalah open source ! Sebuah tambalan mungkin sudah dekat ! Patcher bahkan bisa jadi Anda!

Sensei James
sumber
3

Kiwi Browser adalah Chromium seluler dan memungkinkan pemasangan ekstensi . Pasang Kiwi lalu instal ekstensi Chrome "konsol Mini JS" (cukup cari di Google dan pasang dari situs web ekstensi Chrome, uBlock juga berfungsi;). Ini akan tersedia di menu Kiwi di bagian bawah dan akan menampilkan output konsol untuk halaman saat ini.

Pawel
sumber
-1

Anda mungkin dapat mencoba Browser Gigi, itu dapat memeriksa elemen dan men-debug situs web hanya di ponsel.

https://gear4.app

Angolao
sumber
5
Aplikasi ini hanya untuk iPhone. Pertanyaannya ditentukan Android.
Pete