Как отлаживать React varaibles из Chrome REPL

Question

У меня есть приложение React TypeScript, которое определяет что-то вроде этого:

index.tsx

import './initDefaultAccessContext';

Затем в initDefaultAccessContext.ts у меня есть что-то определенное.

const appName = 'something123';

Если я отлаживаю приложение в chrome, как я могу получить доступ к appName из REPL.

> appName 
and
> window.appName

Оба приведенных выше возврата не определены.

Как получить доступ к переменной / всему, что было определено в коде таким образом?

Answer 1

Если у вас включены исходные карты, вы можете перейти к инструментам chrome dev, нажмите Command + O или Command + P в Mac ИЛИ нажмите Control + O или Control + P в Windows / Linux, чтобы открыть файл исходного кода (выможно искать по имени исходного файла) в панели источников.Как только вы найдете и откроете свой файл, вам нужно найти искомую строку, а затем добавить точку останова, щелкнув столбец с номером строки.(Посетите эту ссылку для получения дополнительной информации о chrome breakpoint )

После установки точки останова перезагрузите страницу, и вы увидите, что браузер приостанавливает выполнение javascript в точке останова.Теперь вы можете переключиться на вкладку консоли в devtools и ввести имена переменных appName или window.appName

Существует еще один способ установить точку останова, не переходя к исходным картам в devtools.Просто добавьте оператор debugger; в ваш исходный код в строку, где вы хотите установить точку останова.Но, если вы следуете этому подходу, вы должны быть очень осторожны и не забудьте удалить этот оператор после отладки.Если вы забудете удалить оператор debugger; и код перейдет в производственную среду, JavaScript будет приостанавливать выполнение, когда пользователи будут использовать ваше приложение.

Answer 2

> window.appName

вы не можете записать в консоль window.appName и ожидать, что он вернет значение, потому что appName находится в области действия для модуля (а не для глобального объекта), который внутри является просто IIFE , единственный способ увидеть во время выполнения значение appName - это добавить точку останова внутри файла к конкретной строке, которая вас интересует, и увидеть ее значение там.