Однако мне нужно иметь возможность отладить машинописный текст, чтобы проверить значения из объекта или массива. Как включить инструменты Chrome Dev для отладки моих файлов TS?
Я не уверен, что вам нужно что-то включить. Я сейчас работаю над приложением Angular 7. Вот некоторые рабочие процессы, которые могут оказаться полезными.
Добавление debugger операторов в ваш код, вероятно, является наиболее простым подходом. Когда Chrome выполняет страницу, если он встречает оператор debugger при открытом DevTools, он приостановит выполнение этой строки кода.
На скриншоте выше я добавил оператор debugger для прослушивателя click, поэтому страница остановилась только после того, как я нажал кнопку. Панель Call Stack показывает вызовы, ведущие к моменту времени, когда я сделал паузу. Панель Scope показывает, какие переменные находятся в области видимости.
Во время паузы вы можете нажать Escape , чтобы запустить JS в консоли. Контекст также соответствует моменту времени, когда вы приостановлены. Например, на скриншоте ниже вы можете видеть, что this разрешает компонент, в котором я остановился.
Установка точек останова из пользовательского интерфейса DevTools, похоже, тоже работает. Чтобы открыть исходный файл, я перешел к webpack://> .> src> app
Я не очень много работал с Angular, поэтому эти рабочие процессы могут не работать, если вы используете среду разработки, отличную от стандартной ng serve --open.
Дайте мне знать, если что-то из этого помогает или не работает.