Chrome'da JavaScript işlev tanımını bulma

282

Chrome'un Geliştirici Araçları rock, ancak sahip olmadığı bir şey (bulabildiğim), bir JavaScript işlevinin tanımını bulmanın bir yoludur. Birçok harici JS dosyası içeren bir sitede çalıştığım için bu benim için çok kullanışlı olurdu. Tabii grep bunu çözer ama tarayıcıda çok daha iyi olurdu. Demek istediğim, tarayıcı bunu bilmeli, neden açığa vurmasın ki? Beklediğim gibi bir şeydi:

  • Öğeler sekmesindeki satırı vurgulayan sayfadan 'Öğeyi Denetle'yi seçin
  • Çizgiyi sağ tıklayın ve 'İşlev tanımına git'i seçin
  • Komut dosyaları sekmesine doğru komut dosyası yüklenir ve işlev tanımına atlar

Öncelikle, bu işlevsellik var mı ve onu kaçırıyorum?

Değilse, bunun WebKit'ten geleceğini tahmin ediyorum, ancak Geliştirici Aracı özellik istekleri veya WebKit'in Bugzilla'sı için hiçbir şey bulamadı .

javascript  google-chrome-devtools 
— Ryan DuVal
kaynak
3
Komut Dosyaları sekmesinde geçerli dosyayı açacak bir arama çubuğu vardır ve bir işlevin içeriğini yazdırarak göz atabilirsiniz. Ama şimdi istediğin gibi daha genel bir arama yapmanın bir yolu varsa merak ediyorum ...
— hugomg
3
Google Chrome Geliştirici Araçları ile, "Kaynaklar" Dokunun -> sağ penceresinde "Etkinlik Kesme Noktaları" nı ayarlama olanağınız vardır.
Benim durumumda bilinmeyen bir fonksiyona ayarlanmış bir değişkenim vardı. Ben myvar.toString () yaptım ve yazdırdı: "function Object () {[native code]}" tüm bilmem gereken.
— Ring

Yanıtlar:

366

Diyelim ki şu isme sahip bir fonksiyon arıyoruz foo:

  1. (Chrome geliştirici araçlarını açın),
  2. Windows: ctrl+ shift+ Fveya macOS: cmd+ optn+ F. Bu, tüm komut dosyalarında arama yapmak için bir pencere açar.
  3. "Normal ifade" onay kutusunu işaretleyin,
  4. arama foo\s*=\s*function( foo = functionbu üç belirteç arasındaki herhangi bir sayıda boşlukla arama yapar ),
  5. döndürülen sonuca basın.

İşlev tanımı için diğer bir varyant function\s*foo\s*\(için function foo(, bu üç jeton arasındaki boşlukların herhangi bir sayıda.

— plesiv
kaynak
8
Şimdi bundan bahsediyorum! Bölmenin bile var olduğu hakkında hiçbir fikrim yoktu - ve nasıl?
— Ryan DuVal
22
— OSD'de
2
Bu, adlandırılmış bir işlevi tanımlamanın yalnızca bir yoludur foo. Başkaları da var. İşlevimiz örneğin ise ne olur bar['foo']? (Bu soruya iyi bir cevap yok, bildiğim kadarıyla --- aslında "kıvrımlı kod yazma")
— Steven Lu
1
Seçilen cevabı kullanarak "fonksiyon tanımı" bulamadım. Google'da arama yaptım ve herhangi bir yardım bulamadım. (Chrome Sürüm 41.0.2272.118 m'yi kullanarak)
— Web_Developer
7
Ve sonra işlev bildirimlerini, dinamik olarak oluşturulan işlev ifadelerini ve anonim (adsız) işlevleri bulamazsınız. Firefox gibi bir şey istiyorum: Saat panelinde fonksiyon referansını tıklayın -> Fonksiyon referansına atlayın.
— Fagner Brack
77

Bu , 2012-08-26 tarihinde Chrome'a ​​indi Tam sürümden emin değilim, Chrome 24'te fark ettim.

Ekran görüntüsü bir milyon kelimeye bedeldir:

Chrome Geliştirme Araçları> Konsol> İşlev Tanımını Göster

Konsoldaki yöntemlerle bir nesneyi inceliyorum. "İşlev tanımını göster" i tıklatmak beni kaynak kodunda işlevin tanımlandığı yere götürür. Veya function () {bir araç ipucunda işlev gövdesini görmek için kelimenin üzerine gelebilirim . Tüm prototip zincirini bu şekilde kolayca inceleyebilirsiniz! CDT kesinlikle kaya !!!

Umarım hepiniz faydalı bulursunuz!

— Dmitry Pashkevich
kaynak
1
Bir işlev başvurusu ile arama yapmaya izin verecek bir kısayol veya işlev var mı? "> inceleyin (document.body)" gibi. Şimdilik d> tmp = {a: myFunc}; > tmp, ardından "İşlev tanımını göster"
— Dennis C
16
Yapabileceğinizi düşünüyorumdir(myFunc)
— Dmitry Pashkevich
dir (myFunc) çok daha iyi, ama yine de iki tıklama ve fare gerekiyor
— Dennis C
1
Oh, yani tamamen klavyeden yapabilir misin? Gibi bir şey findDefinition(myFunc)? Henüz var olmayan AFAIK ...
— Dmitry Pashkevich
İşlevi içeren bir nesneniz yoksa, etrafında bir nesne oluşturabilirsiniz ve yine de çalışır. Konsol türünde: ({1:somefunction})yazdırılan nesnenin içindeki işlevi sağ tıklatın.
— Koruyucu bir
47

Konsoldaki adını değerlendirerek işlevi yazdırabilirsiniz, örneğin

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

bu yerleşik işlevler için çalışmaz, yalnızca [native code]kaynak kodu yerine görüntülenir .

EDIT : Bu, işlevin geçerli kapsam içinde tanımlandığını gösterir.

— Joar
kaynak
1
Bu benim için işe yaramıyor (sayfada tanımlanan işlevlerle bile):> toggle_search ReferenceError: toggle_search tanımlı değil
— Ryan DuVal
Aah, düzenlememi görün. Aksi takdirde, arama işlevini kullanarak size yardımcı olacaktır. Chrome devtools bir IDE değil, bir hata ayıklayıcı :)
— joar
1
Bu, işlevin geçerli olarak etkin tanımını bulmak için çalışır.
— Patrick
1
Aslında işlevin geçerli kapsam içinde tanımlandığı anlamına gelir .
— Jonathan
1
@aroth En azından Chrome 45'te bu tekrar çalışıyor. Bunun yayınlandığı zaman ve şimdi arasında bir şeyler değiştiğinin farkındayım. Sonuç olarak, tekrar çalışıyor gibi görünüyor.
— joar
32

2016 Güncellemesi : Chrome Sürüm 51.0.2704.103'te

Bir Go to memberkısayol var (settings > shortcut > Text Editor ) . İşlevinizi içeren dosyayı ( sourcesDevTools panelinde) açın ve tuşuna basın:

ctrl + shift +O

veya OS X'te:

⌘ + shift +O

Bu, geçerli dosyanın üyelerini listelemeye ve bunlara erişmeye olanak tanır.

— arthur.sw
kaynak
1
bunun gibi göründüğü gibi, keyfi bir işlev çağrısının "tanımına git" değil, "geçerli dosyadaki tüm işlev adlarını göster ve onlara gitmenize izin ver" - ki bu da çok faydalıdır.
— Scott Weaver
Tam da aradığım şey, firefox'a benzer bir özellik! Firefox'ta sadece dev araçlarını açabilir, Ctrl + f tuşlarına basabilir ve tüm bölmelerdeki (HTML / CSS / Javascript / vb.) JS işlevini arayacaktır. Bunu, diğer cevaplarda belirtilen normal ifade özelliklerinden farklı olarak yapar.
— javaBean007
@Randy, hangi krom sürümünde? Hangi işletim sistemi? OS X'te Chrome Sürüm 59.0.3071.115 kullanıyorum ve iyi çalışıyor.
— arthur.sw
@ arthur.sw Üzgünüm, bunun çalışması için kaynaklarda olmanız gerektiğini fark etmedim. Konsolda da çalışmasını bekliyordum.
— Randy
Geliştirme konsolunda bu tuş bileşimine basarsam benim için bir krom menüsü açılır.
— Siyah
19

Bir işlev tanımının konumuna gitmenin başka bir yolu, işleve erişebileceğiniz ve işlevlere tam nitelikli isimleri konsolda girebileceğiniz bir yerde hata ayıklayıcıyı kırmak olacaktır. Bu, konsoldaki işlev tanımını yazdırır ve tıklandığında işlevin tanımlandığı komut dosyasının konumunu açan bir bağlantı verir.

— Răzvan Flavius ​​Panda
kaynak
17

Farklı tarayıcılar bunu farklı yapar.

  1. Öncelikle, sayfaya sağ tıklayıp "Elemanı Denetle" yi seçerek veya vurarak konsol penceresini açın F12.

  2. Konsolda ... yazın.

    • Firefox

      functionName.toSource()

    • Krom

      functionName
— Deepak Dixit
kaynak
aradığım işlev stop () işlevidir ve onmouseover = "this.stop ();" ne dediğini yaptığımda, döndürür: stop () {[yerli kod]} Peki şimdi ne yapmalı?
— Tarık
functionName.toSource()ayrıca en son krom sürümlerinde de çalışır.
— Sourav Ghosh
1
@Tarik Yerleşik için çevrimiçi belgelere bakın stop.
— Monica'nın Davası
@QPaysTaxes Teşekkürler, artık döndüğünü anlıyorum: stop () {[yerli kod]} orada yerel kod Özel bir işlev değil, dahili bir işlevdir ve işlevin çevrimiçi belgelerine bakmalıyım.
— Tarık
6

Chrome konsolunda:

debug(MyFunction)
MyFunction()
— Igor Krupitsky
kaynak
1
Bunu sevdim. Dikkat: undebug(MyFunction)kesme noktasını tekrar kaldırmak için (yöntem uygulamasını bulduktan sonra) yapın
— Andreas Dolk
5

Küresel bir işlevi bulmak için en hızlı yolu basitçe:

  1. Kaynaklar sekmesini seçin .
  2. In İzle bölmesi tıklama + ve tip pencerenin
  3. Global işlev referanslarınız önce alfabetik olarak listelenir.
  4. İlgilendiğiniz işlevi sağ tıklayın.
  5. Açılır menüde İşlev tanımını göster'i seçin .
  6. Kaynak kodu bölmesi bu işlev tanımına geçer.
— Chris Robinson
kaynak
1

Google chrome'da Elemanları incele aracında herhangi bir Javascript işlevi tanımını görüntüleyebilirsiniz.

  1. Kaynaklar sekmesini tıklayın. Ardından dizin sayfasını seçin. İşlevi arayın.

resim açıklamasını buraya girin

  1. İşlevi seçin, ardından işleve sağ tıklayın ve "Konsolda seçili metni değerlendir" i seçin.

resim açıklamasını buraya girin

— Subhro
kaynak
0

Bir nesnenin yönteminin kaynağını bulmada benzer bir sorun yaşadım. Nesne adı myTreeve yöntemi idi load. Yöntemin çağrıldığı satıra bir kesme noktası koydum. Sayfayı yeniden yükleyerek yürütme o noktada durdu. Sonra DevTools konsolunda, nesneyi yöntem adıyla birlikte yazdım myTree.loadve Enter'a basın. Yöntemin tanımı konsolda yazdırıldı:

resim açıklamasını buraya girin

Ayrıca, tanımın üzerine sağ tıklayarak kaynak kodundaki tanımına gidebilirsiniz:

resim açıklamasını buraya girin

— Abdullah
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.