Temukan definisi fungsi JavaScript di Chrome

Alat Pengembang Chrome bergetar, tetapi satu hal yang tampaknya tidak mereka miliki (yang dapat saya temukan) adalah cara untuk menemukan definisi fungsi JavaScript. Ini akan sangat berguna bagi saya karena saya sedang mengerjakan situs yang menyertakan banyak file JS eksternal. Tentu grep menyelesaikan ini tetapi di browser akan jauh lebih baik. Maksud saya, browser harus mengetahui hal ini, jadi mengapa tidak memaparkannya? Apa yang saya harapkan adalah sesuatu seperti:

• Pilih 'Periksa Elemen' dari halaman, yang menyoroti garis pada tab Elemen
• Klik kanan baris dan pilih 'Pergi ke definisi fungsi'
• Script yang benar dimuat di tab Script dan melompat ke definisi fungsi

Pertama, apakah fungsi ini ada dan saya hanya melewatkannya?

Dan jika tidak, saya menduga ini akan datang dari WebKit, tetapi tidak dapat menemukan apa pun untuk permintaan fitur Alat Pengembang atau Bugzilla WebKit .

Katakanlah kita sedang mencari fungsi bernama foo:

1. (buka alat pengembang Chrome),
2. Windows: ctrl+ shift+ F, atau macOS: cmd+ optn+ F. Ini membuka jendela untuk mencari di semua skrip.
3. centang kotak "Ekspresi reguler",
4. search foo\s*=\s*function(mencari foo = functiondengan sejumlah spasi di antara ketiga token itu),
5. tekan pada hasil yang dikembalikan.

Varian lain untuk definisi fungsi adalah function\s*foo\s*\(untuk function foo(dengan jumlah spasi di antara ketiga token tersebut.

Ini mendarat di Chrome pada 2012-08-26 Tidak yakin tentang versi pastinya, saya perhatikan di Chrome 24.

Tangkapan layar bernilai jutaan kata:

Saya memeriksa objek dengan metode di Konsol. Mengklik pada "Tampilkan definisi fungsi" membawa saya ke tempat dalam kode sumber tempat fungsi didefinisikan. Atau saya bisa mengarahkan kursor ke function () {kata untuk melihat fungsi tubuh di tooltip. Anda dapat dengan mudah memeriksa seluruh rantai prototipe seperti ini! CDT pasti rock !!!

Semoga Anda semua merasa terbantu!

Anda dapat mencetak fungsi dengan mengevaluasi namanya di konsol, seperti itu

> unknownFunc
function unknownFunc(unknown) {
    alert('unknown seems to be ' + unknown);
}

ini tidak akan berfungsi untuk fungsi bawaan, mereka hanya akan menampilkan [native code]alih-alih kode sumber.

EDIT : ini menyiratkan bahwa fungsi telah didefinisikan dalam ruang lingkup saat ini.

Pembaruan 2016 : di Versi Chrome 51.0.2704.103

Ada jalan Go to memberpintas (tercantum dalam settings > shortcut > Text Editor). Buka file yang berisi fungsi Anda (di sourcespanel DevTools) dan tekan:

ctrl+ shift+O

atau di OS X:

⌘+ shift+O

Ini memungkinkan untuk membuat daftar dan menjangkau anggota file saat ini.

Cara lain untuk menavigasi ke lokasi definisi fungsi adalah dengan membobol debugger di suatu tempat Anda dapat mengakses fungsi dan memasukkan fungsi nama yang sepenuhnya memenuhi syarat di konsol. Ini akan mencetak definisi fungsi di konsol dan memberikan tautan yang di klik membuka lokasi skrip di mana fungsi tersebut didefinisikan.

Browser yang berbeda melakukan ini secara berbeda.

1. Pertama buka jendela konsol dengan mengklik kanan pada halaman dan memilih "Periksa Elemen", atau dengan menekan F12.

2. Di konsol, ketik ...

   • Firefox

     functionName.toSource()

   • Chrome

     functionName

di konsol Chrome:

debug(MyFunction)
MyFunction()

Saya menemukan cara tercepat untuk menemukan fungsi global adalah:

1. Pilih Sumber tab .
2. Di panel Watch klik + dan ketik jendela
3. Referensi fungsi global Anda terdaftar pertama kali, berdasarkan abjad.
4. Klik kanan fungsi yang Anda minati.
5. Di menu popup pilih Tampilkan definisi fungsi .
6. Panel kode sumber beralih ke definisi fungsi itu.

Di Google chrome, Periksa alat elemen Anda dapat melihat definisi fungsi Javascript apa pun.

1. Klik pada tab Sumber. Kemudian pilih halaman indeks. Cari fungsinya.

2. Pilih fungsi lalu Klik kanan pada fungsi dan pilih "Evaluasi teks yang dipilih di konsol."

Jika Anda sudah melakukan debugging, Anda dapat mengarahkan kursor ke fungsi dan tooltip akan memungkinkan Anda untuk menavigasi langsung ke definisi fungsi:

Bacaan lebih lanjut :

• Chrome DevTools> Referensi Debugging JavaScript

Saya memiliki masalah yang sama dalam menemukan sumber metode objek. Nama objek myTreedan metodenya load. Saya meletakkan breakpoint pada baris yang disebut metode itu. Dengan memuat ulang halaman, eksekusi berhenti pada saat itu. Kemudian pada konsol DevTools, saya mengetik objek bersama dengan nama metode, yaitu myTree.loaddan tekan Enter. Definisi metode ini dicetak pada konsol:

Juga, dengan klik kanan pada definisi, Anda dapat pergi ke definisinya dalam kode sumber: