Di mana membaca pesan konsol dari background.js dalam ekstensi Chrome?

194

Saya baru saja mulai dengan ekstensi Google Chrome dan sepertinya saya tidak bisa masuk ke konsol dari latar belakang saya. Ketika kesalahan terjadi (karena kesalahan sintaks, misalnya), saya tidak dapat menemukan pesan kesalahan juga.

File manifes saya:

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": [
    "pageCapture",
    "tabs"
  ]
}

background.js:

alert("here");
console.log("Hello, world!")

Ketika saya memuat ekstensi, peringatan muncul tetapi saya tidak melihat apa pun yang masuk ke konsol. Apa yang saya lakukan salah?

debugging google-chrome-extension console google-chrome-devtools siap
sumber
2
kemungkinan duplikat dari Cara men-debug skrip latar belakang Google Chrome?
ripper234
Silakan pilih pesan atau info jika bilah yang disorot ada di tab lain seperti Tidak ada kata pilihan yang dipilih tab
siluveru kiran kumar

Jawaban:

375

Anda melihat tempat yang salah. Pesan konsol yang dicatat tidak muncul di halaman web, tetapi di halaman latar belakang (tidak terlihat). Untuk melihat pesan-pesan ini di konsol, ikuti langkah-langkah ini:

Kunjungi chrome://extensions/.
Anda juga dapat mengklik kanan ikon ekstensi, lalu klik "Kelola ekstensi".

  1. Aktifkan mode pengembang
  2. Klik tautan halaman latar belakang Anda (di "Periksa tampilan").
  3. Konsol pengembang terbuka untuk halaman ini .

UI baru:

masukkan deskripsi gambar di sini masukkan deskripsi gambar di sini

UI lama:

gambar

Rob W
sumber
@ Bob, saya tidak memiliki tombol segitiga untuk memperluas ekstensi dan tidak melihat tampilan aktif. Apakah jawaban ini bukan lagi solusi untuk pembuatan Chrome terbaru atau apakah saya kehilangan sesuatu?
gwg
1
@ggundersen Saya sudah memperbarui gambar. Segitiga telah dihapus, langkah itu sekarang secara otomatis terjadi ketika mode Pengembang diaktifkan.
Rob W
bagaimana Anda men-debug skrip konten?
SuperUberDuper
1
@SuperUberDuper Melalui devtools di tab tempat skrip konten berjalan.
Rob W
13

Saya memiliki masalah yang sama, dalam kasus saya logging ditetapkan ke "Sembunyikan semua" di tab konsol di alat Pengembang Chrome. Saya bahkan tidak menyadari ini adalah pilihan, dan saya tidak ingat mematikannya

tangkapan layar pengaturan di tab konsol di alat dev chrome

Michiel
sumber
7

Untuk pengikut yang ingin melihat konsol debug untuk "skrip konten" dari ekstensi chrome mereka, tersedia dengan melakukan "show developer console" yang normal kemudian gunakan panah dropdown untuk memilih "lingkungan javascript" -nya sehingga Anda akan memiliki akses untuk metodenya, dll.

masukkan deskripsi gambar di sini

rogerdpack
sumber
5

selain itu

jika Anda ingin melihat content_scriptfile js (ketika properti "latar belakang" tidak disetel) di manifest.json

"content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["popup.js"],
  }]

"browser_action": {
    "default_icon": "icon_32.png",
    "default_popup": "popup.html"
  }

kemudian klik kanan pada ikon ekstensi dan klik pada Periksa popup dan jendela pengembang terbuka dengan popup.html dibuka, di sana Anda melihat tab konsol.

diEcho
sumber
9
1) Ini tidak menjawab pertanyaan, 2) Ini salah; skrip konten mencatat pesan ke konsol halaman yang disuntikkan, yaitu tab browser yang sebenarnya. Saya kira dalam kode Anda, popup.jsdigunakan kembali dalam popup.html, dan dengan demikian output dari salinan itu pergi ke tempat yang Anda sebutkan. Tapi itu benar-benar menyesatkan.
Xan
2
jawaban ini membantu saya memeriksa log ekstensi chrome yang dijalankan sebagai popup
RashFlash
1

Mirip dengan jawaban Michiel saya juga memiliki konfigurasi konsol lucu: Filter saya tidak ingat pengaturan:

masukkan deskripsi gambar di sini

Setelah membersihkan filter saya melihat pesan.

Tonio Liebrand
sumber
1

Jika kita ingin membaca pesan yang dicetak ke konsol dari halaman popup, kita dapat mengklik ikon ekstensi untuk membuka halaman popup, kemudian melakukan klik kanan pada halaman popup di mana saja, menu dropdown akan ditampilkan, kita cukup klik menu "Periksa" untuk buka alat pengembang. Perhatikan bahwa halaman popup harus tetap terbuka. Jika ditutup (oleh window.close ()), alat pengembang juga akan ditutup.

Token Yi
sumber
0

Saya punya masalah ini juga. Sepertinya halaman web saya tidak memperbarui ke skrip yang baru disimpan. Ini diselesaikan dengan menekan Ctrl+ menyegarkan (atau Ctrl+ F5) di browser chrome.


sumber