I need help with my Vue application.
VSCode says "unbound" breakpoint and it`s not going into the breakpoint, here is my code sample:
<script>
import axios from "#/axios";
export default {
methods: {
async addPreRegisteredUser(email) {
await axios.post("AddPreRegisteredUser", email);
},
},
};
</script>
and here my launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
},
{
"type": "firefox",
"request": "launch",
"name": "vuejs: firefox",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
}
]
}
I set the breakpoints at inside the "addPreRegisteredUser" method, but unfortunately it doesn't jump in.
Do any of you know what the reason is?
Related
I've the following workspace configuration
{
"folders": [
{
"path": "."
}
],
"launch": {
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "docker-compose:launch:chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
},
"preLaunchTask": "docker:compose:up",
"postDebugTask": "docker:compose:down"
},
],
},
"tasks": {
"version": "2.0.0",
"tasks": [
{
"label": "npm:install",
"type": "shell",
"command": "npm install",
"linux": {
"command": "if [ -d ${workspaceFolder}/node_modules ]; then npm install fi"
},
"windows": {
"command": "cmd",
"args": ["/C","if not exist ${workspaceFolder}/node_modules npm install"]
},
"options": {"cwd":"${workspaceFolder}"}
},
{
"type": "docker-compose",
"label": "docker:compose:up",
"dependsOn": ["npm:install"],
"isBackground": true,
"dockerCompose": {
"up": {
"detached": true,
"build": true,
"customOptions": "",
"services": [
"site"
]
},
"files": [
"${workspaceFolder}/docker-compose.yaml"
]
}
},
{
"type": "docker-compose",
"label": "docker:compose:down",
"dockerCompose": {
"down": {
"removeVolumes":false
},
"files": [
"${workspaceFolder}/docker-compose.yaml"
]
},
},
]
},
"settings": {
"terminal.integrated.cwd": "${workspaceFolder}"
}
}
The launch("docker-compose:launch:chrome") configuration is not launching the chrome and I think thats happening because it thinks the task is not finished.
As far I know this should be checked using the problemMatcher, for vuejs as an example i can have the following problemMatcher:
"problemMatcher": [{
"base": "$tsc-watch",
"background": {
"activeOnStart": true,
"beginsPattern": "Starting development server",
"endsPattern": "Compiled successfully"
}
}],
How can i achive the same results using docker-compose?
I mean, is there a way to only launch chrome browser when the npm run serve command is finished?
I'm currently working in a symfony/VueJS project. I would like to debug the VueJs part with VSCode and Chrome. When I put a breakpoint on a line of vuejs code after launching the chrome debuging VSCode says the breakpoint is unbound. My VueJS code path is in assets/js.
I configured the .vscode/launch.json as follows and try many configurations, but I got "unbound breakoints" after launching the chrome debuging :
{
"name": "WSL Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8003/login",
"webRoot": "${workspaceFolder}",
"sourceMap": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
},
Have you some ideas ?
Regards
Lamiel
Try the following configuration in your launch.json file
{
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*",
}
}
]
}
Also add the the following vue.config.js file to the root directory of the project
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
Is there a way to define variables in vscode for use in launch.json?, I only want some variable that will be common to different configurations, let's say TESTING_USER="ABC"
{
"version": "0.2.0",
// it would be ideal to set it here somehow,
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Node",
"runtimeArgs": ["idUser", "${TESTING_USER}"],
},
{
"type": "chrome",
"request": "launch",
"name": "Chrome",
"url": "http://localhost:3000?${TESTING_USER}",
}
],
}
The only solution I've found would be creating an entry in settings.json and then referring it with ${config:xxxx} but I wonder if there's a more direct way.
You can use the extension Command Variable and use a file with key-value pairs
Another possibility is to use the command: extension.commandvariable.transform
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Node",
"runtimeArgs": ["idUser", "${input:TESTING_USER}"],
},
{
"type": "chrome",
"request": "launch",
"name": "Chrome",
"url": "http://localhost:3000?${input:TESTING_USER}",
}
],
"inputs": [
{
"id": "TESTING_USER",
"type": "command",
"command": "extension.commandvariable.transform",
"args": { "text": "ABC" }
}
]
}
I have a large Vue.js project which I am trying to get Debugging working properly with in VS Code. I've been trying various different things for a full week now and I keep getting problems with binding breakpoints. For what it's worth, these typically crop up worse in classes that are created through a factory pattern or things like Vuex actions that don't have directly accessible function endpoints - this may be related.
Here's a sample of some launch configs...
{
"name": "Parity - Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080/app",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
"/./*": "${webRoot}/*",
"/src/*": "${webRoot}/*",
"/*": "*",
"/./~/*": "${webRoot}/node_modules/*"
}
},
{
"name": "Parity - Edge",
"type": "edge",
"request": "launch",
"url": "http://localhost:8080/app",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
"/./*": "${webRoot}/*",
"/src/*": "${webRoot}/*",
"/*": "*",
"/./~/*": "${webRoot}/node_modules/*"
}
},
I get exactly the same behaviour in Chrome and in Edge (not surprising as they are essentially the same browser these days).
Upon digging through the Sources tab in the browser I found that the source maps are mostly all within the webpack folders for this, hence why they aren't being found (the exception being the *.vue files, hence why they would work fine).
The following configuration works for me, but the full answer is...
look at where the files are found in 'Sources' in your web browser and
use those locations to map back to the actual file location - doing
what I did before and just trying to use someone else's random config
isn't always going to work.
{
"name": "Parity - Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080/app",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
"webpack:///./src/*": "${webRoot}/*",
"webpack:///./node_modules/*": "${webRoot}/node_modules/*"
}
},
{
"name": "Parity - Edge",
"type": "edge",
"request": "launch",
"url": "http://localhost:8080/app",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
"webpack:///./src/*": "${webRoot}/*",
"webpack:///./node_modules/*": "${webRoot}/node_modules/*"
}
},
When i tried to access the local Json data in angular 5 using httpclient was not able to fetch the data but when tried to access the same with the web server it is working. i have added the api folder in the angular-cli.json file and still not able to access the json.
employee.component.ts
import {Component} from "#angular/core"
import {EmployeeService} from './employee.service'
#Component({
selector:'app-employee',
templateUrl:'./employee.component.html'
})
export class EmployeeComponent {
list:any
data:any
constructor(private employee:EmployeeService){}
ngOnInit() {
this.employee.getEmployee().subscribe(list=>{
this.data= this.list.data
console.log(this.list)
})
}
}
employee.service.ts
import {Injectable} from "#angular/core";
import {HttpClient} from "#angular/common/http";
import "rxjs/add/operator/map";
#Injectable()
export class EmployeeService {
url: string = "src/app/api/employee.json"
constructor(private http: HttpClient) {}
getEmployee() {
return this.http.get(this.url)
}
}
employee.json
{
"data": [
{
"id": 66896,
"name":"Vinay",
"phone": "9620529048",
"address":{
"city":"Bangalore",
"street":"ABC street",
"state":"Karnataka",
"PostCode":"560076"
}
},
{
"id": 66923,
"name":"John",
"phone": "7720808609",
"address":{
"city":"Hyderabad",
"street":"PQR street",
"state":"UttarPradesh",
"PostCode":"412114"
}
},
{
"id": 66898,
"name":"Vijay",
"phone": "8888830456",
"address":{
"city":"Pune",
"street":"XYZ street",
"state":"Maharastra",
"PostCode":"411067"
}
}
]
}
path for json file - src->app->api->employee.json
Can someone share their knowledge so that i can solve this issue
please find my angular-cli.json file
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"demo": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/demo",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/app/api/employee.json",
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "demo:build"
},
"configurations": {
"production": {
"browserTarget": "demo:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "demo:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"styles.css"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"demo-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "demo:serve"
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "demo"
}
Look at the angular-in-memory-web-api, it serves to simulate a data server, it intercepts HTTP requests.
Angular has done a great tutorial : https://angular.io/tutorial/toh-pt6