I am trying to debug my web app with vscode and framework angular.js I have downloaded debuging for chrome extentions but when start the program display the follow error on debug console.
SourceMaps.loadSourceMapContents: Could not download sourcemap from https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js.map
My file launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost",
"type": "chrome",
"request": "launch",
"url": "http://localhost/index.html",
"webRoot": "${workspaceRoot}"
},
{
"name": "Attach to Chrome",
"type": "chrome",
"request": "attach",
"port": 9222,
"webRoot": "${workspaceRoot}"
}
]
}
My html code where call angular.min-js:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="../js/todo.js"></script>
<link rel="stylesheet" href="../css/todo.css">
</head>
The web app is in IIS localhost. Do you have any suggestions to solve this? or another method to debug angular app and build web app.
I have solved this problem with follow steps:
download source from https://angularjs.org/
reference the source as a file src="../js/angular.min.js"
Modify "webRoot" in launch.json. add /JS/ here is where stored javascripts file.
launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost",
"type": "chrome",
"request": "launch",
"url": "http://localhost/index.html",
"webRoot": "${workspaceRoot}/JS/"
,"diagnosticLogging": true,
"sourceMaps": true
},
{
"name": "Attach to Chrome",
"type": "chrome",
"request": "attach",
"port": 9222,
"webRoot": "${workspaceRoot}/JS/",
"sourceMaps": true
}
]
}
Related
I am trying to use VS Code Launch configuration for debugging static site built using React JS framework. After launching the debugger, i am able to debug files like Gatsby-node js and gatsby-browser js and some other common files which are directly used by above 2 files. However, I am not able to debug some of the javascript files which are internal to source folder.
Here is my launch configuration in launch.json
`{
"version": "0.2.0",
"configurations": [
{
"name": "Gatsby develop",
"type": "node",
"request": "launch",
"sourceMaps": true,
"program": "${workspaceRoot}/node_modules/.bin/gatsby",
"windows": {
"program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby"
},
"args": ["develop"],
"env": {
"PARCEL_WORKERS": "0",
"GATSBY_CPU_COUNT": "1",
},
"runtimeArgs": ["--nolazy", "--inspect-brk"],
"console": "integratedTerminal",
"outFiles": [
"${workspaceFolder}/*/.js",
"!*/node_modules/*"
]
},`
I tried to play around with sourceMaps flag in tsconfig.json file also.
I want to debug my AngularJS / Typescript site using "Attach" option of Debugger for Chrome rather than "Launch" option that opens new browser windows each time.
Here is a launch.json file created for Debugger for Chrome:
{
// 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}"
},
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
I start Chrome by passing --remote-debugging-port=9222 argument:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222
I host the app using serve: serve -l 8080
But I cannot make the debugger to work, breakpoints don't get hit, and VSCode doesnt seem to be able to Attach.
Am I missing something? Thanks.
Recently I have upgraded to Jest 23.x.x, using the same VSCode debugging configuration as in Jest 22.x.x, I get weird behaviors: breakpoints are moved, and you cannot really debug (not hitting the real line of code). If I downgrade to 22 everything works as expected.
Is there any breaking change or update from 22 to 23 to be aware of for this case?
My vscode debug launch configuration
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Jest All",
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
"args": [
"--runInBand",
"--no-cache"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
},
{
"type": "node",
"request": "launch",
"name": "Jest Current File",
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
"args": [
"${relativeFile}",
"--runInBand",
"--no-cache"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
},
]
}
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "go",
"request": "attach",
"mode": "debug",
"remotePath": "",
"port": 2345,
"host": "127.0.0.1",
"program": "revel.exe",
"env": {},
"args": [],
"showLog": true
},
]
}
how to debug revel framework(golang) application in visual studio code(vscode)
how to write the configuration file(launch.json)
Here are the steps to debug a revel framework (golang) app in vscode.
Import revel project folder into vscode
Edit ~/.vscode/launch.json so that it looks like the following: (replace values in <> with values for your own local env.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "go",
"request": "launch",
"remotePath": "",
"port": 2345,
"host": "127.0.0.1",
"mode": "debug",
"program": "${workspaceRoot}/app/tmp/",
"env": {},
"args": ["-importPath", "<project folder name>", "-srcPath", "C:\\Users\\<username>\\go\\src", "-runMode", "dev"]
}
]
}
Note that -importPath should be the directory (relative to $GOPATH\src where your project lives)
Note that the value for -srcPath should match your $GOPATH\src directory (I'm running on Windows)
Once your launch.json is set up as so, you can start the app in deb mode and put breakpoints wherever you wish.
In vs code, I have created a launch.json file in an HTML angularjs project. I am not able to launch the project in my localhost. It keeps on saying as Failed to load resource: net::ERR_CONNECTION_REFUSED (http://localhost:8080/).
Project Structure:-
Project => .vscode => launch.json
=> app
=> scripts
=> styles
=> index.html
launch.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}"
}
]
}
Can someone help me to solve this? Thanks in advance
I was experiencing the same issue.
Changing my launch.json file to the following solved the issue (Chrome is my default browser):
{
// 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": "pwa-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\app.js"
}
]
}
Where app.js was in my root folder of the workspace.
Here's what was the preivous launch.json file:
{
// 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": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
Edit the launch.json file inside the .vs code folder, delete the last three lines in the configuration (name, url, webroot).
Before Editing launch.json file
{
// 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": "pwa-chrome",
"request": "launch",
"name": "sample1",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
After Editing launch.json file
{
// 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": "pwa-chrome",
"request": "launch",
}
]
}
If above the answer did not work just delete the launch.json file in the .vs code Folder.
both worked for me.
Just Change your setting put all in your launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"webRoot": "${workspaceRoot}"
},
{
"name": "Attach to Chrome",
"type": "chrome",
"request": "attach",
"port": 4200,
"webRoot": "${workspaceRoot}"
}
]
}
Have you tried removing the URL line? Here it is below:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
// "url": "http://localhost:8080", remove this line?
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
] }
I also
Installed Node JS on my computer (Download link -- https://nodejs.org/)
On Visual Studio, enter (Ctrl + Shift + X) and search 'Live Server'
Install 'Live Server' by Ritwick Dey, close and reopen Visual Studio