Oui, vous pouvez déboguer les pages Web dans Chrome directement à partir de VScode. Vous devez installer le débogueur pour Chrome Extension et configurer Launch.json. 1. Installez l'extension "débogueur pour Chrome" dans VSCODE; 2. Assurez-vous que le projet génère des cartes source (telles que les ensembles WebPack Devtool et TypeScript active SourceMap); 3. Créez un fichier de configuration Launch.json dans VScode et spécifiez les paramètres de démarrage Chrome tels que URL et webroot; 4. Après avoir démarré le serveur de développement local, exécutez la configuration via le panneau d'exécution et de débogage. Chrome s'ouvrira et arrivera sur l'ensemble de points d'arrêt dans VSCODE pour atteindre le processus de débogage complet.

Le débogage d'une page Web dans Chrome directement à partir de VScode est possible en utilisant le débogueur pour l'extension Chrome et la configuration de lancement appropriée. Cette configuration vous permet de définir des points d'arrêt dans votre code JavaScript / TypeScript dans VScode et de les faire frapper lorsque le code s'exécute en Chrome - le tout sans quitter votre éditeur.

Voici comment le configurer:

1. Installez l'extension requise

Tout d'abord, installez l'extension "débogueur pour Chrome" dans VSCODE:

• Ouvrir VScode.
• Accédez à la vue d'extensions ( Ctrl Shift X ou Cmd Shift X sur Mac).
• Recherchez "Debugger pour Chrome" (par Microsoft).
• L'installez.

Remarque: Cette extension lance Chrome ou se fixe à une instance existante et permet le débogage de VScode.

2. Activer les cartes source dans votre projet

Pour que le débogage fonctionne correctement (en particulier avec les frameworks, les dactylographies ou le code traduit), vous avez besoin de cartes source afin que les points d'arrêt de votre carte de fichiers source d'origine soient correctement au code exécuté dans le navigateur.

Assurez-vous que votre outil de construction (WebPack, Vite, etc.) génère des cartes source:

• WebPack : Définissez devtool: 'source-map' ou 'eval-source-map' dans webpack.config.js .
• VITE : Les cartes source sont activées par défaut en mode Dev.
• TypeScript : dans tsconfig.json , assurez-vous:

   {
    "CompilerOptions": {
      "SourceMap": vrai,
      "outdir": "./dist"
    }
  }

3. Configurez launch.json dans vscode

Créez une configuration de débogage qui explique à VScode comment lancer Chrome et Map Files.

• Dans VScode, accédez à la vue Run and Debug ( Ctrl Shift D ).
• Cliquez sur "Créer un fichier lancé.json" si vous n'en avez pas.
• Choisissez "Chrome" comme environnement.
• Remplacez le contenu par une configuration de travail. Voici un exemple courant:

 {
  "Version": "0.2.0",
  "Configurations": [
    {
      "Nom": "Lance Chrome contre localhost",
      "Type": "Chrome",
      "Demande": "Lancement",
      "URL": "http: // localhost: 3000",
      "webroot": "$ {workspacefolder}",
      "SourcemAppathoverrides": {
        "webpack: ///./.*": "$ {webroot} / *",
        "webpack: /// *": "*",
        "webpack: /// src / *": "$ {webroot} / src / *"
      }
    }
  ]]
}

Options clés expliquées:

• "url" : l'adresse de votre serveur de développement en cours d'exécution (par exemple, http://localhost:3000 ).
• "webRoot" : cartographie les fichiers source dans Chrome dans votre dossier de projet local.
• "sourceMapPathOverrides" : aide VScode à trouver vos fichiers source d'origine lors de l'utilisation de bundlers comme WebPack.

?? Assurez-vous que votre serveur de développement (par exemple, npm start , vite , webpack serve ) est déjà en cours d'exécution avant de démarrer la session de débogage.

4. commencer à déboguer

1. Démarrez votre serveur de développement (par exemple, npm run start ).
2. Dans VSCODE, accédez au panneau Run and Debug .
3. Sélectionnez la configuration "Lancer Chrome contre LocalHost" .
4. Cliquez sur Exécuter (F5).

Chrome ouvrira (ou réutilisera une instance, selon les paramètres), et votre application se chargera.

Maintenant:

• Définissez des points d'arrêt dans vos fichiers .js , .ts ou .tsx dans VScode.
• Lorsque le code s'exécute dans Chrome, l'exécution s'arrêtera à ces points d'arrêt.
• Vous pouvez inspecter les variables, la pile d'appels et parcourir le code - le tout dans VScode.

Conseils et dépannage

• Les points d'arrêt ne frappent pas?

  • Vérifier la génération de cartes source.
  • Vérifiez les chemins de fichier dans sourceMapPathOverrides .
  • Essayez d'utiliser "trace": true dans launch.json pour voir les journaux de mappage.

• Utilisez "request": "attach" pour se connecter à un chrome déjà ouvert

  • Démarrer Chrome avec le débogage à distance activé:

     Chrome --Remote-Debugging-Port = 9222

  • Utilisez ce launch.json config:

     {
      "nom": "attacher à Chrome",
      "Type": "Chrome",
      "Demande": "attacher",
      "Port": 9222,
      "webroot": "$ {workspacefolder}"
    }

• Fonctionne mieux avec des paramètres simples ou créez une application React, Vite, Angular CLI . Les configurations de bundler complexes peuvent nécessiter des remplacements de chemin personnalisés.

---

Fondamentalement, c'est un combo de la bonne extension, des cartes source et un launch.json solide.json. Une fois configuré, le code frontal de débogage de VScode semble transparent.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!