Bagaimana cara mengatur breakpoints dalam Javascript inline di Google Chrome?

211

Ketika saya membuka Alat Pengembang di Google Chrome, saya melihat semua jenis fitur seperti Profil, Garis Waktu, dan Audit, tetapi fungsionalitas dasar seperti dapat mengatur breakpoint baik dalam file js dan dalam html dan kode javascript hilang! Saya mencoba menggunakan konsol javascript, yang itu sendiri buggy - misalnya, setelah bertemu dengan kesalahan JS, saya tidak bisa keluar darinya kecuali saya me-refresh seluruh halaman. Adakah yang bisa membantu?

javascript debugging google-chrome kartu as
sumber
Saya menyerah dengan Chrome. Sudah mencoba dengan Firefox dan berhasil mencapai breakpoint saya dalam beberapa detik. Mungkin saja dengan Chrome tetapi tentu tidak jelas bagaimana caranya!
Oliver P

Jawaban:

127

Gunakan tab sumber, Anda dapat mengatur breakpoints dalam JavaScript di sana. Di pohon direktori di bawahnya (dengan panah atas dan bawah di dalamnya), Anda dapat memilih file yang ingin Anda debug. Anda dapat keluar dari kesalahan dengan menekan resume di sisi kanan tab yang sama.

Rian Schmits
sumber
31
Untuk beberapa alasan saya melihat daftar file js yang disertakan, tetapi saya tidak dapat memilih halaman eksekusi itu sendiri, itu tidak muncul dalam daftar. Ada ide?
ulu
67
@ulu, saya punya masalah yang sama. Pastikan atribut type = "text / javascript" Anda disetel pada elemen <script> Anda.
contactmatt
9
kecuali bahwa dalam HTML5 atribut ini tidak lagi wajib. Saya tidak mengubah kode sumber hanya untuk debug!
sashok_bg
10
Saya tidak melihat bahkan setelah menambahkan type = "text / javascript"
Nitin Kumar Mishra
3
jika ini tidak berhasil, dan Anda memiliki kode javascript sebaris seperti: <script> your code </script>tambahkan nama seperti: <script> your code //# sourceURL=somename.js </script> Ini dijelaskan lebih baik dalam jawaban di bawah ini
KM.
209

Apakah Anda berbicara tentang kode di dalam <script>tag, atau dalam atribut tag HTML, seperti ini?

<a href="#" onclick="alert('this is inline JS');return false;">Click</a>

Either way, yang debuggerkata kunci seperti ini akan bekerja:

<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>

NB Chrome tidak akan berhenti pada debuggers jika alat dev tidak terbuka.

Anda juga dapat mengatur breakpoint properti dalam file dan <script>tag JS :

  1. Klik tab Sumber
  2. Klik ikon Tampilkan Navigator dan pilih file
  3. Klik dua kali nomor baris di margin sebelah kiri. Baris yang sesuai ditambahkan ke panel Breakpoints (4).

masukkan deskripsi gambar di sini

Matt Ball
sumber
4
Tidak ada tab Skrip. Saya melihat semua tab lain yang ada dalam gambar ini tetapi tidak ada tab Skrip!
ace
5
Maksud saya bisa mengatur breakpoint di dalam tag script di html. Saya juga mencoba menggunakan debugger; kata kunci tetapi tidak berfungsi. Chrome tidak memecah hal itu tetapi ia bekerja di Firefox. Saya mencari solusi breakpoint bukan berdasarkan kata kunci debugger yang tidak nyaman untuk dimasukkan ke banyak tempat dalam kode dan kemudian harus menghapus.
ace
2
Dalam drop-down di bawah tab Skrip saya hanya melihat file JS yang terdaftar, tetapi bukan file HTML yang berisi tag <script> yang ingin saya debug. Firebug pada FF memiliki drop-down yang serupa, tetapi juga mencantumkan file HTML yang berisi tag <script>. Apakah ini bug atau ada cara lain untuk mengatur breakpoint dalam kode JS inline?
Wolfram Arnold
8
Tab dipanggil Sourcesbukan Scriptssekarang.
CoderDennis
1
Ketika saya mencoba untuk debug js html tertanam saya, saya mendapat halaman kosong di daerah dev saya. Saya harus menyegarkan sambil melihat file sumber kosong untuk membuatnya diisi.
HappyCoder86
73

Anda juga dapat memberi nama pada skrip Anda:

<script> ... (your code here) //# sourceURL=somename.js </script>

ofcourse ganti "somename" dengan beberapa nama;) dan kemudian Anda akan melihatnya di chrome debugger di "Sources> top> (no domain)> somename.js" sebagai skrip normal dan Anda akan dapat men-debug seperti skrip lain

buildhome.eu
sumber
3
cara termudah dan sempurna untuk pergi. tetapi perhatikan untuk orang lain, ingatlah untuk menghapusnya sebelum mendorongnya ke produksi.
Zameer Fouzan
2
Ya Tuhan, Anda tidak tahu seberapa banyak ini membantu saya. Ya Tuhan, ini brilian. Saya telah mencari sesuatu seperti ini sejak lama.
GregRos
Saya menggunakan ide (baik) ini, tetapi tidak dapat melihat file baru di tab sumber, hanya file html. Lalu saya mengeksekusi kode dan, pada akhirnya, di konsol, di sebelah kanan pesan apa pun yang ditulis dari skrip, Anda dapat melihat tautan ke kode tersebut. Bagian terbaiknya adalah tautan tersebut menunjukkan nama file yang Anda berikan ke skrip (yaitu, // # sourceURL = somename.js).
Manuel Rivera
1
Saya akan memberi Anda 1000 upvotes jika saya bisa;) Trik yang sangat berguna
Giulio Quaresima
43

Refresh halaman yang berisi skrip sementara alat pengembang terbuka pada tab skrip. Ini akan menambahkan entri (program) dalam daftar file yang menunjukkan html halaman termasuk skrip. Dari sini Anda dapat menambahkan breakpoints.

Gruff Bunny
sumber
Ini tidak berhasil untuk saya. Sebagai gantinya, saya mengklik ikon kesalahan skrip di kanan bawah untuk membuka file program di tab skrip.
sanbikinoraion
1
Terima kasih! Menggunakan Chrome 69, ini berfungsi bahkan jika saya tidak ada di tab sumber. Memiliki alat pengembang terbuka saat halaman dimuat tampaknya menjadi kuncinya.
Sam
Ini akan menjadi jawaban yang diterima jika ini adalah pertanyaan saya. Terima kasih.
montyNation
Bekerja di Chrome 83. Dalam env saya, nama file didasarkan pada URL aplikasi Anda. Misalnya, jika URL adalah example.com/xxx/yyy, nama file akan menjadi "yyy".
Helix Quar
18

Trik sederhana lain yang intuitif untuk men-debug terutama skrip di dalam html yang dikembalikan oleh ajax, adalah dengan menempatkan sementara console.log ("test") di dalam skrip.

Setelah Anda memecat acara, buka tab konsol di dalam alat pengembang. Anda akan melihat tautan file sumber ditampilkan di sisi kanan pernyataan cetak debug "test". cukup klik pada sumbernya (seperti VM4xxx) dan sekarang Anda dapat mengatur break point.

PS: selain itu, Anda dapat mempertimbangkan untuk menempatkan pernyataan "debugger" jika Anda menggunakan chrome, seperti apa yang disarankan oleh @Matt Ball

ken
sumber
10

Situasi saya dan apa yang saya lakukan untuk memperbaikinya:
Saya memiliki file javascript yang disertakan pada halaman HTML sebagai berikut:
Nama Halaman: test.html

<!DOCTYPE html>
<html>
    <head>
        <script src="scripts/common.js"></script>
        <title>Test debugging JS in Chrome</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div>
         <script type="text/javascript">
            document.write("something");
         </script>

        </div>
     </body>
</html>

Sekarang memasukkan Javascript Debugger di Chrome, saya klik Tab Script, dan drop down daftar seperti yang ditunjukkan di atas. Saya dapat dengan jelas melihat skrip / common.js namun saya TIDAK bisa melihat halaman html test.html saat ini di drop down, oleh karena itu saya tidak bisa men-debug javascript tertanam:

<script type="text/javascript">
  document.write("something");
</script>

Itu membingungkan. Namun, ketika saya menghapus jenis usang = "teks / javascript" dari skrip tertanam:

<script>
  document.write("something");
</script>

..dan menyegarkan / memuat kembali halaman, voila, itu muncul di daftar drop-down, dan semuanya baik-baik saja.
Saya harap ini bermanfaat bagi siapa saja yang mengalami masalah debugging javascript tertanam pada halaman html.

Aditya Singh
sumber
Kerja bagus! Diuji di Chrome 20.0.1132.57 pada Mac 10.7.4 Bug yang diajukan untuk proyek Chromium.
Mars Robertson
Ketahuilah bahwa dalam HTML 4 dan XHTML, typeadalah atribut yang diperlukan. Di HTML5, itu opsional.
hotshot309
2
Itu tidak ada hubungannya dengan tipe. Script dikumpulkan oleh VM setelah eksekusi kecuali jika inspektur sudah dibuka pada saat ini. Ketika Anda memuat ulang halaman itu tidak mengumpulkan skrip.
vsevik
Saya kasus saya, hilang <div>mencegah saya melihat kode di debugger
ceztko
5

Menambahkan debugger;di bagian atas pada skrip saya berfungsi untuk saya.

JEKO
sumber
4

Saya juga mengalami masalah yang sama, bagaimana men-debug JavaScript yang ada di dalam <script>tag. Tapi kemudian saya menemukannya di bawah tab Sumber, yang disebut "(indeks)", dengan tanda kurung. Klik nomor baris untuk mengatur breakpoints.

masukkan deskripsi gambar di sini

Ini adalah Chrome 71.

ocarlsen
sumber
2

Jika Anda tidak dapat melihat tab "Scripts", pastikan Anda meluncurkan Chrome dengan argumen yang benar. Saya mengalami masalah ini ketika saya meluncurkan Chrome untuk debugging JavaScript sisi-server dengan argumen --remote-shell-port=9222. Saya tidak punya masalah jika saya meluncurkan Chrome tanpa argumen.

FallenAngel
sumber
Bisakah Anda menjelaskan lebih lanjut? Saya mengalami masalah persis ini - tidak dapat melihat tab skrip sama sekali. Saya mengunduh build developer chrome terbaru.
tom redfern
2

Saya menemukan masalah ini, namun fungsi inline saya tidak memiliki pandangan angularJS. Karenanya pada beban saya tidak dapat mengakses skrip inline untuk menambahkan debug, karena hanya index.html yang tersedia di tab sumber debugger.

Ini berarti bahwa ketika saya membuka tampilan tertentu dengan inline saya (tidak punya pilihan tentang ini) itu tidak dapat diakses.

Satu-satunya cara saya dapat menekannya adalah dengan menempatkan fungsi yang salah atau memanggil di dalam fungsi JS inline.

Solusi saya termasuk: 

function doMyInline(data) {
        //Throw my undefined error here. 
        $("select.Sel").debug();

        //This is the real onclick i was passing to 
        angular.element(document.getElementById(data.id)).scope().doblablabla(data.id);
    }

Ini berarti ketika saya mengklik tombol saya, saya kemudian diminta dalam konsol chrome. 

Uncaught TypeError: undefined is not a function

Yang penting di sini adalah sumbernya: VM5658:6 mengklik ini memungkinkan saya untuk melangkah melalui inline dan menahan break point di sana untuk nanti ..

Cara yang sangat berbelit-belit untuk mencapainya .. Tapi itu berhasil dan mungkin terbukti berguna ketika berhadapan dengan aplikasi satu halaman yang secara dinamis memuat pandangan Anda.

Tidak VM[n]memiliki nilai yang signifikan, dan npada setara dengan ID skrip. Info ini dapat ditemukan di sini: Chrome "[VM]"

Pogrindis
sumber
1

Menggunakan Visual Studio (2012) Saya memiliki masalah yang sama dan beralih ke IIS Express memecahkan masalah!

The scripttag typeatribut tidak faktor ke dalamnya.

Untuk beberapa alasan Server Pengembangan Visual Studio tidak memberikan semua yang dibutuhkan Chrome untuk mengaktifkan breakpoints.

melarikan diri-llc
sumber
1

Saya tahu Q bukan tentang Firefoxtetapi saya tidak ingin menambahkan salinan pertanyaan ini untuk hanya menjawabnya sendiri.

Untuk Firefox Anda perlu menambahkan debugger;untuk dapat melakukan apa yang disarankan @ matt-ball untuk scripttag.

Jadi pada kode Anda, Anda menambahkan di debuggeratas garis yang ingin Anda debug dan kemudian Anda dapat menambahkan breakpoints. Jika Anda hanya mengatur breakpoint pada browser, itu tidak akan berhenti.

Jika ini bukan tempat untuk menambahkan jawaban Firefox mengingat pertanyaannya adalah tentang Chrome. Jangan :( minus jawabannya, beri tahu saya di mana saya harus mempostingnya dan saya akan dengan senang hati memindahkan posting. :)

T04435
sumber
0

Ini adalah perpanjangan dari jawaban Rian Schmits di atas. Dalam kasus saya, saya memiliki kode HTML yang tertanam dalam kode JavaScript saya dan saya tidak bisa melihat apa pun selain kode HTML. Mungkin Chrome Debugging telah berubah selama bertahun-tahun tetapi mengklik kanan tab Sumber / Sumber memberi saya Tambahkan folder ke ruang kerja . Saya dapat menambahkan seluruh proyek saya, yang memberi saya akses ke semua JavaScripts saya. Anda dapat menemukan lebih detail di tautan ini . Saya harap ini membantu seseorang.

Patricia
sumber