Apakah mungkin untuk men-debug JavaScript pemuatan dinamis oleh beberapa debugger seperti WebKit, FireBug atau Alat Pengembang IE8?

90

Dari pertanyaan saya baru-baru ini , saya sudah membuat beberapa fungsi JavaScript untuk tampilan parsial pemuatan dinamis. Jadi, saya tidak dapat men-debug JavaScript pemuatan dinamis apa pun. Karena semua JavaScript yang dimuat akan dievaluasi oleh fungsi "eval".

Namun, saya menemukan cara untuk membuat JavaScript baru dengan menggunakan script berikut untuk membuat script secara dinamis menjadi header dari dokumen saat ini. Semua skrip yang dimuat akan ditampilkan di DOM HTML (Anda dapat menggunakan debugger apa pun untuk menemukannya).

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.text = "alert('Test!');";

document.getElementsByTagName('head')[0].appendChild(script);

Omong-omong, sebagian besar debugger (Toolbar Pengembang IE8, Firebug, dan Google Chrome) tidak dapat menyetel breakpoint dalam skrip dinamis apa pun. Karena skrip debuggable harus dimuat pertama kali setelah halaman dimuat.

Apakah Anda memiliki ide untuk men-debug di file atau konten skrip dinamis?

Perbarui 1 - Tambahkan kode sumber untuk pengujian

Anda dapat menggunakan file xhtml berikut untuk mencoba men-debug nilai someVariable.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>    
    <title>Dynamic Loading Script Testing</title>
    <script type="text/javascript">
    function page_load()
    {       
        var script = document.createElement('script')
        script.setAttribute("id", "dynamicLoadingScript");
        script.setAttribute("type","text/javascript");
        script.text =   "var someVariable = 0;\n" +
                        "someVariable = window.outerWidth;\n" +
                        "alert(someVariable);";

        document.getElementsByTagName('head')[0].appendChild(script);
    }
    </script>
</head>
<body onload="page_load();">
</body>
</html>

Dari jawaban tersebut, saya baru mengujinya di FireBug. Hasilnya harus ditampilkan seperti gambar di bawah ini.

teks alt http://d7cgnq.bay.livefilestore.com/y1pJGV27qEARXzZhsMMhPD5z0OxAtnkQK8eKeEXMAxuHjsuWeAq1aGl7sTISRNqVv3lw8ghyxE_GorlwSJDvTql0m0Y

Harap lihat skrip "dynamicLoadingScript" yang ditambahkan setelah pemuatan halaman.

teks alt http://d7cgnq.bay.livefilestore.com/y1pz_RwqjgeVqe2mAlUZha0PalpPdP0X5AiwJcQhYahERlnbPDdZpb-_d1e96Q-14raSDMJOBsdcV9jug-sc

Tetapi tidak ditemukan di tab skrip FireBug

Pembaruan 2 - Buat Breakpoint Debug dalam skrip pemuatan dinamis

teks alt http://d7cgnq.bay.livefilestore.com/y1peKdIMOztXss-pc8PlJEmaGov_0ShYnLsuDdK5OLETbCG0UpkX6Te29w0YW2pNKaD_0ANAiizh2GdGPADAp_1q0JWAETo204Qoiw/

teks alt http://d7cgnq.bay.livefilestore.com/y1pUeHaHoTXj0WBl74fnTrXwdr_y7s7h8jNKfslSONgshzZBpUddGHNBWA9cXRabo3HAl3QazeozrCABo7pNVQc1Aclogle

Kedua gambar di atas menunjukkan penyisipan "debugger;" pernyataan di beberapa baris skrip dapat mengaktifkan breakpoint dalam skrip pemuatan dinamis. Namun, kedua debugger tidak menampilkan kode apa pun pada breakpoint. Oleh karena itu, tidak ada gunanya melakukan ini.

Terima kasih,

javascript ajax Soul_Master
sumber
Apakah Anda kebetulan menemukan solusi untuk ini? Saya di sini dengan masalah yang sama.
adamJLev
Coba muat file terpisah secara dinamis yaitu lihat di sini untuk implementasi queryj.com/2011/03/11/a-lightweight-script-loader - Saya menemukan debugger menangani itu dengan jauh lebih mudah.
James Westgate
@ infinity, lihat solusi saya
Manusia Molekuler
3
2014 dan gambar Anda masih mati - Bisakah Anda memperbaruinya?
TheGeekZn
Saya memiliki pertanyaan serupa tetapi saya tidak tahu karena gambarnya rusak. Bisakah Anda memperbaruinya?
Eric

Jawaban:

118

Mungkin juga menggunakan chrome untuk hal yang sama. Chrome memiliki fitur di mana Anda dapat menentukan atribut parser dan membuat potongan JS dinamis muncul sebagai file yang kemudian dapat dijelajahi dan menetapkan titik putus.

atribut yang perlu disetel adalah 

//# sourceURL=dynamicScript.js

di mana dynamicScript.js adalah nama file yang seharusnya muncul di browser file skrip.

Informasi lebih lanjut di sini

Paul Irish juga membicarakannya secara singkat dalam ceramahnya yang luar biasa tentang Tooling & The Webapp Development Stack

icecubed
sumber
5
Jika seseorang mengalami masalah dengan MVC3 / Razor, ingatlah untuk menghindari simbol @, jadi sesuatu seperti // @@ sourceURL = dynamicscript.js Dan hanya fyi, di atas juga berfungsi di firebug.
parsh
1
Anda juga dapat menggunakan fitur ini untuk javascript sebaris dinamis. Tetapi, jika Anda memiliki beberapa pengecualian dalam skrip itu, Anda tidak akan melihatnya di daftar sumber.
Roman Snitko
4
Perhatikan bahwa sintaks baru adalah "// # sourceURL = dynamicScript.js" berubah dari @ menjadi #
Cekk
3
tautan yang diperbarui ke bagian alat pengembang Chrome di peta sumber adalah - developer.chrome.com/devtools/docs/…
chrismarx
3
Bagi saya, file js ditampilkan di daftar sumber dalam grup yang disebut "(tidak ada domain)". Mungkin layak disebut karena saya melewatkannya pada awalnya!
JMac
21

Coba tambahkan "debugger;" pernyataan di javascript yang Anda tambahkan secara dinamis. Ini harus menyebabkannya berhenti di baris itu terlepas dari pengaturan breakpoint.

Joeri Sebrechts
sumber
Yang dapat saya temukan hanyalah ini: code.google.com/p/fbug/issues/detail?id=1259 . Omong-omong, saya menggunakan tag skrip yang ditambahkan ke head untuk memuat skrip secara dinamis (tetapi menggunakan atribut src), dan kode yang ditambahkan dengan cara ini dapat di-debug untuk saya di semua browser, meskipun tidak dimuat bersama dengan halaman awal.
Joeri Sebrechts
Apa kode persis yang Anda gunakan untuk menambahkan tag skrip? Saya mengalami masalah yang sama dengan OP, yang membuatnya tidak mungkin untuk men-debug file JS yang dimuat secara dinamis di Chrome. Terima kasih!
adamJLev
var loaderNode = document.createElement ("script"); loaderNode.setAttribute ("type", "text / javascript"); loaderNode.setAttribute ("src", url); document.getElementsByTagName ("head") [0] .appendChild (loaderNode);
Joeri Sebrechts
18

Ya, (sekarang) dimungkinkan untuk men-debug JavaScript yang dimuat secara dinamis menggunakan Google Chrome!

Tidak perlu menambahkan debugger;atribut ekstra atau lainnya untuk file JS yang dimuat secara dinamis. Cukup ikuti langkah-langkah di bawah ini untuk men-debug:

Metode 1:

Pimpinan teknis saya baru saja menunjukkan cara yang sangat mudah untuk men-debug metode Javascript yang dimuat secara dinamis.

  1. Buka Konsol chrome dan tulis nama metode dan tekan enter.
    Dalam kasus saya, ini adalah GetAdvancedSearchConditonRowNew
    Jika metode JS telah dimuat maka itu akan menunjukkan definisi metode tersebut.

masukkan deskripsi gambar di sini

  1. Klik pada definisi metode dan seluruh file JS akan dibuka untuk debugging :)

masukkan deskripsi gambar di sini

Metode 2:

Sebagai contoh, saya memuat file JS ketika saya mengklik tombol menggunakan ajaxpanggilan.

  1. Buka networktab di alat dev google chrome
  2. Klik pada sebuah kontrol (ex. Tombol) yang memuat beberapa file javascript dan memanggil beberapa fungsi javascript.
  3. amati tab jaringan dan cari fungsi JS itu (dalam kasus saya itu RetrieveAllTags?_=1451974716935)
  4. Arahkan kursor ke atasnya initiaterdan Anda akan menemukan file JS Anda yang dimuat secara dinamis (dengan awalan VM*).

debug JavaScript pemuatan dinamis di chrome -1

  1. Klik pada VM*file itu untuk membukanya.
  2. Letakkan debugger dimanapun Anda inginkan dalam file itu: D

debug JavaScript pemuatan dinamis di chrome -1

GorvGoyl
sumber
Malu di Google karena membuat ini begitu bodoh. 1 / Malu = Kudos (kebalikan dari rasa malu) kepada Anda karena menariknya keluar :)
toddmo
16

Saya menggunakan google chrome untuk tujuan itu.

Di chrome di tab scripts Anda dapat mengaktifkan 'pause on all exception'

masukkan deskripsi gambar di sini

Dan kemudian letakkan di suatu tempat di baris kode Anda try{throw ''} catch(e){} . Chrome akan menghentikan eksekusi saat mencapai garis ini.

EDIT: gambar yang dimodifikasi sehingga akan lebih jelas apa yang saya bicarakan.

Manusia Molekuler
sumber
Untuk mengembangkan di Google Chrome, Anda harus memasukkan beberapa teks yang menunjukkan nama skrip dinamis saat ini ketika jQuery atau skrip pemuatan lainnya menambahkan skrip ke DOM seperti yang saya laporkan ke tim jQuery. Tapi saya tidak punya waktu untuk mengerjakannya. bugs.jquery.com/ticket/8292
Soul_Master
@Soul_Master, tetapi menggunakan metode saya, Anda tidak perlu memasukkan teks. Anda memasukkan dalam baris skrip dinamis Anda try{throw ''} catch(e){}kemudian mengaktifkan mode 'jeda pada semua pengecualian' dan chrome akan menghentikan eksekusi saat pengecualian dilemparkan. Saya sudah memeriksanya berkali-kali. Saya memuat gambar lain. Lebih jelas di sana apa yang saya bicarakan.
Manusia Molekuler
Di chrome, Anda dapat menggunakan pernyataan "debugger;" untuk menghentikan pernyataan saat panel debugger terbuka. Chrome akan mengabaikan ini jika panel debugger ditutup.
dinesh ygv
@dineshygv, Anda dapat ... sekarang. Tapi Anda tidak bisa 3 tahun lalu. debuggertidak akan berfungsi dalam skrip yang dibuat secara dinamis saat itu.
Manusia Molekuler
10

Saya rasa Anda mungkin perlu memberi kode evaluasi "nama" seperti ini:

http://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/

Jika Anda melakukannya, saya pikir kemungkinan debuggerpendekatan dari "update 2" seharusnya berfungsi.

Kyle Simpson
sumber
Iya. Saya melihatnya. Saya sudah melaporkan bug ini ke tim jQuery untuk waktu yang lama. bugs.jquery.com/ticket/8292
Soul_Master
1
Peringatan! teknik yang dijelaskan menyebabkan kesalahan di IE7, jadi jangan tinggalkan //@ sourceURL=blahdalam produksi.
Jethro Larson
itu mungkin debuggerbagian yang menyebabkan masalah, bukan komentar sumber (yang pasti diabaikan oleh JS)
Kyle Simpson
Hal ini dapat menyebabkan masalah dengan kompilasi bersyarat yaitu. mis .: javascriptkit.com/javatutors/conditionalcompile.shtml
Jethro Larson
5

UPDATE : sintaks untuk sourceUrl telah diubah (@ diganti dengan #) untuk menghindari kesalahan pada browser yang tidak didukung (baca: IE). Detail

DJ_HOEK
sumber
2

Menggunakan Chrome (12.0.742.112) dengan kode yang Anda berikan plus pernyataan debugger seperti ini

    script.text =   "debugger;var someVariable = 0;\n" +
    "someVariable = window.outerWidth;\n" +
    "alert(someVariable);";

chrome_debugger

bekerja untuk saya.

Saya perlu memodifikasi beberapa JavaScript (membatasi ruang lingkup semua pemilih jQuery menjadi div parsial> tampilan saat ini) sebelum menjalankannya.

Mungkin lebih nyata jika Anda mengikat perubahan pemilih ke acara pada tampilan parsial Anda daripada membuat elemen skrip di badan html (rasanya tidak benar).

Anda bisa melakukan sesuatu seperti ini

   (function(j)(
      var limiting_selector = '';
      j(".partial_views").bind('focusin over',function(e){
         limiting_selector = j(this).attr('someattr') // or j(this).data('limiting-selector')
      }).bind('focusout out',function(e){
         limiting_selector = '';
      });
      // And then go on with
      // j(limiting_selector+' .someclass')
   ))(jQuery)

Kode ini akan selalu menambahkan selektor pembatas ke semua operasi pemilihan jQuery yang dilakukan saat mouse berada dalam elemen tertentu mengingat HTML tidak akan kacau.

(Masih tampak seperti peretas, mungkin seseorang memiliki solusi yang lebih baik)

Bersulang

krichard
sumber
1

Di Firebug, Anda seharusnya dapat melihat skrip tersebut setelah halaman dimuat dan skrip dimasukkan. Saat melakukannya, Anda dapat menyetel breakpoint di tempat yang sesuai, dan itu akan dipertahankan saat Anda menyegarkan halaman.

Moishe Lettvin
sumber
Kamu benar. Itu tidak berhasil. Saya mencobanya dengan eval () dan Firebug akan membiarkan Anda menetapkan breakpoint saat Anda menggunakannya. Apakah ada alasan Anda tidak dapat menggunakan eval () dan perlu menyetel tag skrip? Lebih umum lagi, adakah alasan Anda tidak dapat menyajikan javascript dinamis ini sebagai file .js terpisah di server Anda? Masalah apa yang sedang ingin kamu selesaikan?
Moishe Lettvin
Saya perlu memodifikasi beberapa JavaScript (membatasi ruang lingkup semua pemilih jQuery ke div tampilan parsial saat ini) sebelum menjalankannya. Atau Anda punya ide untuk memecahkan pertanyaan saya baru-baru ini. Untuk informasi lebih lanjut silakan lihat pertanyaan terbaru saya.
Soul_Master
1

Javascript yang dimuat secara dinamis masih harus diurai oleh browser ini adalah tempat WebKit, atau FireBug debugger berada sehingga tunduk pada debugger apa pun yang terjadi, saya pikir ini sama untuk alat pengembang di IE8,

Jadi kode Anda tunduk pada debugger jadi di mana Anda mendapatkan masalah tidak akan ada di file atau teks itu jika tidak ada kesalahan

Hal lain script.text = "alert('Test!');";adalah tidak valid sehingga tidak akan berfungsi di semua browser apa yang Anda inginkanscript.innerHTML = "alert('Test!');";

Meskipun innerHTML-nya berarti kode di dalam Tag HTML bukan HTML di dalamnya hanya sebagian besar orang yang menggunakannya untuk ini sehingga salah dijelaskan

DIEDIT UNTUK PEMBARUAN DUA

Dan pada pembaruan kedua menggunakan Chrome saya melakukan ini

pergi ke about: blank Buka konsol ke atas dan lalu masuk 

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.innerHTML = "alert('Test!');debugger;";

document.getElementsByTagName('head')[0].appendChild(script);

maka itu akan merusak dan membuka tab skrip dengan about: blank ditampilkan (tidak ada yang dilihat)

Kemudian di sisi kanan tunjukkan daftar tumpukan panggilan, lalu klik yang kedua (fungsi anonim) dan itu akan menunjukkan kepada Anda.

Jadi pada file Anda, Anda akan memiliki (fungsi anonim) yaitu kode yang Anda jalankan dan Anda akan melihat break point di sana. jadi Anda tahu Anda yang benar.

Barkermn01
sumber
0

Menggunakan Alat Pengembang Google Chrome (atau Safari ), Anda dapat menjalankan JavaScript baris demi baris. Skrip

Alat Pengembang Pilih skrip mana yang ingin Anda debug tanda jeda di sisi kanan Atau atur breakpoint dengan mengklik nomor baris>>>

Derek 朕 會 功夫
sumber
0

Salah satu opsi yang saya suka menggunakannya adalah menambahkan pernyataan console.log ('') di kode saya. Setelah pernyataan ini muncul di konsol, nomor baris akan dikaitkan dengannya. Anda dapat mengklik nomor itu untuk pergi ke lokasi di sumber dan menetapkan breakpoint. Kelemahan dari pendekatan ini adalah bahwa breakpoint tidak dipertahankan di seluruh halaman yang dimuat ulang dan Anda harus menjalankan seluruh kode sebelum Anda dapat menambahkan debugger.

IcedDante
sumber
0

Untuk browser Google Chrome saat ini atau browser modern lainnya, Anda dapat dengan mudah mencari kode yang dievaluasi dengan alat pengembang seperti gambar berikut.

  1. Simulasikan beberapa file pemuatan dinamis.

masukkan deskripsi gambar di sini

  1. Tekan Ctrl + Shift + F di tab sumber dan cari fungsi di atas.

masukkan deskripsi gambar di sini

Buat beberapa breakpoint dan jalankan fungsi untuk mengujinya.

masukkan deskripsi gambar di sini

Soul_Master
sumber