Как отладить код рабочей области Botframework Webchat?

Question

Я клонировал webchat-repo , чтобы что-то проверить. И, как упоминалось в разделе Тестирование веб-чата для целей разработки Мне удалось успешно запустить экземпляр локального чата.

cd packages/playground
npm start

Полагаю, это запускает локальный сервер разработки веб-пакетов для обслуживания файлов с ${workspaceFolder}/packages/playgroud. Который в свою очередь использует файлы из lib каталогов различных других пакетов.

Теперь я хочу отладить этот код (нажать точки останова и т. Д.), Но я не могу этого сделать.

Когда я вхожу в раздел Sources Google Chrome, он показывает соответствующие файлы в папке lib пакетов, но они не читаются (то есть не используются для отладки). Прикрепленный скриншот выше.

Я использую конфигурацию запуска VS Code Chrome (lauch config является частью репозитория) для подключения к локальному серверу dev (что само по себе успешно). Но VSCode показывает unverified breakpoint на контрольных точках. Я полагаю, потому что это происходит потому, что VSCode не может определить, как сопоставить файлы, обслуживаемые сервером разработки, с источником.

Все, что я хочу сделать, это поместить точку останова в рабочую область VSCode и нажать эту точку останова при выполнении какого-либо действия в локальном веб-чате. Как я могу это сделать? Если не из VSCode, то по крайней мере с вкладки Sources Chrome.

Я пытался изменить параметры Webpack devtools для создания исходных карт, но это не помогло.

Я работаю в Ubuntu 18.04 с VSCode и Node v10. Я что-то пропустил? Я не очень хорошо знаком с интерфейсом JS Ecosystem (Webpack, Babel и т. Д.), Поэтому может случиться так, что я делаю что-то глупое (или не делаю что-то). Буду признателен за любую помощь.

Answer 1

У меня также есть эта проблема, и у меня есть обходной путь, но не исправление.

Когда мне нужно отладить код веб-чата, я на самом деле открываю один из примеров (скажем, 01.a.getting-start-full-bundle и использую его как свое место для отладки). serve.json образцы различных дистрибутивов веб-чата, и в этом примере я использую /webchat.js

1. Перейдите к 01.a.getting-started-full-bundle
2. В index.html строке 10 измените строку CDN на <script src="/webchat.js"></script>
3. Измените строку 35, чтобы использовать учетные данные вашего бота (или чтобы использовать Mock Bot, оставьте эту строку такой же)
4. В корневой папке веб-чата запустите npm run build:sample - вам нужно сделать это только один раз
5. Также в root, запустите npx serve или serve, если он установлен глобально

Это запустит страницу с клиентом веб-чата и ботом на http://localhost:5000/samples/01.a.getting-started-full-bundle/index.html Использование Ctrl + P позволит вам попасть в точки останова, а также вы можете присоединить отладчик VS Code.