Trova la definizione della funzione JavaScript in Chrome

282

Gli strumenti per sviluppatori di Chrome sono incredibili, ma una cosa che non sembrano avere (che potrei trovare) è un modo per trovare la definizione di una funzione JavaScript. Questo sarebbe molto utile per me perché sto lavorando su un sito che include molti file JS esterni. Sicuramente grep risolve questo problema, ma nel browser sarebbe molto meglio. Voglio dire, il browser deve saperlo, quindi perché non esporlo? Quello che mi aspettavo era qualcosa di simile:

Seleziona 'Ispeziona elemento' dalla pagina, che evidenzia la linea nella scheda Elementi
Fai clic con il pulsante destro del mouse sulla riga e seleziona "Vai alla definizione della funzione"
Lo script corretto viene caricato nella scheda Script e passa alla definizione della funzione

Prima di tutto, esiste questa funzionalità e mi manca solo?

E in caso contrario, suppongo che questo provenga da WebKit, ma non è stato possibile trovare nulla per le richieste di funzionalità dello strumento di sviluppo o Bugzilla di WebKit .

javascript google-chrome-devtools

— Ryan DuVal
fonte

3

C'è una barra di ricerca che inserisce il file corrente nella scheda Script e puoi dare un'occhiata al contenuto di una funzione stampandolo. Ma ora sono curioso se c'è un modo per fare una ricerca più generale come vuoi tu ...

— hugomg

3

Con gli Strumenti per sviluppatori di Google Chrome, nella schermata "Sorgenti" tocca -> finestra a destra puoi impostare "Punti di interruzione evento".

Nel mio caso avevo una variabile impostata su una funzione sconosciuta. Ho fatto myvar.toString () e ha stampato: "function Object () {[codice nativo]}" che è tutto ciò che dovevo sapere.

— Anello del

366

Diciamo che stiamo cercando la funzione chiamata foo:

(apri gli strumenti di sviluppo di Chrome),
Windows: ctrl+ shift+ Fo macOS: cmd+ optn+ F. Questo apre una finestra per la ricerca in tutti gli script.
selezionare la casella di controllo "Espressione regolare",
cerca foo\s*=\s*function(cerca foo = functioncon qualsiasi numero di spazi tra questi tre token),
premere su un risultato restituito.

Un'altra variante per la definizione della funzione è function\s*foo\s*\(per function foo(qualsiasi numero di spazi tra questi tre token.

— plesiv
fonte

8

Ecco di cosa sto parlando! Non avevo idea che quel riquadro esistesse - e come lo faresti?

— Ryan DuVal,

22

cmd + opzione + F su OSX

— Stiggler

2

Questo è solo un modo per definire una funzione denominata foo. Ce ne sono altri Cosa succede se la nostra funzione è ad es bar['foo']? (Non c'è una buona risposta a questa domanda, per quanto ne so --- è essenzialmente "non scrivere codice contorto")

— Steven Lu

1

Non sono riuscito a trovare la "definizione della funzione" utilizzando la risposta selezionata. Ho cercato su Google e non sono riuscito a trovare alcun aiuto. (Utilizzando la versione Chrome 41.0.2272.118 m)

— Web_Developer

7

E quindi non riesci a trovare dichiarazioni di funzioni, espressioni di funzioni generate dinamicamente e funzioni anonime (senza nome). Preferirei qualcosa come Firefox: fai clic sul riferimento della funzione nel pannello dell'orologio -> Vai al riferimento della funzione.

— Fagner Brack,

77

Questo è arrivato su Chrome il 26-08-2012 Non sono sicuro della versione esatta, l'ho notato in Chrome 24.

Uno screenshot vale più di un milione di parole:

Sto ispezionando un oggetto con metodi nella console. Facendo clic su "Mostra definizione funzione" mi porta al punto nel codice sorgente in cui è definita la funzione. Oppure posso semplicemente passare il mouse sopra la function () {parola per vedere il corpo della funzione in una descrizione comandi. Puoi facilmente ispezionare l'intera catena di prototipi in questo modo! CDT sicuramente rock !!!

Spero che lo troviate utile!

— Dmitry Pashkevich
fonte

1

Esiste una scorciatoia o una funzione che consentirà la ricerca tramite un riferimento di funzione? come "> inspect (document.body)". Per ora devo d> tmp = {a: myFunc}; > tmp, seguito dalla "Mostra definizione funzione"

— Dennis C

16

Penso che tu possa faredir(myFunc)

— Dmitry Pashkevich il

dir (myFunc) è molto meglio, ma necessita ancora di due clic e mouse

— Dennis C

1

Oh, vuoi dire se riesci a farlo completamente dalla tastiera? Qualcosa del genere findDefinition(myFunc)? AFAIK che non esiste ancora ...

— Dmitry Pashkevich il

Se non si dispone di un oggetto contenente la funzione, è possibile creare un oggetto attorno ad esso e funzionerà comunque. Ad esempio nel tipo di console:, ({1:somefunction})quindi fare clic con il tasto destro del mouse sulla funzione all'interno dell'oggetto stampato.

— Protector un

47

È possibile stampare la funzione valutandone il nome nella console, in questo modo

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

questo non funzionerà per le funzioni integrate, verranno visualizzate solo al [native code]posto del codice sorgente.

EDIT : questo implica che la funzione è stata definita nell'ambito corrente.

— Joar
fonte

1

Questo non funziona per me (anche con funzioni definite nella pagina):> toggle_search ReferenceError: toggle_search non è definito

— Ryan DuVal

Aah, guarda la mia modifica. Altrimenti, l'utilizzo della funzione di ricerca ti aiuterà. Chrome devtools non è un IDE, è un debugger :)

— Joar

1

Funziona per trovare la definizione attualmente attiva della funzione.

— Patrick,

1

In realtà implica che la funzione è stata definita nell'ambito corrente .

— Jonathan,

1

@aroth Almeno in Chrome 45, funziona di nuovo. Sono consapevole che le cose sono cambiate da qualche parte tra quando questo è stato pubblicato e ora. In conclusione, sembra funzionare di nuovo.

— Joar,

32

Aggiornamento 2016 : nella versione 51.0.2704.103 di Chrome

C'è un Go to membercollegamento (elencato in settings > shortcut > Text Editor). Apri il file contenente la tua funzione (nel sourcespannello di DevTools) e premi:

ctrl+ shift+O

o in OS X:

⌘+ shift+O

Ciò consente di elencare e raggiungere i membri del file corrente.

— arthur.sw
fonte

1

beh, ciò che sembra fare non è "vai alla definizione" di una chiamata di funzione arbitraria, ma "ti mostra tutti i nomi delle funzioni nel file corrente e ti lascia andare a loro" - che è anche un po 'utile.

— Scott Weaver,

Questo è esattamente quello che stavo cercando, una funzione simile a Firefox! In firefox puoi semplicemente aprire gli strumenti di sviluppo, premere Ctrl + f e cercherà la funzione JS in tutti i riquadri (HTML / CSS / Javascript / ecc.). Questo lo fa, a differenza delle funzionalità regex menzionate in altre risposte.

— javaBean007,

@Randy, su quale versione di Chrome? Quale sistema operativo? Uso la versione 59.0.3071.115 di Chrome su OS X e funziona benissimo.

— arthur.sw,

@ arthur.sw Spiacente, non mi ero reso conto che dovevi trovarti nelle fonti perché questo funzionasse. Mi aspettavo che funzionasse anche nella console.

— Randy,

Per me si apre un menu Chrome se premo quella combinazione di tasti nella console di sviluppo.

— Nero,

19

Un altro modo per navigare nella posizione di una definizione di funzione sarebbe quello di interrompere il debugger da qualche parte in cui è possibile accedere alla funzione e immettere il nome completo delle funzioni nella console. Ciò stamperà la definizione della funzione nella console e fornirà un collegamento che con un clic apre la posizione dello script in cui è definita la funzione.

— Răzvan Flavius Panda
fonte

17

Browser diversi lo fanno diversamente.

Per prima cosa aprire la finestra della console facendo clic con il tasto destro sulla pagina e selezionando "Ispeziona elemento" o premendo F12.
Nella console, digitare ...
- Firefox
```
functionName.toSource()
```
- Cromo
```
functionName
```

— Deepak Dixit
fonte

la funzione che sto cercando è stop () e viene usata come onmouseover = "this.stop ();" quando faccio quello che dici, ritorna: stop () {[codice nativo]} Quindi cosa fare adesso?

— Tarik,

functionName.toSource()funziona anche con le ultime versioni di Chrome.

— Sourav Ghosh,

1

@Tarik Guarda la documentazione online per il builtin stop.

— Fondi Monica's Lawsuit

@QPaysTaxes Grazie, ora capisco che quando ritorna: stop () {[codice nativo]} il codice nativo significa che non è una funzione privata, è una funzione interna e dovrei cercare la documentazione online della funzione.

— Tarik,

6

nella console di Chrome:

debug(MyFunction)
MyFunction()

— Igor Krupitsky
fonte

1

Mi piace. Degno di nota: eseguire un undebug(MyFunction)per rimuovere nuovamente il punto di interruzione (dopo aver trovato l'implementazione del metodo)

— Andreas Dolk,

5

Trovo che il modo più rapido per individuare una funzione globale sia semplicemente:

Seleziona la scheda Sorgenti .
Nel riquadro Watch fare clic su + e digitare window
I riferimenti alle funzioni globali sono elencati per primi, in ordine alfabetico.
Fai clic con il tasto destro del mouse sulla funzione che ti interessa.
Nel menu popup selezionare Mostra definizione funzione .
Il riquadro del codice sorgente passa alla definizione di tale funzione.

— Chris Robinson
fonte

1

In Google Chrome, strumento Inspect element è possibile visualizzare qualsiasi definizione della funzione Javascript.

Fai clic sulla scheda Fonti. Quindi selezionare la pagina dell'indice. Cerca la funzione.

Seleziona la funzione, quindi fai clic con il pulsante destro del mouse sulla funzione e seleziona "Valuta il testo selezionato nella console".

— subhro
fonte

1

Se stai già eseguendo il debug, puoi passare il mouse sopra la funzione e la descrizione comandi ti consentirà di navigare direttamente alla definizione della funzione:

Ulteriori letture :

Chrome DevTools> Riferimento di debug JavaScript

— KyleMit
fonte

0

Ho avuto un problema simile nel trovare la fonte del metodo di un oggetto. Il nome dell'oggetto era myTreee il suo metodo era load. Ho messo un punto di interruzione sulla linea che è stato chiamato il metodo. Ricaricando la pagina, l'esecuzione si è fermata a quel punto. Quindi sulla console DevTools, ho digitato l'oggetto insieme al nome del metodo, cioè myTree.loade ho premuto Invio. La definizione del metodo è stata stampata sulla console:

Inoltre, facendo clic con il tasto destro sulla definizione, puoi passare alla sua definizione nel codice sorgente:

— Abdollah
fonte