Блог

Главная - Вопросы по программированию - Почему я получаю файл «Только для просмотра» в VSCode при использовании метода «Прикрепления» для JS BrowserDebugging в Chrome?

Почему я получаю файл «Только для просмотра» в VSCode при использовании метода «Прикрепления» для JS BrowserDebugging в Chrome?

#javascript #google-chrome #debugging #visual-studio-code #terminal

Вопрос:

Окружающая среда:

  • ОС: macOS Big Sur 11.5.2 (20G95)
  • Chrome: Версия 93.0.4577.82 (Официальная сборка) (x86_64)
  • VSCode: Версия: 1.60.1 Фиксация: 83bd43bc519d15e50c4272c6cf5c1479df196a4d Дата: 2021-09-10T17:09:14.403 Z (5 дней назад) Электронная почта: 13.1.8 Chrome: 91.0.4472.164 Node.js: 14.16.0 V8: 9.1.269.39-electron.0 ОС: Darwin x64 20.6.0

Мое действие:

  1. {VSCode} Откройте рабочую область, содержащую каталог моего проекта.
  2. {VSCode} Добавьте следующий блок в файл «launch.json» в массиве «конфигурации» :
 {
   "type": "pwa-chrome",
   "request": "attach",
   "name": "Attach Chrome Debugging to Browser for VSCode",
   "port": 9222,
   "url": "http://localhost:8888/",
   "urlFilter": "http://localhost:8888/*",
   "webRoot": "${workspaceFolder}"
}
  1. {VSCode} Сохраните файл ‘launch.json’
  2. {Хром} Закройте все запущенные экземпляры Chrome
  3. {Терминал} Перейдите в корневой каталог ( / )
  4. {Терминал} Выполните команду: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome --remote-debugging-port=9222 --user-data-dir=remote-debug-profile

Исход:

  1. {Хром} Приложение открывается с всплывающим окном (не так, как ожидалось):
    Снимок экрана всплывающего окна с текстом для чтения: quot;Google Chrome не может читать и записывать в свой каталог данных: удаленная отладка-профиль

Мое действие:

  1. {Хром} Нажмите кнопку «Ок».

Outcome:

  1. {Chrome} A window opens prompting «Who’s using Chrome?» with an option to select my desired user profile as expected.

My action:

  1. {Chrome} Click on my desired user profile.

Outcome:

  1. {Хром} Откроется окно с моим желаемым профилем пользователя, вошедшего в систему, как и ожидалось.

Мое действие:

  1. {VSCode} Добавьте точку останова в мой код с помощью debugger; инструкции в моем HTML-файле.
  2. {VSCode} Нажмите кнопку «Выполнить», выбрав мой профиль отладки.
  3. {Chrome} Поведение, вызывающее точку останова в моем коде.

Исход:

  1. {VSCode} ОДНАКО точка останова срабатывает: она срабатывает в версии моего файла «только для чтения», открытой на новой вкладке, отдельной от моего фактического файла.

Мой Желаемый Результат

Используя «прикрепить», я хочу, чтобы точка останова активировалась внутри фактического файла в VSCode, а не в версии «Только для чтения».

Я потратил около двух часов на изучение этой проблемы, и, насколько я могу судить, это связано с:

  • Место, из которого я запускаю команду терминала. Я пытался:
    • Запустив его из каталога проекта, однако он сбросил тонну кода в мой каталог проекта И не смог открыть экземпляр Chrome, в котором я мог выбрать нужный профиль пользователя, вместо этого открыв окно Chrome, не зависящее от профиля пользователя.
  • --user-data-dir=remote-debug-profile Строка в команде терминала.
  • Моя конфигурация в файле Launch.JSON. Я пробовал комбинации:
    • "type": "chrome"
    • "webRoot": "*/thedirectpathtomyprojectdirectory*"
    • "webRoot": "${workspaceFolder}/src"
    • "userDataDir": "/Library/Application Support/Google/Chrome/Profile 1"
    • "userDataDir": "/Library/Application Support/Google/Chrome"
    • "sourceMapPathOverrides": {"webpack://?:*/*": "${workspaceFolder}/*"}
    • "sourceMaps": true

Я в полной растерянности, но чувствую, что очень близок к решению.

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

1. Шишка для помощи, пожалуйста!

Метки: