Chrome DevTools cerca tutti i file javascript nel sito web

Question

Sto lavorando su un sito Web di un nuovo cliente che carica Javascript da un CDN in modo che Javascript non sia incorporato o in linea con l'origine della pagina web. Vorrei fare una pausa ogni volta getCurrentPosition() viene eseguito al fine di determinare quale file JS esterno è contenuto in.

mi rendo conto che potrei utilizzare altri strumenti per fare una stringa di ricerca attraverso il contenuto dei file JS ma vorrei Piuttosto, tieni gli strumenti di debug di Chrome.

Devo tentare di creare un'espressione di watch o esiste un altro modo per bloccare quando e dove viene attivata una determinata funzione JS?

Answer 1

È possibile cercare in tutti i file utilizzando Chrome DevTools. Trova la funzione ed eseguire il debug:

1. Aperte DevTools (F12)
2. Vai alla scheda fonti
3. Open Search Tutti i file premendo ctrl + shift + f (Win) o cmd + option + f (Mac)
4. Ricerca getCurrentPosition
5. Inserire un punto di interruzione (facendo clic sul numero di riga a sinistra della riga)

Answer 2

Un modo sarebbe sostituire il metodo Geolocation.getCurrentPosition con una funzione wrapper in modo da poter impostare un punto di interruzione al suo interno, quindi esaminare lo stack per vedere chi lo sta chiamando.

Answer 3

Se si conosce la posizione del codice nel metodo, è possibile eseguire set breakpoints. Questo interromperà l'esecuzione di JavaScript durante il runtime e ti permetterà di ottenere una traccia dello stack.

Answer 4

È possibile trovare tutte le informazioni che ti servono la pagina web: https://developer.chrome.com/devtools/docs/javascript-debugging

Semplicemente mettendo (copiato dalla pagina web)

Aprire un sito come Google Chiusura pagina hovercard demo o TodoMVC

1. Aperto come come la pagina demo di Google Closure hovercard o l'app TodoMVC Angular

2. Apri la finestra DevTools.

3. Se non è già selezionato, selezionare Origini.

debug con punti di interruzione

un punto di interruzione è un arresto intenzionale o posto fermandosi in uno script. Utilizzare i punti di interruzione in DevTools per eseguire il debug di codice JavaScript, aggiornamenti DOM e chiamate di rete.

Aggiungere e rimuovere punti di interruzione Nel pannello Sorgenti, aprire un file JavaScript per il debug. Nell'esempio seguente, stiamo eseguendo il debug del file todoCtrl.js dalla versione AngularJS di TodoMVC.

Fare clic sul margine di rilegatura per impostare un punto di interruzione per quella riga di codice. Un tag blu indica se un punto di interruzione è stata impostata:

Con il precedente esempio si può effettivamente "stop" la funzione getCurrentPosition() ed eseguire il debug.

Answer 5

1. strumenti Apri Google Dev (F12)
2. Premere Ctrl + P

Nella ricerca di dialogo aperta per tutti i file (JS, CSS, ...).

Nella casella hai 5 opzioni:

1. tipo 'nome' e selezionarlo.
2. Digitare ': numero di lino' per passare a un numero di riga specifico (': 10' passare alla riga 10).

3. Digitare '@symbol' per passare a un simbolo specifico ('@ TestSymbol' vai al simbolo TestSymbol).

   In questa opzione, se si scrive @JSFunctionName o @CSSClassName, il cursore passerà a JSFunctionName o CSSClassName.

4. Digitare '! Snippet' per andare a snippet specifico ('! SnippetTest' andare a snippetTest snippet).

5. Digitare '> googleCommand' per passare al comando specifico ('> Cancella console' deselezionare la console).

Per l'utilizzo delle opzioni 2-5 selezionare un file.