[DOCKER] SourceMapPathOverrides paramètre mémo dans le débogueur VSCode pour Chrome
Le titre est un peu errant. J'espère que quelqu'un qui est aussi accro que moi viendra me voir.
Remarque
Le contenu suivant ne fonctionne que pour le projet Angular.
Je ne pouvais pas le faire quand je pensais: "Vous pouvez le faire avec la même configuration de colle et de React + Docker!"
(Information incertaine) Cela peut être une condition que Webpack soit installé par défaut, comme Angular2 + source-map peut être affiché. .. (Le projet React que j'ai essayé n'a pas montré la source-map dans Webpack) Officiel (chapitre "Sourcemaps" "Et si je n'avais pas de source-map avec Webpack en premier lieu?" Si vous le lisez, j'ai l'impression que vous ne pouvez pas le lire.)
Si vous êtes arrivé à cet article dans l'environnement de React ou Vue + Docker, il y avait un article utilisant Debugger for Chrome de l'extension de développement à distance, donc je le posterai. Une histoire sur la création d'un environnement de développement Vue.js à l'aide du conteneur distant Visual Studio Code
Ce à quoi j'étais accro
Débogage du code Angular sur VSCode en ayant une extension pratique dans VScode appelée Debugger for Chrome J'ai essayé.
Mais ** le processus ne s'arrête pas au point d'arrêt. ** **
environnement
Je construisais un environnement Docker en me référant à l'article suivant. Construction facile de l'environnement Docker x Angular
Cause
Launch.json (fichier de configuration) de Debugger for Chrome n'était pas une description correcte.
Solution (résultats uniquement)
Le dernier launch.json (fichier de configuration) est:
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "for angular",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///./*": "${webRoot}/server/angular-app/*"
}
}
]
}
Si vous copiez et collez ce qui précède et que cela fonctionne, vous êtes probablement ** incroyablement chanceux ** (^^;
Si vous pouvez comprendre en regardant les articles suivants, vous n'aurez peut-être pas besoin de lire davantage. Debug Angular a commencé dans le conteneur Docker avec VS Code ["Astuces de débogage et de journalisation à distance qui peuvent être utilisées dans le développement JavaScript d'Imadoki (version 2018 - Partie 2)"](https://seroku.jp/wp/%E3%80%8C%E3%82%A4%E3%83 % 9E% E3% 83% 89% E3% 82% AD% E3% 81% AE-javascript-% E9% 96% 8B% E7% 99% BA% E3% 81% A7% E4% BD% BF% E3% 81% 88% E3% 82% 8B% E3% 80% 81% E3% 83% AA% E3% 83% A2% E3% 83% BC% E3% 83% 88% E3% 83% 87% E3% 83% 90% E3% 83% 83 /) Le débogage ne fonctionne pas dans le code Visual Studio
Explication
Si vous savez ce que vous essayez de faire avec sourceMapPathOverrides, vous pouvez le définir correctement.
Ce que vous essayez de faire avec sourceMapPathOverrides
** "Liez la carte source du navigateur avec la mise en page source locale (implémentée dans VScode)" **.
- Il est plus facile à comprendre que la précision.
Ici, une autre chose importante est ce qu'est le webRoot.
"webRoot": "${workspaceFolder}",
$ {workspaceFolder} est la description par défaut,
** Fait référence à la racine de l'espace de travail dans VScode **.
Comment guider la solution
- La source elle-même est un tutoriel angulaire.
À propos du placement de la source du navigateur
Tout d'abord, ** Placez la source du navigateur **, comme décrit dans Debug Angular started in Docker container with VS Code Vous pouvez le savoir en ouvrant la section source avec l'outil de développement Chrome et en vérifiant le chemin du fichier source approprié.
Par exemple, le "hero.service.ts" ci-dessus se trouve dans "webpack: ///./ src / app / hero.service.ts" comme emplacement source du navigateur.
La source que vous voulez déboguer est tout dans src, donc
Le ** layout source du navigateur ** que vous voulez lier (y compris le dossier src) est considéré comme webpack: ///./* cette fois.
À propos du placement de source locale
Cette hiérarchie
angular-traial ←※ webRoot=`${workspaceFolder}`Position de
├── .vscode
│ └── launch.js
├── docker
│ └── node
│ └── Dockerfile
├── docker-compose.yml
└── server
└── angular-app
├── README.md
├── angular.json
├── e2e
├── karma.conf.js
├── node_modules
├── package-lock.json
├── package.json
├── src
│ ├── app
│ │ ├── app-routing.module.ts
│ │ ├── app.component.html
│ │ ├── app.component.sass
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ ├── app.component_bk.html
│ │ ├── app.module.ts
│ │ ├── dashboard
│ │ ├── hero-detail
│ │ ├── hero-search
│ │ ├── hero.service.spec.ts
│ │ ├── hero.service.ts
~Omis ci-dessous~
Écran d'édition du code VS
Où est webRoot = $ {workspaceFolder}?
Littéralement, c'est l'emplacement de la racine de l'espace de travail VScode, cette fois l'emplacement du dossier angular-traial (comme décrit dans la structure hiérarchique).
Cela dépend de la façon dont vous ouvrez chaque espace de travail individuel, mais lorsque vous essayez de créer launch.js, cela devrait être $ {workspaceFolder} /. Vscode.
Faites correspondre la queue de livre de l'emplacement source du navigateur avec l'emplacement source local.
Par conséquent, si vous pensez à la disposition source du navigateur comme webpack: ///./* incluant le dossier src,
Inclut le placement de la source locale jusqu'au dossier src
(Hiérarchie supérieure) / angular-traial / server / angular-app / *
=${workspaceFolder}/server/angular-app/*
=${webRoot}/server/angular-app/*
Si tel est le cas, ce sera le bon réglage.
"sourceMapPathOverrides": {
"webpack:///./*": "${webRoot}/server/angular-app/*"
}
De côté
Une fois que vous avez compris cela, il est facile de "limiter la cible de débogage uniquement au dossier src".
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/server/angular-app/src/*"
}
(Bien sûr, je viens d'ajouter la partie / src / aux deux)
L'endroit où se baser peut dépendre du site et des références.
Si vous connaissez sourceMapPathOverrides, vous devriez pouvoir le gérer. ..
la fin
Si vous utilisez Debugger for Chrome, vous n'avez pas à rechercher la source avec les outils de développement un par un. (J'en suis un peu accro, mais l'étude d'Angular semble progresser)
c'est tout!
Recommended Posts