Temukan definisi fungsi JavaScript di Chrome

282

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 .

javascript  google-chrome-devtools 
— Ryan DuVal
sumber
3
Ada bilah pencarian yang menangkap file saat ini di tab Script dan Anda dapat mengintip isi suatu fungsi dengan mencetaknya. Tapi saya sekarang penasaran jika ada cara untuk melakukan pencarian yang lebih umum seperti yang Anda inginkan ...
— hugomg
3
Dengan Alat Pengembang Google Chrome, di "Sumber" Ketuk -> jendela kanan Anda harus kemungkinan untuk mengatur "Breakpoints Peristiwa".
Dalam kasus saya, saya memiliki set variabel ke fungsi yang tidak diketahui. Saya melakukan myvar.toString () dan mencetak: "function Object () {[kode asli]}" yang hanya perlu saya ketahui.
— Ring

Jawaban:

366

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.

— plesiv
sumber
8
Nah, itu yang saya bicarakan! Saya tidak tahu panel itu ada - dan bagaimana Anda akan melakukannya?
— Ryan DuVal
22
cmd + option + F pada OSX
— Stiggler
2
Ini hanya satu cara untuk mendefinisikan suatu fungsi bernama foo. Ada yang lain. Bagaimana jika fungsi kita adalah mis bar['foo']? (Tidak ada jawaban yang baik untuk pertanyaan itu, sejauh yang saya tahu --- pada dasarnya "jangan menulis kode yang berbelit-belit")
— Steven Lu
1
Saya tidak dapat menemukan "definisi fungsi" menggunakan jawaban yang dipilih. Saya telah mencari di Google dan tidak dapat menemukan bantuan. (Menggunakan Chrome Versi 41.0.2272.118 m)
— Web_Developer
7
Dan kemudian Anda gagal menemukan deklarasi fungsi, ekspresi fungsi yang dihasilkan secara dinamis, dan fungsi anonim (tidak bernama). Saya lebih suka sesuatu seperti Firefox: Klik referensi fungsi di panel arloji -> Langsung ke referensi fungsi.
— Fagner Brack
77

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

Tangkapan layar bernilai jutaan kata:

Alat Dev Chrome> Konsol> Tampilkan Definisi Fungsi

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!

— Dmitry Pashkevich
sumber
1
Apakah ada jalan pintas atau fungsi yang akan memungkinkan untuk mencari dengan referensi fungsi? seperti "> inspect (document.body)". Untuk saat ini saya harus d> tmp = {a: myFunc}; > tmp, diikuti oleh "Tampilkan definisi fungsi"
— Dennis C
16
Saya pikir Anda bisa melakukannyadir(myFunc)
— Dmitry Pashkevich
dir (myFunc) jauh lebih baik, tetapi masih membutuhkan dua klik dan mouse
— Dennis C
1
Oh, maksud Anda jika Anda bisa melakukannya sepenuhnya dari keyboard? Sesuatu seperti findDefinition(myFunc)? AFAIK yang belum ada ...
— Dmitry Pashkevich
Jika Anda tidak memiliki objek yang berisi fungsi tersebut, Anda dapat membuat objek di sekitarnya dan itu masih berfungsi. Misalnya dalam jenis konsol:({1:somefunction}) lalu klik kanan fungsi di dalam objek yang dicetak.
— Pelindung satu
47

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.

— joar
sumber
1
Itu tidak berfungsi untuk saya (walaupun fungsi tidak didefinisikan dalam halaman):> toggle_search ReferenceError: toggle_search tidak didefinisikan
— Ryan DuVal
Aah, lihat edit saya. Selain itu, menggunakan fungsi pencarian akan membantu Anda. Chrome devtools bukan IDE, ini debugger :)
— joar
1
Ini berfungsi untuk menemukan definisi fungsi yang sedang aktif.
— Patrick
1
Ini sebenarnya menyiratkan bahwa fungsi telah didefinisikan dalam ruang lingkup saat ini .
— Jonathan
1
@aroth Setidaknya di Chrome 45, ini berfungsi lagi. Saya sadar bahwa beberapa hal berubah di suatu tempat antara saat ini diposting dan sekarang. Secara konklusif, tampaknya berfungsi kembali.
— joar
32

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.

— arthur.sw
sumber
1
baik, apa yang tampaknya dilakukan ini bukan "pergi ke definisi" dari panggilan fungsi yang sewenang-wenang, tetapi "menunjukkan kepada Anda semua nama fungsi dalam file saat ini dan membiarkan Anda pergi ke mereka" - yang agak berguna juga.
— Scott Weaver
Ini persis apa yang saya cari, fitur yang mirip dengan firefox! Di firefox Anda cukup membuka alat dev, tekan Ctrl + f, dan itu akan mencari fungsi JS di semua panel (HTML / CSS / Javascript / dll.). Ini melakukannya, tidak seperti fitur regex yang disebutkan dalam jawaban lain.
— javaBean007
@Randy, pada versi chrome yang mana? OS yang mana? Saya menggunakan Chrome Versi 59.0.3071.115 pada OS X dan berfungsi dengan baik.
— arthur.sw
@ arthur.sw Maaf, saya tidak menyadari Anda harus menjadi sumber agar ini berfungsi. Saya berharap itu bekerja di konsol juga.
— Randy
Bagi saya menu chrome terbuka jika saya menekan kombinasi tombol di konsol dev.
— Hitam
19

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.

— Răzvan Flavius ​​Panda
sumber
17

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
— Deepak Dixit
sumber
fungsi yang saya cari adalah stop () dan digunakan sebagai onmouseover = "this.stop ();" ketika saya melakukan apa yang Anda katakan, itu mengembalikan: stop () {[kode asli]} Jadi apa yang harus dilakukan sekarang?
— Tarik
functionName.toSource()juga berfungsi pada versi chrome terbaru.
— Sourav Ghosh
1
@Tarik Lihatlah dokumentasi online untuk builtin stop.
— Dana Gugatan Monica
@QPaysTaxes Terima kasih, saya sekarang mengerti bahwa ketika kembali: stop () {[kode asli]} di sana kode asli berarti Ini bukan fungsi pribadi, itu adalah fungsi internal dan saya harus mencari dokumentasi online dari fungsi tersebut.
— Tarik
6

di konsol Chrome:

debug(MyFunction)
MyFunction()
— Igor Krupitsky
sumber
1
Aku suka itu. Patut diperhatikan: lakukan undebug(MyFunction)untuk menghapus breakpoint lagi (setelah Anda menemukan implementasi metode)
— Andreas Dolk
5

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.
— Chris Robinson
sumber
1

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.

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

— subhro
sumber
0

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:

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

— Abdollah
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.