Alat Pengembang Chrome: skrip html kosong (dalam sumber) tutorial debugging

90

Saya melakukan tutorial debugging C hrome , menggunakan NetBeans dan Google Chrome. Semuanya, termasuk ekstensi, tampaknya berfungsi dengan benar, tetapi ketika saya sampai ke bagianUse the Debugger , saya tidak dapat melihat kode html untuk memasukkan breakpoint.

Setelah memilih inspeksi popup di browser, itu terbuka di Konsol, tidak menunjukkan apa-apa, Elemen menampilkan popup.html dengan gambar yang ditambahkan. Ketika saya pergi ke Sources, file popup.html dapat dibuka, tetapi satu-satunya baris, Baris 1, kosong. Jika saya membuka file js, file js ada di sana dan dapat diedit (break point).

Saya minta maaf - mungkin sesuatu yang mendasar, tetapi saya tidak terlalu berpengalaman dengan ini. Saya sudah mencoba memuat ulang dan menyegarkan semuanya.

TINDAK LANJUT: Dengan masuk location.reload(true)ke prompt Konsol, file popup.html menjadi terlihat sebagai Sumber! Mengapa? Tidak ada ide.

Saya harap ini menyelamatkan seseorang dari hari penuh yang saya habiskan untuk tersandung.

DrWhat
sumber
5
location.reload (true) berhasil untuk saya.
WillB3
Ya, tapi itu memuat ulang halaman, dan kehilangan interaksi yang mungkin Anda miliki di halaman sebelum membuka debugger.
Peter Brand
di mana saya harus menulis "location.reload (true)"
sidhewsar
2
Masih menghadapi masalah di 2019!
Aamir Rizwan
Ini terjadi di versi terbaru Chrome, Okt 2019, tetapi trik location.reload (true) tidak memuat apa pun. Kebetulan, jendela sumber hanya menampilkan baris nomor 1, tapi tidak ada yang lain.
Howard Brown

Jawaban:

53

Ini tampaknya masalah umum dengan Chromium DevTools. Pada dasarnya, HTML dan konten non-skrip lainnya sudah dihapus sebelum DevTools dibuka dan tidak ada cara yang dapat diandalkan untuk mendapatkannya kembali. Memuat ulang halaman dengan DevTools, buka "memperbaiki" masalahnya.

Eric
sumber
4
Setuju - Saya memiliki masalah dan perbaikan ini sudah usang (untuk masalah serupa sebelumnya), atau tidak berfungsi.
Dan Nissenbaum
3
saya juga mengalami masalah yang sama. Menyegarkan halaman tidak mengatasi masalah tersebut.
MH
17
Anda bisa membuatnya berfungsi dengan menutup alat pengembang dan membukanya kembali menggunakan opsi elemen pemeriksaan. Ini bekerja untuk saya.
Vishal
7
Masih berlangsung di Desember 2017!
Peter Brand
7
Bug masih ada - Mei 2019
Chris Rogers
49

dalam kasus saya, pesanan membantu

  1. tutup tab kosong di sumber
  2. tutup alat pengembang
  3. buka alat pengembang
  4. buka tab di sumber (masih kosong)
  5. segarkan halaman
Andrey Zausaylov
sumber
1
Siapa yang tahu apakah ini akan menjadi perbaikan yang andal, tetapi kali ini berhasil! 😁
James Hill
1
Sobat
itu berhasil untuk saya
Smith
ini bekerja untuk saya juga
AVH
1
Saya tidak bisa. Percaya. Itu ... Bertahun-tahun. Dari. Sakit ... Teratasi. Di. Sebuah. Instan. TERIMA KASIH.
egmfrs
24

Saya mengalami masalah ini, dan baru saja menemukan bahwa menonaktifkan "Aktifkan Peta Sumber Javascript" dari jendela pengaturan Inspektur (F1) menyelesaikannya

Saya membuat ulang js.map saya, mengaktifkan kembali pengaturan dan sumbernya masih tersedia.

Jadi saya pikir masalah saya adalah bahwa saya melayani js tanpa batas (pengaturan dev), tetapi peta (dibangun untuk pengaturan prod) masih ada dan ketinggalan zaman.

paul
sumber
4
tutup chrome dan buka kembali setelah mengubah pengaturan juga!
Nateous
17

Dalam kasus saya, saya tidak dapat mengakses konsol karena tabnya juga menampilkan halaman kosong. Solusi saya adalah menggunakan kombinasi CTRL + SHIFT + I dengan layar debugger kosong dalam fokus, lalu ketik parent.location.reload(true)konsol dari popup debugger.

Ikenna Anthony Okafor
sumber
2
Seperti dalam komentar WillB di atas, yang memuat ulang halaman, dan kehilangan interaksi apa pun yang mungkin Anda miliki di halaman sebelum membuka debugger.
Peter Brand
Hebat! Ini berhasil bagi saya setelah 2 jam perjuangan.
Zeeshan Adil
Saya tidak tahu apa yang disiratkan oleh parent.location.reload tetapi itu menyelesaikan masalah saya setelah beberapa chrome restart / hard refresh / mengosongkan data cache chrome! Terima kasih!
beluga
Senang aku dapat membantu. Ini memuat ulang jendela induk (jendela kosong tempat Anda mengetik CTRL + SHIFT + I) dari jendela anak.
Ikenna Anthony Okafor
5

Dalam kasus saya, ada ekstensi di chrome yang menyebabkan debugger memberikan halaman indeks kosong di bawah bagian "tidak ada domain" dari debugger. Setelah menonaktifkan semua ekstensi yang tidak penting di chrome, debugger menampilkan sumber yang benar lagi.

Brett Drake
sumber
4
Akan lebih bagus jika Anda mencatat ekstensi yang menyebabkan masalah. Banyak ekstensi mungkin tidak penting untuk Anda dan penting bagi saya. Ini membuat jawaban menjadi tidak berharga.
Imad
5
Saya tidak akan setuju dengan "tidak berharga". Setidaknya Anda tahu untuk memeriksa plugin.
Brett Drake
Ini adalah masalah saya - dalam kasus saya, saya telah menginstal ekstensi UltraSurf Unblock VPN. Membuka halaman debug lokal di jendela penyamaran langsung menampilkannya. Sedikit momen "durrrr" yang harus saya akui :( haha!
IfElseTryCatch
Menggunakan penyamaran telah memperbaikinya untuk saya.
Petah
4

Alat Dev (F12) -> Jendela pengaturan inspektur (F1) -> Pulihkan default dan muat ulang [tombol di bagian bawah] berfungsi untuk saya!

Sylwia M
sumber
2

Saya perhatikan bahwa beberapa masalah javascript yang serius menyebabkan masalah seperti ini. Dalam kasus saya, saya secara keliru menimpa seluruh dokumen saya karena salah ketik.

Jika Anda mendapatkan halaman html kosong di debugger Chromium WebTools, perhatikan baik-baik javascript Anda untuk memastikannya tidak melakukan sesuatu yang aneh.

AWT
sumber
1
Sepertinya inilah yang menyebabkan masalah bagi saya juga. Dalam kasus saya, saya memiliki referensi jquery yang buruk. $ ('inputid') bukan $ ('# inputid').
Vincent
2

Saya memperbaiki masalah saya dengan menggunakan sesi baru dengan argumen baris perintah "--user-data-dir", dan menonaktifkan "Aktifkan Peta Sumber Javascript". Kode saya muncul dengan baik di debugger Firefox, jadi sepertinya disebabkan oleh bug Chrome.

Simon
sumber
1

Saya memiliki masalah yang sama. Bahkan penyegaran halaman tidak berhasil.

Pergi chrome://helpdan menyegarkan browser + restart berhasil untuk saya.

Anda juga dapat memperbarui Chrome melalui menu:

masukkan deskripsi gambar di sini

Charles
sumber
0

dalam kasus saya itu terjadi tiba-tiba, setelah saya terinfeksi malware dan saya mengatur ulang browser saya - cache / appdata dihapus.

Solusi: Hapus ekstensi yang dapat memengaruhi Js dalam kasus saya

saya menghapus / menonaktifkan ekstensi di bawah dan bekerja https://chrome.google.com/webstore/detail/quick-javascript-switcher/geddoclleiomckbhadiaipdggiiccfje?hl=id

Aneh karena sebelum saya mencuci addon itu tanpa masalah, saya pikir itu seperti CPR ke hati. :)

shareef
sumber
0

Dalam kasus saya, saya menelan ludah dengan browserync yang berjalan selama beberapa hari. Saya terpental menelan dan memecahkan masalah saya.

dman
sumber
0

Saya juga mengalami masalah ini ketika saya memiliki file java-script yang besar, saya memiliki baris ini

                points.push({
                    location: new google.maps.LatLng(46.5376919, 4.5425704),
                    date : "5/8/2017 5:11:00 PM",
                    free : true
                });

dalam siklus untuk dan menghitung 3000 item sehingga file menjadi besar di skrip dan file kosong di sumber chrome. (Saya pikir saya mencapai beberapa batasan)

Setelah membuat file lebih kecil dengan menghapus hingga 100 item, itu berfungsi dengan baik.

Dongolo Jeno
sumber