Le lancement de Chrome et de débogage de Visual Studio Code

Je suis à l'aide de Visual Studio Code de debug front-end javascript (pour un plugin WordPress). J'ai du mal à configurer le lancement.fichier json correctement.

Je peux lancer chrome manuellement, puis les attacher à elle après le fait (à l'aide d'une demande d'attachement), auquel cas le javascript points d'arrêt de travail fine fine.

Si je lance google chrome à partir de l'intérieur de vscode (à l'aide de la demande de Lancement), il n'y connecter (j'en vois de sortie de la console) mais je ne reçois pas mes points d'arrêt de la cuisson. Je suppose que il y a certains paramètres incorrects dans mon lancement.fichier json.

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch Signup Form",
        "type": "chrome",
        "request": "launch",
        "url": "http://myclient.dev/signup-form",
        "sourceMaps": true,
        "webRoot": "../../..",
        "runtimeArgs": [
            "--remote-debugging-port=9222"
        ]
    },

    {
        "name": "Attach",
        "type": "chrome",
        "request": "attach",
        "port": 9222
    }
]

}

J'ai essayé tout ce que je pouvais penser pour la racine du site web (y compris le chemin d'accès local complet à la racine du site web "htdocs" et le chemin d'accès relatif que vous voyez ci-dessus. Il ne semble pas se soucier de ce que j'ai mis là-dedans, donc peut-être que je suis aboiements le mauvais arbre.

Le dossier du projet local est ici:

/home/me/code/vagrant-local/www/wordpress-myclient/htdocs/wp-content/plugins/cee-signup-form

Sur le serveur, ce qui correspond à:

http://myclient.dev/wp-content/plugins/cee-signup-form

Dans la page d'inscription-formulaire-je inclure le fichier javascript en question, à l'aide de son url complète.

Évidemment, je peux aller manuellement l'url, puis fixez chaque fois que je veux debug, mais avoir un one-cliquez sur lancer et déboguer serait de loin supérieure.

Ce que je fais mal?

OriginalL'auteur Leo De Bruyn | 2016-01-10

  1. 5

    Veuillez suivre les étapes ci-dessous:

    1. Vérifiez que vous avez installé "VS Code - Débogueur pour Chrome" l'extension.
    2. D'abord, Mettez ce code dans .vscode/lancement.json :
    {
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Node",
      "port": 9229,
      "protocol": "inspector",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run-script", "start"],
      "console": "integratedTerminal"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/client/src"
    }
  ],
  "compounds": [
    {
      "name": "Full-stack",
      "configurations": ["Node", "Chrome"]
    }
  ]
}

    1. Aller pour le mode Debug dans VS Code et commencer avec "Full-stack'.

    2. Commencer mnp

    Reportez-vous ceci : https://github.com/auchenberg/timey

    Veuillez formater votre code...
    Salut @LennartKloppenburg, Merci pour la suggestion. J'ai édité et mis en forme.
    Salut Vijay, est ce une config encore valide? J'obtiens une erreur sur vscode 1.16.1. Fondamentalement, j'ai un fichier JS avec un peu de code et quand j'essaie de débogage Ne peut pas se connecter au processus d'exécution, le délai d'attente après 10000 ms - (raison: Impossible de se connecter à la cible: connectez ECONNREFUSED 127.0.0.1:9229).

    OriginalL'auteur Vijay Chauhan

  2. 1

    Dans mon cas, sur Ubuntu 14.04, il a travaillé après avoir ajouté

    "runtimeExecutable": "/usr/bin/chromium-browser"

    J'ai cependant commencer chrome à l'avance.

    OriginalL'auteur wbartussek

  3. 1

    Il s'avère que c'était un bug dans VSCode, et il est corrigé dans la dernière version (1.2.1). Après la mise à jour, j'ai dû faire trois choses.

    Mise à jour de l'Extension Chrome

    Dans VSCode, appuyez sur CTRL+P pour afficher la Palette de Commande, puis:

    Extensions: Show Outdated Extensions

    À ce stade, il vous permettra de les mettre à jour. En savoir plus ici: https://code.visualstudio.com/Docs/editor/extension-gallery#_update-an-extension

    Modifier le lancement de config

    Ils exigent maintenant des chemins absolus pour la racine du site web. Donc, j'ai dû changer la webRoot propriété de la launch.json fichier à inclure explicitement l'espace de travail de la racine.

    "webRoot": "${workspaceRoot}/../../..",

    Fermer toutes les copies de Chrome avant de débogage

    C'est gênant. Mais il fonctionne.

    OriginalL'auteur Leo De Bruyn