vscode Depurar e executar Angular2 Datilografado com o Visual Studio Code?



vs code angular html intellisense (8)

Depurar e executar Angular2 Datilografado com o Visual Studio Code?

Eu estou tentando depurar aplicativo typescript Angular2 com código VS https://angular.io/guide/quickstart

Alguém pode compartilhar etapas para depurar e executar a partir do código VS?


Answer #1

Para semente angular:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug with chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:5555",
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}/src/client",
      "userDataDir": "${workspaceRoot}/out/chrome",
      "sourceMapPathOverrides": {
        "app/*": "${webRoot}/app/*"
      }
    }
  ]
}

Answer #2

A resposta de @ Sanket estava correta, mas eu tive alguns problemas com isso. O primeiro Launch.json está no diretório ".vscode" do projeto. E o segundo: o número da porta deve ser o mesmo da porta do servidor padrão que você usa para iniciar o aplicativo. Eu uso ng saque de cmd para lançar meu projeto e número de porta padrão era 4200 assim eu mudei o arquivo de launch.json como segue

{ // 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", "sourceMaps": true, "webRoot": "${workspaceFolder}" } ] }


Answer #3

Especifique um userDataDir - isso evitará colisões com outras instâncias do Chrome que você já tenha em execução. Percebi que, por causa disso, o Chrome simplesmente para de ouvir em qualquer porta que você especificar. Abaixo está o que eu uso e é ótimo!

{
    "name": "Launch",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000/#/about",
    "port": 9223,
    "sourceMaps": true,
    "diagnosticLogging": true,
    "webRoot": "${workspaceRoot}",
    "userDataDir": "${workspaceRoot}/out/chrome"
}

Graças a @reecebradley - GitHub: Não é possível conectar ao destino: conectar ECONNREFUSED


Answer #4

Depois de muita pesquisa, encontrei estes passos

Antes de começar, verifique se você possui a versão mais recente do código VS. Você pode verificar a versão mais recente - Ajuda> Verificar atualizações ou Sobre.

  1. Instale a extensão chamada "Depurador para o Chrome". Quando a instalação terminar, reinicie o código VS.

  2. Vá para a janela Depurar, abra launch.json usando o Chrome.

  3. Na seção de configuração Launch.json, use abaixo de config

    {
        "name": "Launch localhost with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3000/Welcome",
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}"
    }
    
  4. Em tsconfig.json, verifique se você tem "sourceMap": true

Isso conclui as configurações do ambiente de depuração. Agora, antes de começar a depuração, verifique se todas as instâncias do Chrome.exe existentes estão fechadas. Verificar do Gerenciador de Tarefas OU Usar o comando DOS 'killall chrome'

  1. Execute seu projeto usando o comando npm start e o Chrome como navegador padrão.

  2. Depois que o aplicativo for executado com êxito, você receberá o número da porta. Copie o URL do navegador do Google Chrome e cole-o na seção de URL acima. (NOTA: Se você estiver usando o roteamento em sua aplicação, então url gostaria acima, caso contrário, ele estará terminando index.html etc)

  3. Agora, coloque pontos de interrupção onde quiser em seus arquivos datilografados.

  4. Novamente, vá para a janela de depuração no código do VS e pressione Executar. Sua guia / instância conectada ao depurador será semelhante a abaixo.


Answer #5

Aqui está uma documentação oficial do código visual studio sobre como depurar o Angular em VSCode https://code.visualstudio.com/docs/nodejs/angular-tutorial#_configure-the-chrome-debugger

Para depurar o código Angular do lado do cliente, precisaremos instalar a extensão do Debugger for Chrome. Abra a visualização Extensões (Ctrl + Shift + X) e digite "chrome" na caixa de pesquisa. Você verá várias extensões que fazem referência ao Chrome. Pressione o botão Instalar para o Debugger for Chrome. O botão mudará para Instalando e, depois de concluir a instalação, ele será alterado para Recarregar. Pressione Recarregar para reiniciar o Código VS e ativar a extensão.

Precisamos configurar inicialmente o depurador. Para fazer isso, vá até a visualização Depuração (Ctrl + Shift + D) e clique no botão de engrenagem para criar um arquivo de configuração do depurador launch.json. Escolha Chrome na lista suspensa Selecionar ambiente. Isso criará um arquivo launch.json em uma nova pasta .vscode em seu projeto, que inclui configuração para iniciar o site ou anexar a uma instância em execução. Precisamos fazer uma alteração para o nosso exemplo: altere a porta de 8080 para 4200.


Answer #6

Eu preciso usar o CORS então eu abro o chrome com a segurança da web desativada. Então faço a depuração do aplicativo Angular anexando o depurador ao chrome.

Linha CMD para iniciar o chrome com segurança da Web desativada:

cd "C:\Program Files (x86)\Google\Chrome\Application\"
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security --remote-debugging-port=9222

arquivo launch.json para anexar o depurador:

{
    // 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": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        },
    ]
}

Answer #7

Eu tive problemas com isso e enquanto @Sankets resposta ajudou foi este problema que resolveu para mim https://github.com/angular/angular-cli/issues/2453 .

Especificamente adicionando o abaixo para launch.json

"sourceMapPathOverrides": {
    "webpack:///c:/foo/bar/angular-project/*": "${workspaceRoot}/*"
}

Answer #8

Esses mods para launch.json funcionaram para mim no MacOS, o que me permitiu colocar o depurador e os pontos de interrupção funcionando em uma nova instância do Chrome por sessão de depuração ...

// This forces chrome to run a brand new instance, allowing existing
// chrome windows to stay open.
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"webRoot": "${workspaceRoot}",
"sourceMaps": true,
"sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }




visual-studio-code