`au run --watch` task with source maps in debugger - visual-studio-code

In How to implement `au run --watch` task + debugging Ashley Grant outlines nicely a method (along with other contributors) to launch a browser while debugging in VS Code, but as evident in comments, it appears source mapping doesn't work. Indeed, I got going with that post, but as being a rather n00b with both VS Code and Aurelia, I wonder if anyone has ideas what could make it working? Currently I have only JS code, but that or TypeScript helpers and pointers are appreciated.
Just in case, here is the
tasks.json
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "au",
"isShellCommand": true,
"tasks": [
{
"taskName": "watch",
"suppressTaskName": true,
"args": [
"run",
"--watch"
],
"isBuildCommand": false,
"isBackground": true,
"problemMatcher": {
"owner": "au",
"severity": "info",
"fileLocation": [
"relative",
"${workspaceRoot}"
],
"pattern": {
"regexp": "__________",
"file": 1
},
"watching": {
"activeOnStart": true,
"beginsPattern": "^File Changed: (.*)",
"endsPattern": "/(?:BrowserSync Available At:)|(?:Finished 'reload')"
}
}
}
]
}
and here is the launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:9002",
"webRoot": "${workspaceRoot}",
"preLaunchTask": "watch"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 3003,
"webRoot": "${workspaceRoot}"
},
{
"type": "firefox",
"request": "launch",
"name": "Launch Firefox against localhost",
"url": "http://localhost:9002",
"webRoot": "${workspaceRoot}",
"preLaunchTask": "watch"
},
{
"type": "firefox",
"request": "attach",
"name": "Attach to Firefox",
"port": 3003,
"webRoot": "${workspaceRoot}"
}
]
}

Not sure if this is what you are looking for, but this is the only way I got working to debug JavaScript in an Aurelia application with VSC.
Works only with Chrome, no luck with Firefox so far.
A JavaScript file must be open and it must be the active editor in VSC for the debugger to use the right path. Breakpoints will work (only) for all JavaScript files in that same directory.
Command line:
au run --watch
launch.json:
"configurations": [
{
"type": "chrome",
"request": "launch",
"sourceMaps": true,
"trace": true,
"name": "Aurelia App in Chrome (for currently open JavaScript file)",
"url": "http://localhost:9000/index.html",
"webRoot": "${fileDirname}/.."
},
...

Related

How to configure launch.json for NextJs and Typesctipt

I am trying to create a launch.json file for the following repo:
https://github.com/zakariamofaddel/shopify-nextjs-template
I have tried both the default VS Code node template and the NextJs launch file.
VS code default Node generated .vscode/launch.json file
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\server\\index.ts"
}
]
}
I am able to run yarn dev successfully and use console.log:
https://github.com/zakariamofaddel/shopify-nextjs-template/blob/38c700d8706818aa12d892b3f1193a969919e003/package.json#L9
I found the solution after adding the TypeScript Debugger extension in VS code.
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Localhost",
"type": "node",
"request": "launch",
"args": [
"${workspaceRoot}\\server\\server.ts"
],
"runtimeArgs": [
"-r",
"ts-node/register/transpile-only"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"internalConsoleOptions": "openOnSessionStart",
"env": {
"NODE_ENV": "development"
}
}
]
}

Is there a way to enable the `justMyCode` property in VS Code's Firefox Debugger?

Is there a way to enable the justMyCode property in VS Code's Firefox Debugger?
"version": "0.2.0",
"configurations": [
{
"type": "firefox",
"reAttach": true,
"request": "launch",
"name": "Firefox",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}",
"justMyCode": true, // Having something similar to this?
},
]
}

Teams toolkit VS Code debugger not working

I would like to use teams toolkit to debug my app locally.
Documentation mention here the I only should run F5 than launch chrome debug to roll out all the steps.
In my case doing this only create a Launch.json file and open localhost address in the 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": "edge",
"version": "stable",
"request": "launch",
"name": "Lancer Edge en utilisant localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
But according to documentation it should open teams web app.
Am I missing a step ?
Here's also a video explaining the debug process.
Is your app created by Teams Toolkit?
Only the apps created by Teams Toolkit are supported to debug locally. Follow the video you mentioned to have a try.
We have created the app using Teams Toolkit and the launch.json and task.json are created.
After running the app it goes to Edge browser and teams web app is loaded.
You need to change the url in configuration of launch.json file.
In your code its "http://localhost:8080" so its redirecting to it.
You need to change it to "https://teams.microsoft.com/l/app/${teamsAppId}?installAppPackage=true&webjoin=true&${account-hint}"
Refer the below launch.json code:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Remote (Edge)",
"type": "pwa-msedge",
"request": "launch",
"url": "https://teams.microsoft.com/l/app/${teamsAppId}?installAppPackage=true&webjoin=true&${account-hint}",
"presentation": {
"group": "remote",
"order": 1
}
},
{
"name": "Launch Remote (Chrome)",
"type": "pwa-chrome",
"request": "launch",
"url": "https://teams.microsoft.com/l/app/${teamsAppId}?installAppPackage=true&webjoin=true&${account-hint}",
"presentation": {
"group": "remote",
"order": 2
}
},
{
"name": "Launch Bot (Edge)",
"type": "pwa-msedge",
"request": "launch",
"url": "https://teams.microsoft.com/l/app/${localTeamsAppId}?installAppPackage=true&webjoin=true&${account-hint}",
"cascadeTerminateToConfigurations": [
"Attach to Bot"
],
"presentation": {
"group": "all",
"hidden": true
}
},
{
"name": "Launch Bot (Chrome)",
"type": "pwa-chrome",
"request": "launch",
"url": "https://teams.microsoft.com/l/app/${localTeamsAppId}?installAppPackage=true&webjoin=true&${account-hint}",
"cascadeTerminateToConfigurations": [
"Attach to Bot"
],
"presentation": {
"group": "all",
"hidden": true
}
},
{
"name": "Attach to Bot",
"type": "pwa-node",
"request": "attach",
"port": 9239,
"restart": true,
"presentation": {
"group": "all",
"hidden": true
}
}
],
"compounds": [
{
"name": "Debug (Edge)",
"configurations": [
"Launch Bot (Edge)",
"Attach to Bot"
],
"preLaunchTask": "Pre Debug Check & Start All",
"presentation": {
"group": "all",
"order": 1
},
"stopAll": true
},
{
"name": "Debug (Chrome)",
"configurations": [
"Launch Bot (Chrome)",
"Attach to Bot"
],
"preLaunchTask": "Pre Debug Check & Start All",
"presentation": {
"group": "all",
"order": 2
},
"stopAll": true
}
]
}

VSCode First Extension Hello World Example --inspect Error

About 10 months ago I started writing my own extension for VSCode I set everything up following the page: https://code.visualstudio.com/docs/extensions/example-hello-world
Everything was running/debugging fine. Few days ago I went back to it and after software updates all I get is a Ensure Node was launched with --inspect... ... Error,
I can't even run the Hellow World example. Can anyone help me?
this is the launch.json file it gave me
// A launch configuration that compiles the extension and then opens it inside a new window
{
"version": "0.1.0",
"configurations": [
{
"name": "Extension",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": ["--extensionDevelopmentPath=${workspaceRoot}" ],
"stopOnEntry": false,
"sourceMaps": true,
"outFiles": [ "${workspaceRoot}/out/**/*.js" ],
"preLaunchTask": "npm: watch"
},
{
"name": "Extension Tests",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": ["--extensionDevelopmentPath=${workspaceRoot}", "--extensionTestsPath=${workspaceRoot}/out/test" ],
"stopOnEntry": false,
"sourceMaps": true,
"outFiles": [ "${workspaceRoot}/out/test/**/*.js" ],
"preLaunchTask": "npm: watch"
}
]
}

using grunt in launch.json

I loaded the yeoman generator-meanjs and opened it with Visual Studio Code.
The debugger works nicely. When I clicked on the debug side bar button a
launch.json file was generated for me. The launch.json generator is looking at the package.json which has "scripts": { "start": "grunt"}.
The generator uses grunt to launch the application. The launch.json file had
the following:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "grunt",
"stopOnEntry": false,
"args": [],
"cwd": ".",
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": false,
"outDir": null
},
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858
}
]
}
When I replace 'program' : 'grunt' with server.js it works. If I could change the type to grunt, but it seems only node or mono is supported there.
I managed to make it work by using an absolute path to grunt-cli, as follows:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Grunt",
"args": ["build"],
"program": "${env.APPDATA}\\npm\\node_modules\\grunt-cli\\bin\\grunt",
"stopOnEntry": true,
"cwd": "${workspaceRoot}"
}
]
}
As pointed by #L.Butz, on newer vscode versions, replace env.APPDATA by env:APPDATA.