web-dev-qa-db-fra.com

"Point d'arrêt non vérifié" dans Visual Studio Code avec l'extension Chrome Debugger

J'essaie de déboguer mon code TypeScript dans Visual Studio Code, en utilisant l'extension Chrome Debugger, mais le message "Point d'arrêt non vérifié" s'affiche sur mon point d'arrêt et l'exécution ne s'arrête pas sur mon point d'arrêt.

Voici mon fichier launch.json:

{
    linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Version de l'application:

  • Code Visual Studio: 1.25.1 
  • Chrome: 67.0.3396.99

J'ai lu que si vous avez une version de Chrome inférieure à 59.x, vous recevrez cette erreur. Si j'ouvre Chrome et navigue vers Settings > Help, je peux voir que ma version de Chrome est 67.0.3396.99. Lorsque je navigue vers Help > About dans Visual Studio Code, la version de Chrome est affichée sous la forme 58.0.3029.110.

Vous ne savez pas si cela est lié, mais comment puis-je mettre à jour ma version de Chrome affichée dans Visual Studio Code, afin de refléter la version de Chrome appropriée?

D'autres suggestions sur la façon dont je peux résoudre ce problème?

typescriptvisual-studio-codevscode-settings
17
monstertjie_za

J'ai finalement découvert ce qui n'allait pas:

Quand je lis la définition de '$ {workspaceFolder}', elle dit ceci:

le chemin du dossier ouvert dans VS Code

Mon erreur:  

Mon chemin sous Windows vers mon projet était le suivant: C:\Users\myusername\Documents\VSCode\Source\ProjectName

Grâce à Visual Studio Code, le dossier Source était ouvert et j'avais toujours besoin d'effectuer une commande de changement de répertoire (cd ProjectName) dans Integrated Terminal en 'ProjectName'. Cela a conduit à la création de .vscode folder and launch.json file dans le dossier Source et non dans le dossier ProjectName. 

L'erreur ci-dessus a entraîné le fait que le ${workspaceFolder} désignait le dossier Source, dans lequel aucun composant angulaire ne se trouvait, au lieu de pointer vers le dossier ProjectName.

Le correctif:

Dans Visual Studio Code, ouvrez le dossier: C:\Users\myusername\Documents\VSCode\Source\ProjectName et configurez mon launch.json dans ce répertoire.

26
monstertjie_za

Ma solution au problème des "points d'arrêt non vérifiés".

Environnement

  • CLI angulaire 8.1.1
  • Code Visual Studio 1.36.1
  • Débogueur pour Chrome extension 4.11.6

Le fichier par défaut .vscode/launch.json créé dans VSC via l'option "Ajouter une configuration" ressemblera à celui-ci (j'ai changé le port de 8080 à 4200).

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.Microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}"
  }]
}

L'ajout d'un élément ci-dessous résout mon problème avec "Point d'arrêt non vérifié".

"sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }

.Vscode/launch.json complet et fonctionnel:

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.Microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}",
    "sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }
  }]
}

Quelques éléments supplémentaires peuvent être ajoutés:

 "breakOnLoad": true,
 "sourceMaps": true,

Cependant, je n’en ai pas eu besoin dans mon cas pour résoudre le problème.

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.Microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}",
    "breakOnLoad": true,
    "sourceMaps": true,
    "sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }
  }]
}
25
Robin Webb

La réponse ci-dessus va probablement résoudre beaucoup de problèmes mais cela n'a pas résolu le mien. Le mien était un problème beaucoup plus simple et plus énervant ... 

Les paramètres de configuration du fichier launch.json sont sensibles à la casse.

Mon entrée "webRoot" était correctement orthographiée mais j'avais un B majuscule dans l'un des mots au lieu d'un minuscule b.

Par exemple:

"webRoot": "$ {workspaceFolder}/My .F old"

ne correspondra pas à un dossier de votre espace de travail portant le nom suivant:

Mon .f plus vieux

J'espère que cela aide quelqu'un là-bas.

9
Michael Walsh

Dans mon cas, je devais définir la valeur sourceMapPathOverrides comme ceci:

Fichier launch.json (contenu dans le dossier .vscode):

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.Microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "smartStep": true,
      "internalConsoleOptions": "openOnSessionStart",
      "sourceMapPathOverrides": {
        "webpack:///*": "${webRoot}/project/app/*"
      }
    }
  ]
}

Ma source est en ${workspaceFolder}/project/app.

4
CodeChimp
Unverified breakpoint


J'ai trouvé 2 causes à ce problème:

  1. J'avais besoin de définir le bon dossier d'espace de travail .

  2. Avant de déboguer, je devais démarrer mon application Web avec npm start.

2
Super Jade

Il y a beaucoup de réponses correctes données. Dans mon cas, une combinaison de toutes ces réponses a aidé et il m'a fallu beaucoup de temps pour le comprendre. J'espère pouvoir vous faire gagner un peu de temps avec le mal de tête, alors

permettez-moi de le résumer étape par étape en vous référant aux réponses ci-dessus, ce qui m'a aidé:

  1. Il est important de démarrer le code VS à partir du bon dossier (voir les réponses dans CodeChimp et monstertjie_za ). 
    Ouvrez une fenêtre de console et cd dans le dossier du projet.
    Exemple:
    cd myProject
    code .
  2. Assurez-vous de configurer les fichiers dans le bon dossier .vscode.
    Le bon dossier .vscode est un sous-répertoire de votre dossier de projet.
    Remarque: si vous avez déjà ouvert par erreur le code VS dans un sous-dossier trop profond, par exemple. Dans le dossier src, vous y trouverez un dossier .vscode (comme dans mon cas) contenant des fichiers de configuration inutiles pour le débogage.

  3. Configurez une configuration de débogage dans le fichier .vscode\launch.json.
    Assurez-vous que vous avez spécifié le bon port pour votre application, dans mon cas, port 4200 se portait bien.
    Assurez-vous également que le paramètre "webRoot" est configuré correctement (voir la réponse de Stig Perez ). Dans mon cas, il était nécessaire de lui ajouter un sous-dossier. Pour découvrir le chemin spécifié par la variable $(workspaceFolder), consultez la question que j'ai posée à StackOverflow concernant l'affichage des valeurs de variable de code de VS. .
    Remarque: Si cette configuration n'existe pas encore, procédez comme suit pour l'ajouter: Allez à l'extension de débogage (c'est-à-dire cliquez sur la barre latérale). Dans la liste déroulante de votre débogueur, sélectionnez “Ajouter configuration…”, puis appuyez sur le bouton bleu “Ajouter configuration”. Sélectionnez «Lancer Chrome» comme configuration à ajouter.
    Exemple de configuration (launch.json):

    "configurations": [
        {
                "type": "chrome",
                "request": "launch",
                "name": "Launch Chrome",
                "url": "http://localhost:4200",
                "webRoot": "${workspaceFolder}/projectsubfolder"
        }]

    Remplacez projectsubfolder par le sous-dossier que vous pourriez avoir dans votre projet. Notez que ceci est sensible à la casse (voir la réponse de Michael Walsh ).

  4. Définissez maintenant les points d'arrêt dans votre application.

  5. Pour lancer votre application avec le débogueur, ouvrez une fenêtre de terminal à l'intérieur du code VS, tapez 
    cd projectsubfolder
    npm install & ng serve
    Cela garantit que les packages dépendants sont résolus et téléchargés avant la compilation de votre application.
    Cliquez ensuite sur le triangle vert dans le débogueur du VS, ce qui ouvrira une fenêtre Chrome avec le débogueur attaché.

2
Matt

Je devais supprimer mon dossier .vscode et le régénérer. et aussi le dossier pointait sur le mauvais chemin, je devais le remettre sur mon chemin de dossier actuel. Je vous remercie

1
Divakar Luffy

Après avoir passé 3 heures précieuses de ma vie et parcouru bon nombre des réponses énumérées ci-dessus, mon problème était aussi simple que de ne pas avoir la ligne suivante dans mon php.ini:

xdebug.remote_autostart = 1

Avant cela, j'avais déjà configuré XDebug sur mon XAMPP, mais mes points d'arrêt ne seraient tout simplement pas touchés. C'est juste que mon serveur de débogage n'a pas été configuré pour être démarré automatiquement.

J'espère que cela sauve la journée de quelqu'un.

1
dotNET

J'ai également rencontré le problème après avoir renommé le dossier du projet. Il s'est avéré que la propriété "webRoot" pointait sur "$ {workspaceFolder}/src" au lieu de "$ {workspaceFolder}". Peut-être que cela faisait partie d'une mise à jour de l'extension "Debugger for Chrome", mais je ne peux pas le vérifier car je n'ai reçu aucune mise à jour.

La mise à jour de "webRoot", le redémarrage de la session ng serve et le démarrage d'une nouvelle session de débogage ont tout donné. J'espère que cela aidera quelqu'un avec un scénario similaire.

1
Stig Perez

J'avais ouvert dans le code VS my-app dossier où client dossier et serveur dossier était. J'ai dû changer dans launch.json à partir de cela

"webRoot": "${workspaceFolder}"

pour ça

"webRoot": "${workspaceFolder}\\client"
0
JanBrus

Une autre réponse que je viens de découvrir concerne les modules chargés paresseux.

Si vous souhaitez définir des points d'arrêt dans le code faisant partie d'un module chargé paresseux et que vous n'avez pas chargé ce module dans le navigateur, le code VS n'aura pas accès aux mappes sources pour vérifier les points d'arrêt!

donc, définissez uniquement les points d'arrêt lorsque vous avez chargé le module chargé paresseux que vous souhaitez déboguer!

0
Tom

Dans mon cas, j'avais un fichier main.js à la racine du projet pour une exécution en tant qu'appli électronique. Si ce fichier main.js a été supprimé, le problème a été résolu.

0
Anders Jalming

J'ai une structure de dossier comme indiqué ci-dessous et j'ai ouvert le projet zero sur VS Code.

zéro/

 enter image description here

Puis launch.json

  "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}/angular"
        }
    ]
0
Sampath

Si vous utilisez le fractionnement de code via Webpack, votre point d'arrêt ne sera pas "vérifié" jusqu'à ce que Chrome charge ce module (c'est-à-dire généralement lorsque vous accédez à cette partie de l'application)

0
Jason Dufair

La solution est simple:

  1. Cliquez sur Fichier-> Ouvrir un dossier-> (sélectionnez le dossier de votre projet - dossier contenant package.json )
  2. Ouvrez le débogage-> appuyez sur le bouton de lecture pour créer une nouvelle configuration Chrome.
  3. Définir un nouveau point de rupture!
  4. Prendre plaisir!
0
nucknine

J'obtenais cette erreur simplement parce que je n'avais pas "sourceMaps": true dans ma configuration de débogage.

0
WDuffy

La solution pour moi a été d’ajouter au fichier launch.json la ligne suivante: "requireExactSource": false. Après cela, redémarrez VSC et essayez si cela fonctionne.

0
LeoSaravia

Pour moi mes points d'arrêt ont été désactivés:

 enter image description here

0
RayLoveless

npm i l'a corrigé pour ma part. J'ai parfois des points d'arrêt non vérifiés lors de la création d'un nouveau dossier/fichier, et c'est généralement ce qui se passe.

0
Andreas Valen

Si tout semble configuré correctement mais que le point d'arrêt ne soit toujours pas touché, la modification que je devais apporter consistait à spécifier le nom de fichier exact à servir. Par exemple, sur NodeJS, Express ne fait que spécifier localhost:3000 ne s’arrêtera pas sur mes points d’arrêt, mais spécifier localhost:3000/index.html fonctionnera comme prévu.

Configuration complète:

Mon dossier est ouvert dans le VSCode: learningPixi avec l'emplacement du dossier complet (Ubuntu Linux): /home/leigh/node/pixi-tut/learningPixi

Ma structure de dossier est:

/home/leigh/node/pixi-tut/learningPixi/.vscode/launch.json /home/leigh/node/pixi-tut/learningPixi/public/index.html /home/leigh/node/pixi-tut/learningPixi/server.js

Contenu de mon fichier launch.json:

{  
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000/index.html",
      "webRoot": ${workspaceFolder}/public",
      "skipFiles": ["pixi.min.js"]
    }
  ]
}

"skipFiles" était également très utile, sinon le débogueur introduit chaque appel de fonction

Ma configuration de serveur express (très basique) destinée uniquement au débogage de JavaScript dans des fichiers statiques était la suivante:

const express = require('express');
const path = require('path');

const app = express();
app.use(express.static(path.join(__dirname, '/public')));
app.listen(3000, () => console.log('App started on port 3000'));

Et selon la structure de dossier ci-dessus, assurez-vous que index.html se trouve dans/dossier public.

Si vous déboguez du code JavaScript à partir d'un fichier HTML, vous devrez peut-être également définir les paramètres dans VSCode et activer: Autoriser les points d'arrêt partout.

0
Leigh Mathieson

Dans mon cas, le problème était que le point d'arrêt était défini sur une ligne dans laquelle une fonction était déclarée.

openDetails(data: Asset) {         <-- The break point was here
    this.datailsOpen = true;
    this.currentAsset = data;
}

Solution: déplacez-le vers l'intérieur du corps de la fonction

openDetails(data: Asset) {         
    this.datailsOpen = true;        <-- Move the break point here
    this.currentAsset = data;
}
0
Mauricio Gracia Gutierrez

Mon problème était que le mappage de source n'était pas configuré correctement. Assurez-vous que vos sources TS réelles sont visibles dans l'onglet Sources des extensions de débogage de Chrome et essayez de placer vos points d'arrêt au préalable. Cela aidera peut-être quelqu'un.

0
Liam Kernighan