Быстрый способ найти исходный файл Javascript в отладчике?

#google-chrome-devtools #rstudio

Вопрос:

RStudio использует Chrome Devtools для поддержки отладки в своей панели просмотра. (Он помечен как «RStudio Devtools», но я не уверен, в какой степени он настроен помимо этого). Вы можете открыть его окно, щелкнув правой кнопкой мыши «Проверить элемент».

При разработке дисплея, использующего Javascript, панель «Исходный код» в Devtools очень полезна для настройки точек останова, однократного шага и т. Д.

Одна вещь, которая довольно неудобна, — это найти линию, в которой я хочу установить точку останова. Как только я открою исходный файл, поиск будет легким, но найти нужный исходный файл будет сложно. Обычно после того, как я перехожу на панель источника, я вижу что-то вроде этого:

скриншот

Я знаю имя файла, который хочу отладить, но он скрыт несколькими уровнями ниже index.html в списке файлов слева. Есть ли способ быстро найти имя файла в этой иерархии файлов, чтобы мне не нужно было открывать все уровни до нужного файла? Например, я мог бы захотеть отладить htmlwidgets.js :

скриншот

Ответ №1:

Вы заметите на панели «Источники», что, если у вас нет открытых файлов, в середине появится сообщение, указывающее, что вы можете ввести Command P (или Ctrl P в Windows/Linux), чтобы открыть файл. При нажатии на эту кнопку откроется текстовое поле, в котором будет выполнен нечеткий поиск по именам всех исходных файлов. Введите там имя файла, и оно должно быть в первых результатах. Вы можете перейти к нему с клавиатуры и выбрать его с <Enter>/<return> помощью или просто щелкнуть мышью.

Изображение исходной панели инструментов разработчика Google Chrome с текстом, в котором указано, что команда P откроет файл, а команда shift p выполнит команду.

Комментарии:

1. Спасибо! Я никогда раньше не замечал этого сообщения: я думаю, что RStudio обычно открывается автоматически rstudio-0.js .

2. Никаких проблем-счастливого кодирования!