I have a project in IONIC. When i build my project (F5), the address (http://localhost:8100/) cannot show application.
My file: launch.json
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceRoot}"
}
]
Related
I'm debugging a Next.js 13 application using the following .vscode/launch.json file:
{
"version": "0.2.0",
"compounds": [
{
"name": "Compound",
"configurations": [],
"stopAll": false
}
],
"configurations": [
{
"name": "Next.js: debug server-side",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"stopOnEntry": false
},
{
"name": "Next.js: debug client-side",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"stopOnEntry": false
},
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"serverReadyAction": {
"pattern": "started server on .+, url: (https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
},
"stopOnEntry": false
}
]
}
However, every time I debug on the "Next.js: debug full stack" option, it stops on the first file (.next/server/app...) after every refresh.
Although the documentation says stopOnEntry is accepted, vscode, says its not.
Perhaps I'm using it in the wrong place.
How can I make Visual Studio code does not stop on entry?
Update
I can confirm the same issue happen when Debugging on PhpStorm. Is it a Next.js bug?
Try Using this:
{
"version": "0.2.0",
"compounds": [
{
"name": "Compound",
"configurations": [],
"stopAll": false
}
],
"configurations": [
{
"name": "Next.js: debug server-side",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"stopOnEntry": false
},
{
"name": "Next.js: debug client-side",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"stopOnEntry": false
},
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "node --inspect-brk $(which npm) run dev",
"serverReadyAction": {
"pattern": "started server on .+, url: (https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
}
}
]
}
Change it according to your requirements if you like.
Using the similar launch configuration I'm NOT able to attach to httpS://localhost:4200 from VSC for Angular 11 app, neither Chrome nor Edge.
launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Attach to Edge",
"port": 9222,
"request": "attach",
"type": "pwa-msedge",
"webRoot": "${workspaceFolder}"
},
{
"name": "Attach to pwa-Chrome",
"port": 9222,
"request": "attach",
"type": "pwa-chrome",
"urlFilter": "https://localhost:4200",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Legacy Chrome",
"port": 9222,
"urlFilter": "https://localhost:4200",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "launch",
"name": "F5 against localhost",
"port": 4201,
"url": "https://localhost:4200",
"webRoot": "${workspaceFolder}"
}
]
}
Cannot connect to the target at localhost:9222: Could not connect to
debug target at http://localhost:9222: Could not find any debuggable
target.
Bottom launch works.
If you don't have SSL certificate (self or real), ng serve --ssl will do.
If still not working then use a diff port. Here is my launch.json:
{
"name": "UI Chrome",
"request": "launch",
"type": "chrome",
"port": 4201,
"url": "https://localhost:4200",
"webRoot": "${workspaceFolder}"
}
Update: why 4201?
4201 is to help me bypass error in my original debugging, it did the trick help me continue debugging.
I am trying to optimize the developer experiance for my Application. I have a monorepository with an .NetCore API and an Angular SPA. To start Debugging i was opening 2 Terminals and cd in to the directories to execute ng serve / dotnet watch run and after that attaching the chrome and .net debugger.
I want to achive this using one lauch config.
I manage to start the task in 2 terminals but cannot get both debuggers to work.
My launch json
"version": "0.2.0",
"configurations": [
{
"name": ".NET Core Attach",
"type": "coreclr",
"request": "attach",
"processId": "${command:pickProcess}"
},
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}/DatingApp-SPA"
}
],
"compounds": [
{
"name": "Server/Client",
"configurations": ["Launch Chrome", ".NET Core Attach"],
"preLaunchTask": "run dev",
}
]
}
My Tasks.json
{
"version": "2.0.0",
"tasks": [
{
"label": "run dev",
"dependsOn": ["watch", "serve spa"]
},
{
"label": "serve spa",
"command": "ng serve,
"type": "shell",
"problemMatcher": "$tsc",
"options": {
"cwd": "${workspaceFolder}/DatingApp-SPA"
}
},
{
"label": "watch",
"command": "dotnet",
"type": "process",
"args": [
"watch",
"run",
"${workspaceFolder}/DatingApp.API/DatingApp.API.csproj",
"/property:GenerateFullPaths=true",
"/consoleloggerparameters:NoSummary"
],
"options": {
"cwd": "${workspaceFolder}/DatingApp.API"
},
"problemMatcher": "$msCompile"
}
]
}
I am using Electron (Node.js 7.4, chromium 51) with the chrome dev tools (with react and redux extensions)
I can see the react code in the react tab, but when I set breakpoints in the JSX source, and (hit them) they are not properly mapped.
I am using babel with inline source maps, so I can see the output js (es2015 preset and react presets).
I am not using a bundler (since this is an Electron project)
Has anyone else come across this?
package.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Main Electron Process",
"program": "${workspaceRoot}/main.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
"runtimeArgs": [
"."
],
"env": {},
"sourceMaps": false
},
{
"name": "Launch Chrome against localhost",
"type": "chrome",
"request": "launch",
"url": "http://localhost/NodeWork//window.html",
"webRoot": "${workspaceRoot}"
},
{
"name": "Attach to Chrome",
"type": "chrome",
"request": "attach",
"port": 9222,
"webRoot": "${workspaceRoot}"
}
]
}
launch.json (I use VSCODE)
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Main Electron Process",
"program": "${workspaceRoot}/main.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
"runtimeArgs": [
"."
],
"env": {},
"sourceMaps": true
},
I was loading the render page from http:// instead of file://
I am trying to debug a JavaScript program on chrome, but it does not work.
Details:
OS: Windows 10.
IDE: Visual Studio Code.
Debugger configuration (json):
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
]
}
I managed to figure it out, here are the details.
I had to reconfigure the JASON file as follows:
{
"version": "0.2.0",
"configurations": [{
"name": "Launch Client Side",
"type": "chrome",
"request": "launch",
"file": "${workspaceRoot}/file_name.html",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "Launch Server Side",
"type": "chrome",
"request": "launch",
"url": "http://localhost/mypage.html",
"sourceMaps": true,
"webRoot": "wwwroot"
}
]
}
Note: In order to use the debug features of Visual Studio Code, you need to refresh the browser after you launched the HTML file.