Как я могу отладить то же самое развернутое приложение PWA с точками останова, используя VScode? - PullRequest
0 голосов
/ 24 апреля 2020

В моей ежедневной отладке через VSCode (запуск. json) я запускаю Chrome для сборки кода в следующей папке: (я думаю, что непрерывно собирается с помощью ioni c serve)

"${workspaceRoot}/www"

При этом я не наблюдаю такое же поведение приложения, последовательности экранов / мигание, которые наблюдаются при запуске приложения на работающем сайте.

Я хотел бы повторить с использованием VSCode в качестве средства запуска поведение a опыт клиентов, когда они посещают прямую ссылку на действующем сайте.

http://example.com/?v=1234 

Я хотел бы иметь возможность устанавливать точки останова и выполнять код

За последние 2-3 года у меня есть использовал тот же «Launch Chrome против localhost, с исходными картами» запуска. json profile.

Я не знаю, являются ли «sourceMapPathOverrides» чем-то прошлым и должны быть удалены?

enter image description here

  • Теперь, если я создаю следующий профиль запуска,
  • Запускает приложение на веб-сайте
  • строки журнала были преобразованы, они выглядят по-разному, все идут от main. js и показывают n.MethodName, поэтому класс потерян, но по крайней мере MethodName дает мне подсказку .
  • Однако мои контрольные точки игнорируются?
  • На самом деле VSCode говорит мне, что не остановится на этих контрольных точках, поскольку показывает их в виде пустых кружков вместо красных кружков.
  • Как это можно исправить?

enter image description here enter image description here

Я думал, что не обязательно go против кода сайта LIVE (поскольку он уже находится на моем локальном компьютере), но мне нужно увидеть то же поведение, с которым сталкиваются клиенты, когда они переходят по следующей ссылке:

http://example.com/?v=1234

Я был создание приложения для сайта LIVE с помощью следующей команды

ionic cordova build browser --prod --release

Я развертываю содержимое следующей папки на сайте LIVE

${workspaceRoot}/platforms/browser/www/ 

Поэтому при запуске я попробовал следующее. json Но тот же результат, мои контрольные точки игнорируются , это потому, что эта версия кода была передана, очищена и т. д. c ... ???

enter image description here

ПРИМЕЧАНИЕ: Одним из вариантов поведения, которое я пытаюсь отладить, является требование Chrome для жеста пользователя при первом посещении сайта через браузер. Приложение должно представить кнопку воспроизведения для звука или видео. В моей повседневной отладке с помощью «Launch Chrome против localhost with sourcemaps» воспроизведение медиафайлов происходит автоматически без вмешательства пользователя. Я хотел бы повторить, когда Chrome требует вмешательства пользователя.

Из вышесказанного вы, вероятно, можете сказать, что я работаю с догадками / хакингом, и я недостаточно хорошо понимаю механизм отладки под ionic3 / angular / cordova /.../node.js

Возможно, есть расширение, которое мне нужно? или исправление моего запуска. json

В любом случае, это то, что привело меня сюда, огромное спасибо за ваши идеи и помощь.

Моя конфигурация DEVEL

Ionic:

   Ionic CLI          : 5.0.2 (C:\Users\AXM\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.4

Cordova:

   Cordova CLI       : 8.0.0
   Cordova Platforms : android 7.0.0, browser 5.0.3
   Cordova Plugins   : cordova-plugin-ionic-webview 1.1.1, (and 13 other plugins)

Utility:

   cordova-res : 0.12.1
   native-run  : not installed

System:

   Android SDK Tools : 26.1.1 (S:/_ANDROID/sdk)
   NodeJS            : v10.16.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.9.0
   OS                : Windows 7

npm show ionic version
5.4.16
npm show cordova version
9.0.0
npm show angular version
1.7.9
show @angular/core version
9.1.3
ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 9.0.4
Node: 10.16.0
OS: win32 x64

Angular: 5.0.3
... common, compiler, compiler-cli, core, forms, http
... platform-browser, platform-browser-dynamic
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.4 (cli-only)
@angular-devkit/build-optimizer   0.0.35
@angular-devkit/core              9.0.4 (cli-only)
@angular-devkit/schematics        9.0.4 (cli-only)
@schematics/angular               9.0.4 (cli-only)
@schematics/update                0.900.4 (cli-only)
rxjs                              5.5.2
typescript                        2.8.3
webpack                           3.12.0

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...