I am trying to debug an Angular app which is running inside a container but I am getting the following error:
AppData\Local\Temp\vscode-chrome-debug.txt:
[11:27:35.501 UTC] OS: win32 x64
[11:27:35.501 UTC] Adapter node: v10.11.0 x64
[11:27:35.501 UTC] vscode-chrome-debug-core: 6.7.53
[11:27:35.501 UTC] debugger-for-chrome: 4.11.7
[11:27:35.501 UTC] From client: initialize({"clientID":"vscode","clientName":"Visual Studio Code","adapterID":"chrome","pathFormat":"path","linesStartAt1":true,"columnsStartAt1":true,"supportsVariableType":true,"supportsVariablePaging":true,"supportsRunInTerminalRequest":true,"locale":"en-us"})
[11:27:35.501 UTC] To client: {"seq":0,"type":"response","request_seq":1,"command":"initialize","success":true,"body":{"exceptionBreakpointFilters":[{"label":"All Exceptions","filter":"all","default":false},{"label":"Uncaught Exceptions","filter":"uncaught","default":false}],"supportsConfigurationDoneRequest":true,"supportsSetVariable":true,"supportsConditionalBreakpoints":true,"supportsCompletionsRequest":true,"supportsHitConditionalBreakpoints":true,"supportsRestartFrame":true,"supportsExceptionInfoRequest":true,"supportsDelayedStackTraceLoading":true,"supportsValueFormattingOptions":true,"supportsEvaluateForHovers":true,"supportsLoadedSourcesRequest":true,"supportsRestartRequest":true,"supportsSetExpression":true,"supportsLogPoints":true}}
[11:27:35.501 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"ClientRequest/initialize","data":{"Versions.DebugAdapterCore":"6.7.53","Versions.DebugAdapter":"4.11.7","successful":"true","timeTakenInMilliseconds":"5.823501","requestType":"request"}}}
[11:27:35.501 UTC] From client: launch({"type":"chrome","request":"launch","name":"UI Launch (Docker)","url":"http://localhost:4200","webRoot":"D:\\Saurabh\\Projects\\vscode-workflow/ng-app","sourceMapPathOverrides":{"webpack:/*":"${webRoot}/*","/./*":"${webRoot}/*","/src/*":"${webRoot}/*","/*":"*","/./~/*":"${webRoot}/node_modules/*"},"trace":true,"runtimeArgs":["--remote-debugging-port=9222"],"__sessionId":"079a3ab7-942d-4dfe-807b-0be98d6fca6f"})
[11:27:35.501 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"debugStarted","data":{"Versions.DebugAdapterCore":"6.7.53","Versions.DebugAdapter":"4.11.7","request":"launch","args":["type","request","name","url","webRoot","sourceMapPathOverrides","trace","runtimeArgs","__sessionId","breakOnLoadStrategy","pathMapping","sourceMaps","skipFileRegExps","targetFilter","smartStep","showAsyncStacks"]}}}
[11:27:35.501 UTC] Getting browser and debug protocol version via http://127.0.0.1:9222/json/version
[11:27:35.501 UTC] Discovering targets via http://127.0.0.1:9222/json/list
[11:27:35.506 UTC] HTTP GET failed: Error: socket hang up
[11:27:35.507 UTC] Discovering targets via http://127.0.0.1:9222/json
[11:27:35.508 UTC] HTTP GET failed: Error: socket hang up
[11:27:35.508 UTC] There was an error connecting to http://127.0.0.1:9222/json/version : socket hang up
[11:27:35.521 UTC] HTTP GET failed: Error: socket hang up
[11:27:35.674 UTC] [chromeSpawnHelper] spawn('C:\Program Files (x86)\Google\Chrome\Application\chrome.exe', ["--remote-debugging-port=9222","--no-first-run","--no-default-browser-check","--remote-debugging-port=9222","--user-data-dir=C:\\Users\\spala\\AppData\\Local\\Temp\\vscode-chrome-debug-userdatadir_9222","about:blank"])
Folder Structure:
./ng-app/angular.json:
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "ng-app:build",
"open": true,
"host": "0.0.0.0",
"port": 80
}
}
./ng-app/.docker/development.dockerfile:
FROM node:10.15.1-alpine
LABEL author="Saurabh Palatkar"
RUN mkdir /usr/share/app
WORKDIR /usr/share/app
COPY package.json package.json
RUN npm i -g @angular/cli@8.0.3
COPY package-lock.json package-lock.json
RUN npm i
COPY . .
ENV PATH /node_modules/.bin:$PATH
EXPOSE 80
EXPOSE 9222
CMD ["sh", "-c", "ng serve --host=0.0.0.0 --watch --poll=2000"]
./ng-app/docker-compose.development.yml: version: "3.4"
services:
ng-app-service:
image: ng.app.dev.image
container_name: ng.app.dev.container
build:
context: .
dockerfile: .docker/development.dockerfile
environment:
NODE_ENV: development
volumes:
- "./:/usr/share/app"
- /app/node_modules/
ports:
- 4200:80
- 9222:9222
command:
[
"sh",
"-c",
"npm start --host=0.0.0.0 --watch --poll=2000 --inspect=9222 --remote-debugging-port=9222 --nolazy",
]
./.vscode/launch.json:
{
"type": "chrome",
"request": "launch",
"name": "UI Launch (Docker)",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}/ng-app",
"sourceMapPathOverrides": {
"webpack:/*": "${webRoot}/*",
"/./*": "${webRoot}/*",
"/src/*": "${webRoot}/*",
"/*": "*",
"/./~/*": "${webRoot}/node_modules/*"
},
"trace": true,
"runtimeArgs": ["--remote-debugging-port=9222"]
}
./.vscode/tasks.json:
{
"label": "serve ui dev docker",
"type": "npm",
"script": "serve-ui-dev-docker",
"isBackground": true,
"presentation": {
"focus": true,
"panel": "dedicated"
},
"group": {
"kind": "build",
"isDefault": true
},
"problemMatcher": {
"owner": "typescript",
"source": "ts",
"applyTo": "closedDocuments",
"fileLocation": ["relative", "${cwd}"],
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "Compiled |Failed to compile."
}
}
}
}
./package.json:
"scripts": {
"serve-ui-dev-docker": "cd ng-app && docker-compose -f docker-compose.development.yml up --build"
},
from Unable to debug dockerize Angular app in VS Code - Cannot connect to the target: socket hang up
No comments:
Post a Comment