I'm trying to bind breakpoints in my code, but I'm getting this from the visual code:
"This breakpoint was initially set in:
C:\workspace\N3urons\order-service\src\entities\Order\OrderController.ts line 595 column 1
We couldn't find a corresponding source location, but found some other files with the same name:
file:///C:/workspace/N3urons/order-service/src/entities/Order/OrderController.ts
C:/workspace/N3urons/order-service/src/entities/Order/OrderController.ts
If this is the same file, you may need to adjust your build tool to correct the paths."
I'm coding on Windows and Visual Studio doesn't find the file, but finds matching files with these slashes.
Could someone help me with this?
My launch.json looks like this:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Node: Nodemon",
"processId": "${command:PickProcess}",
"restart": true,
"protocol": "inspector"
},
{
"name": "Docker: Attach to Node",
"type": "node",
"request": "attach",
"port": 9231,
"address": "localhost",
"localRoot": "${workspaceFolder}",
"remoteRoot": "/usr/src/service",
"sourceMapPathOverrides": {
"/usr/src/service/*": "${workspaceRoot}/*"
},
"protocol": "inspector",
"restart": true
}
]
}
Related
So I want to launch my JavaScript code from VS-Code to Firefox but cant figure out how to setup the launch.json file.
Terminal:
Terminal view when I run: npm run dev
Debug URL option:
When I hover over "local: http://localhost:3000/"
Error:
Error message that pops up when I try "Debug URL"
launch.json:
{
// 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": "firefox",
"request": "attach",
"name": "Attach"
},
{
"type": "firefox",
"request": "launch",
"reAttach": true,
"name": "Launch Firefox against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"program": "C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe"
},
{
"type": "firefox",
"request": "launch",
"reAttach": true,
"reloadOnAttach": true,
"name": "Launch index.html",
"file": "${workspaceFolder}/index.html"
},
{
"type": "pwa-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\Project 3 Three.js\\main.js"
}
]
}
I'm using debugging jest with vscode config, here is launch.json configurations:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Jest Current File",
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": [
"${relativeFile}"
],
"env": {
"cross-env": "1",
"NODE_PATH": "./src",
"__PLATFORM__": " WEB",
},
"runtimeArgs": [
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"windows": {
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
}
}
]
}
This configurations worked properly until I updated VSCode to 1.32.1. Now when I run Jest current file, the console prints out like this:
Debugger attached.
No tests found
In D:\workspace\my-project
747 files checked.
testMatch: - 747 matches
testPathIgnorePatterns: \\node_modules\\ - 747 matches
testRegex: (\\__tests__\\.*|(\.|\\)(test))\.js?$ - 15 matches
Pattern: src\utils\storage\my-file-name.test.js - 0 matches
Waiting for the debugger to disconnect...
Any help would be appreciated, thanks in advance.
After install old version VSCode (1.30.2), I saw the output:
Test Suites: 1 passed, 1 total
Tests: 9 passed, 9 total
Snapshots: 0 total
Time: 4.866s
Ran all test suites matching /src\\utils\\storage\\my-file-name.test.js/i.
Waiting for the debugger to disconnect...
Difference is Pattern:
v1.30.2: /src\\utils\\storage\\my-file-name.test.js/i.
v1.32.1: src\utils\storage\my-file-name.test.js
VSCode change their ${relativeFile}'s seperator from \\ to \, this is why jest couldn't find out test file
For those who are being stuck, just change "${relativeFile}" to "${fileBasenameNoExtension}" in launch.json configuration:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Jest Current File",
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": [
"./${fileBasename}"
],
"env": {
"cross-env": "1",
"NODE_PATH": "./src",
"__PLATFORM__": " WEB",
},
"runtimeArgs": [
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"windows": {
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
}
}
]
}
Better use --runTestsByPath ${relativeFile}, which always works.
I'm developing a next.js app with Visual Studio Code (vscode) and I like that editor a lot! I've installed Debugger for Chrome from the extension store. The config below starts a new Chrome instance and I can start to debug. It stops on the breakpoint in vscode but here comes the problem. It doesn't show the values of the function and jumps into the node_modules event though I added it to "skipfiles".
Breakpoints also won't stop on the constructor. Is next.js somehow not supported?
I'm using async await syntax a lot. Debugging server side code works perfectly.
{
"name": "My Client",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}/my-client/",
"skipFiles": [
"node_modules/**/*.js",
"<node_internals>/**/*.js",
"node_modules",
".next"
]
}
Following worked for me (extending from Maximiliano Cespedes answer):
{
// 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": "node",
"request": "launch",
"name": "NPM Launch",
"runtimeExecutable": "npm",
"cwd": "${workspaceFolder}/my-app",
"runtimeArgs": [
"run-script",
"debug"
],
"port": 9229,
"console": "integratedTerminal"
},
{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 9229,
"stopOnEntry": false,
"restart": true
},
{
"type": "chrome",
"request": "launch",
"name": "Chrome",
"url": "http://localhost:4200",
"webRoot": "${workspaceRoot}"
}
],
"compounds": [{
"name": "Debug-Full",
"configurations": ["NPM Launch", "Attach", "Chrome"]
}]
}
I hope is not too late for you ma friend,
Here you have the original documentation from VSCode that solve the issue:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Next: Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}"
},
{
"type": "node",
"request": "launch",
"name": "Next: Node",
"runtimeExecutable": "next",
"runtimeArgs": [
"--inspect"
],
"port": 9229,
"console": "integratedTerminal"
}
],
"compounds": [
{
"name": "Next: Full",
"configurations": ["Next: Node", "Next: Chrome"]
}
]
}
I'm working in Visual Studio Code in Ubuntu on my Typescript project. And I'm wondering is there any possibility to execute some kind of 'clean' task.
Here's my tasks.json
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"tasks": [
{
"taskName": "tsc",
"command": "tsc",
"isShellCommand": true,
"isBackground": true,
"problemMatcher": "$tsc"
},
{
"taskName": "clean",
"linux": {
"command": "rm",
"args": [
"./src/*.js"
],
"isShellCommand": true
},
"isShellCommand": true,
"isBackground": true
}
]
}
And here's my project structure.
Executing task clean says there's no such files or directory, while executing 'pwd' instead of rm says that I'm in the root of my project.
Any suggestions how does this build system work? Maybe there's some special syntax for env variables in VS Code?
After VSCode 1.14, we have a new tasks manager in VSCode. I'm using .NET Core on ubuntu and I have a build and a clean tasks like this:
{
"version": "2.0.0",
"tasks": [
{
"label": "build",
"type": "process",
"command": "dotnet",
"args": [
"build",
"MyProj.csproj"
],
"options": {
"cwd": "${workspaceFolder}/src/MyProj/"
},
"problemMatcher": "$msCompile"
},
{
"label": "clean",
"type": "shell",
"linux": {
"command": "rm",
"args": [
"-rfv",
"bin/*",
"obj/*"
]
},
"windows": {
"command": "del",
"args": [
"/S /Q",
"bin/*",
"obj/*"
]
},
"options": {
"cwd": "${workspaceFolder}/src/MyProj/"
},
"problemMatcher": []
}
]
}
Both tasks works as expected.
I have also been looking for this, but as far as I understand, it's not possible to have more than one task in tasks.json. You can have a tasks array, but that only contains different command line parameters for the same task. This example has the 'echo' task, and you can call it with different parameters. If you call the task 'hello' then 'echo Hello World' will be executed:
{
"version": "0.1.0",
"command": "echo",
"isShellCommand": true,
"args": [],
"showOutput": "always",
"echoCommand": true,
"suppressTaskName": true,
"tasks": [
{
"taskName": "hello",
"args": ["Hello World"]
},
{
"taskName": "bye",
"args": ["Good Bye"]
}
]
}
Have you tried using workspace variables? ${workspaceRoot} might be particular useful for you.
I'm following the official Aurelia tutorial to build a contact list app.
I'm stuck at "Building Out The Default Route" step and I start to get really pissed off.
I added the vendor dependencies for bootstrap and jquery as shown in the tutorial, but when i launch the page, renders blank and console outputs several errors:
Uncaught TypeError: h.load is not a function
Unhandled rejection Error: Failed loading required CSS file: ../node_modules/bootstrap/css/bootstrap.css
at fixupCSSUrls (http://localhost:9000/scripts/vendor-bundle.js:23357:13)
at http://localhost:9000/scripts/vendor-bundle.js:23396:16
now, i googled a lot, found several users having the same problem, but every fix didn't work. I tried several fix, checking for typos and errors (i'm just halfway of the tutorial, how many typing mistakes may i have done???), restart au run --watch, even copy paste the code directly from the tutorial page (i hate to do this because doesn't help my learning, but i was desperate). Nothing, the exact same errors continue to fire up and the page is still blank. I'm really freaking out about this apparently small stupid issues like completing an official tutorial.
Complete source here I included ALL files on purpose, to show you exactly how my sourcebase looks like.
aurelia.json
{
"name": "Contact Manager",
"type": "project:application",
"platform": {
"id": "web",
"displayName": "Web",
"output": "scripts"
},
"transpiler": {
"id": "babel",
"displayName": "Babel",
"fileExtension": ".js",
"options": {
"plugins": [
"transform-es2015-modules-amd"
]
},
"source": "src/**/*.js"
},
"markupProcessor": {
"id": "none",
"displayName": "None",
"fileExtension": ".html",
"source": "src/**/*.html"
},
"cssProcessor": {
"id": "none",
"displayName": "None",
"fileExtension": ".css",
"source": "src/**/*.css"
},
"editor": {
"id": "vscode",
"displayName": "Visual Studio Code"
},
"unitTestRunner": {
"id": "karma",
"displayName": "Karma",
"source": "test/unit/**/*.js"
},
"paths": {
"root": "src",
"resources": "src/resources",
"elements": "src/resources/elements",
"attributes": "src/resources/attributes",
"valueConverters": "src/resources/value-converters",
"bindingBehaviors": "src/resources/binding-behaviors"
},
"testFramework": {
"id": "jasmine",
"displayName": "Jasmine"
},
"build": {
"targets": [
{
"id": "web",
"displayName": "Web",
"output": "scripts"
}
],
"loader": {
"type": "require",
"configTarget": "vendor-bundle.js",
"includeBundleMetadataInConfig": "auto",
"plugins": [
{
"name": "text",
"extensions": [
".html",
".css"
],
"stub": true
}
]
},
"options": {
"minify": "stage & prod",
"sourcemaps": "dev & stage"
},
"bundles": [
{
"name": "app-bundle.js",
"source": [
"[**/*.js]",
"**/*.{css,html}"
]
},
{
"name": "vendor-bundle.js",
"prepend": [
"node_modules/bluebird/js/browser/bluebird.core.js",
"scripts/require.js"
],
"dependencies": [
"aurelia-binding",
"aurelia-bootstrapper",
"aurelia-dependency-injection",
"aurelia-event-aggregator",
"aurelia-framework",
"aurelia-history",
"aurelia-history-browser",
"aurelia-loader",
"aurelia-loader-default",
"aurelia-logging",
"aurelia-logging-console",
"aurelia-metadata",
"aurelia-pal",
"aurelia-pal-browser",
"aurelia-path",
"aurelia-polyfills",
"aurelia-route-recognizer",
"aurelia-router",
"aurelia-task-queue",
"aurelia-templating",
"aurelia-templating-binding",
{
"name": "text",
"path": "../scripts/text"
},
{
"name": "aurelia-templating-resources",
"path": "../node_modules/aurelia-templating-resources/dist/amd",
"main": "aurelia-templating-resources"
},
{
"name": "aurelia-templating-router",
"path": "../node_modules/aurelia-templating-router/dist/amd",
"main": "aurelia-templating-router"
},
{
"name": "aurelia-testing",
"path": "../node_modules/aurelia-testing/dist/amd",
"main": "aurelia-testing",
"env": "dev"
},
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
]
}
]
}
}
app.js
import { Router, RouterConfiguration} from 'aurelia-router';
export class App {
router: Router;
configureRouter(config: RouterConfiguration, router: Router) {
config.title = 'Contacts';
config.map([
{ route: '', moduleId: 'no-selection', title: 'Select' },
{ route: 'contact/:id', muduleId: 'contact-detail', name:'contacts' }
]);
this.router = router;
}
}
and app.html
<template>
<require from="../node_modules/bootstrap/css/bootstrap.css"></require>
<require from="./styles.css"></require>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<i class="fa fa-user"></i>
<span>Contacts</span>
</a>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-4">
Contact List Placeholder
</div>
<router-view class="col-md-8"></router-view>
</div>
</div>
</template>
<require from="../node_modules/bootstrap/css/bootstrap.css"></require>
needs to be
<require from="bootstrap/css/bootstrap.css"></require>
You've also mispelled moduleId in the contacts route in app.js. You've got muduleId.
Well, believe me, better you're not here, you'd get scared from my curses even if is italian...
I really don't know how is it possible, i checked everything multiple times even after i started over again and rewrote the entire damn thing....
Anyway, first of all thank you. I feel like a moron.
I fixed the typo for module and changed the require statement as suggested. Now the page renders as expected, but console still shows me an error stating that bootstrap needs Jquery. I already installed jQuery via npm, so, i'm puzzled...
here is a screenshot
I also tried adding
<require from="node_modules/jquery/dist/jquery.js"></require>
but doesn't work.
Any ideas?
and why i had to remove "../node_modules/" from the require statement? It doesn't load bootstrap from the node_module dir?
aurelia.json file is actually a require.js config file. Those two information should be enough to know what documentation to look at but basically, a require.js dependency like this one:
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": [
"jquery"
],
"resources": [
"css/bootstrap.min.css"
]
}
works like this: resources are require'd as module name + resource (resource needs extensions defined!), ie. <require from="bootstrap/css/bootstrap.min.css"></require> while javascript files are required by <require from="bootstrap"></require>, ie. just the module name to require the main file defined above, or <require from="bootstrap/some_path_to_jsfile_without_ext"></require>, ie. the module name + relative path to file to require some file relative to the path defined above.
DISCLAIMER : I'm a new web developer and have just started with Aurelia.