Jak przeszukiwać zmienne zasięgu w Narzędziach Google Chrome dla programistów?

Question

Ustawiam punkt przerwania w funkcji javascript za pomocą Narzędzi dla programistów Google Chrome.

Poszukuję zmiennej w zakresie zmiennych funkcji o wartości "Fred". Jak szukać tej wartości wśród zmiennych w zakresie funkcji?

Answer 1

Punkt kontrolny Chrome DevTools można ustawić dla konkretnej linii, która mieści się w zakresie/kontekście wspomnianej zmiennej. Gdy przeglądarka osiągnie punkt przerwania, będziesz miał dostęp do wszystkich zmiennych/funkcji w jej zasięgu globalnym.

Można również użyć konsoli Chrome i wyprowadzić dowolną zmienną dostępną w ramach bieżącego zakresu. Aby uzyskać więcej informacji na temat Chrome DevTools odwiedzić:

https://developers.google.com/chrome-developer-tools/

Answer 2

ręcznie w konsoli w następujący sposób:

console.log(this); 

LUB

console.log({set x(){}}); 

co jest równoważne:

console.log(Object.defineProperty({},'x',{get: function(){}})); 

w konsoli patrzeć:

get x: function(){} -><function scope> ->Global: Window

Answer 3

Musisz dodać skrypt do konsoli, tak aby rzeczywiście można przeprowadzić wyszukiwanie, jak Developer Tools don” t domyślnie pozwala na to. Oto, że funkcja dla Ciebie (Zobacz moją GIST komentarz poniżej na aktualizację):

function scanScope(whatToScan, scanValue) { 
 
\t for (var key in whatToScan) { 
 
\t \t if (whatToScan[key] == scanValue) { 
 
\t \t \t console.log(key + ' = ' + whatToScan[key]); \t \t 
 
\t \t } else { 
 
\t \t \t if((typeof whatToScan[key] === "object") && (key !== null)) { 
 
\t \t \t \t scanScope(whatToScan[key], scanValue); 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
}

Skopiuj i wklej to do konsoli, a następnie połączyć je z zakresu, który chcesz wyszukać przez i wartość, którą chcesz wyszukać. Uważaj, aby nie wyszukiwać zbyt dużych obiektów, oczywiście. Jeśli programowanie w kątowe, na przykład, i zgodnie z zasadą „zawsze mają kropkę”, można skanować przez niego z połączenia takich jak:

scanScope($scope.model, 'Fred');