I would like to find a way to debug a Flutter Web app from vscode in a new tab in my existing browser instance. By default, vscode also always opens a brand new browser instance regardless of an already open browser instance. My vscode launch configuration looks like this:
{
"name": "Flutter Web Project",
"type": "dart",
"request": "launch",
"program": "lib/main.dart",
"args": [
"-d",
"chrome"
]
}
I have tried attach instead of launch without success.
Related
I followed this tutorial to set up debug in my VSCode.
My launch.json file is below.
{
// 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": [
{
"name": "Python: Remote Attach",
"type": "python",
"request": "attach",
"connect": {
"host": "localhost",
"port": 5678
},
"pathMappings": [
{
"localRoot": "${workspaceFolder}/server/project/views",
"remoteRoot": "/server/project/views"
}
]
}
]
}
My code does break on raised and user uncaught exceptions but it does not break on the breakpoints that I set. The code is reaching the breakpoints and I checked it using print statements, but my breakpoints are not working. VSCode debugger does seem to listen to my docker app (seen in the logs in screenshot) but not sure why it is not breaking at my breakpoints. However, it does give an error saying:
pydev debugger: unable to find translation for:
"/home/vvarma9/DTNetworkRepos/ip2m-metrr/server/project/utils/assessments.py"
in ["/home/vvarma9/DTNetworkRepos/ip2m-metrr/server/project/views/",
"/home/vvarma9/DTNetworkRepos/ip2m-metrr/server/project/views"]
(please revise your path mappings).
Kindly help!
Make sure your local and remote paths are correct. You can check your remote path by logging into the container's terminal. There you can find the absolute path of your "app".
I also cannot tell where you ${workspaceFolder} is actually is. Could be DTNetworkRepos or ip2m-metrr. You will need to make sure you clarify the path.
Also it would help if you posted up your folder stucture, Docker file for the server project and docker compose for all your container projects. Docker file will explain your path on the remote server. Dockerfile & Docker-compose file will ensure us that you have the right cmd or entrypoint for your environment. It may not line up with the tutorial that you set up.
We have a white-labeled app built with electron+angular and we want to build 3 different let's say 'flavours' of the app. Except for the UI changes in Angular we have a different electron-builder file with configurations for each project. The problem is that after I build the first one the next one is twice its size (as a .exe) and when I build the third one it's even bigger. It does not matter which I build first, as this is always the case.
I am building these apps with the electron-builder build command, using the --config option to pass a file with configurations.
This is the electron-builder file that I am using (with PROJECT_NAME, PROJECT_APP_ID, and PROJECT_ID changing depending on the project).
"productName": "<PROJECT_NAME>",
"appId": "<PROJECT_APP_ID>",
"directories": {
"output": "release/<PROJECT_ID>"
},
"files": [
"**/*",
"!**/*.ts",
"!*.code-workspace",
"!LICENSE.md",
"!package.json",
"!package-lock.json",
"!src/",
"!e2e/",
"!hooks/",
"!angular.json",
"!_config.yml",
"!karma.conf.js",
"!tsconfig.json",
"!tslint.json"
],
"win": {
"icon": "dist/assets/icons/<PROJECT_ID>"
},
"mac": {
"icon": "dist/assets/icons/<PROJECT_ID>"
},
"linux": {
"icon": "dist/assets/icons/<PROJECT_ID>"
},
}
Am I missing something for electron-builder? I am thinking maybe it keeps a 'cache' or something in a temporary folder and uses that to build on.
I know the question is a bit over the place, but I don't have experience with electron-builder. Any help or suggestion is welcomed.
Some details:
I tried building it from both a windows machine and mac os.
I am using electron-builder v22.9.1
I have tried using different folders for the result, it still didn't work.
[UPDATE] In the script that i use to build these projects, if i delete the directory of the build and then continue with the others, it will work.
We've recently moved our development from Visual Studio to VS Code. Our code solution contains .NET Core C# which hands calculations off to C++. In Visual Studio, we were able to seamlessly debug between C# and C++.
We initially moved to running the multi-project solution in a VM and using the remote development features of VS Code. We use two Launch configurations:
{
"name": "(gdb) Attach",
"type": "cppdbg",
"request": "attach",
"program": "/usr/share/dotnet/dotnet",
"processId": "${command:pickProcess}",
"additionalSOLibSearchPath": "${workspaceFolder}/src/build/Debug/Cpp/",
"MIMode": "gdb",
"setupCommands": [
{
"description": "Enable pretty-printing for gdb",
"text": "-enable-pretty-printing",
"ignoreFailures": true
}
]
},
{
"name": "Run C#",
"type": "coreclr",
"request": "launch",
// If you have changed target frameworks, make sure to update the program path.
"program": "${workspaceFolder}/src/AppProject/bin/Debug/netcoreapp2.2/AppProject.dll",
"args": [],
"cwd": "${workspaceFolder}/src/AppProject",
"stopAtEntry": false,
// Enable launching a web browser when ASP.NET Core starts. For more information: https://aka.ms/VSCode-CS-LaunchJson-WebBrowser
"env": {
"ASPNETCORE_ENVIRONMENT": "Development",
"EnvironmentName": "Development",
"LD_LIBRARY_PATH": "${workspaceFolder}/src/build/Release/Cpp/;$LD_LIBRARY_PATH"
},
"sourceFileMap": {
"/Views": "${workspaceFolder}/Views"
}
}
}
First running "Run C#" then running "(gdb) Attach" and selecting the dotnet process to attach to. This worked, allowing us to step down from C# into C++.
We've now moved to a Docker set up, where the source is mounted into a container with the build tools built in (as described in the VS Code docs). This is roughly our devcontainer.json:
{
"image": [custom image in a private code repository],
"forwardPorts": [various ports to serve web interfaces],
"runArgs": [
"--cap-add=SYS_PTRACE",
"--security-opt",
"seccomp=unconfined"
],
"extensions": [
"ms-vscode.cpptools",
"ms-vscode.cmake-tools",
"hbenl.vscode-test-explorer",
"derivitec-ltd.cmake-test-adapter",
"ms-dotnettools.csharp",
"fernandoescolar.vscode-solution-explorer",
"derivitec-ltd.vscode-dotnet-adapter"
],
"mounts": [
"source=${localEnv:HOME}/.gitconfig,target=/root/.gitconfig,type=bind,consistency=cached",
"source=${localEnv:HOME}/.ssh,target=/root/.ssh,type=bind,consistency=cached"
]
}
In this set up, we've been able to successfully debug C# and C++ code separately, but the above flow of running the C# project and attaching GDB after it does not work as expected. The C# process exits, while the "(gdb) Attach" call starts multiple processes which run into various exceptions at launch. I've pasted the full output to Pastebin.
Much of the advice I've found is confused due to:
legacy methods such as calling docker directly (omnisharp/omnisharp-vscode issue on debugging in docker)
alternative setups where source code is packaged into a docker container rather than mounted (VS Code docs for debugging .NET Core in docker)
alternative setups where build tools live in a docker container but VS Code communicates with the docker container via SSH rather than using the dev container approach recommended in the docs (Microsoft blog post on developing C++ with VS Code and docker)
C++ seemingly having special requirements for debugging, especially where docker is concerned
The runArgs description in the devcontainer.json reference:
For example, "runArgs": [ "--cap-add=SYS_PTRACE", "--security-opt", "seccomp=unconfined" ] allows ptrace based debuggers like C++ to work in the container.
VS Code docs suggesting that debugging should work exactly as it does natively when using remote development tools ("Debugging in a container" from VS Code docs)
How should I debug both C# and C++ running within a docker container using VS Code?
I'm currently creating a boiler plate for react with typescript, one of the things I'd like to do is debug from within vs code however I'm having issues configuring webpack to debug since it's running inside a docker container. Ideally I'd like to debug from my local Chrome but as I'm inside a remote container I can't get the VS code debugger to open Chrome
My launch.json configuration so far:
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost, with sourcemaps",
"url": "http://localhost",
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"trace": true,
"sourceMapPathOverrides": {
"webpack:///./*": "${webRoot}/*"
}
}
When I attempt to run it though it says "Error processing "launch": Can't find Chrome - install it or set the "runtimeExecutable" field in the launch config.
I'm new to Dart/Visual studio code and have hit a wall setting up one of the predefined stagehand apps "web-angular".
I've installed the dart language support extension and created a new folder called c:\webdev\Angular_dart . From within the terminal in VSCode i ran "stagehand web-angular", then "pub get" then "pub global run webdev serve web:8888"
I'm able to see the default web page (a todo list) but when I hit F5 from within VSCode it gives me an error saying it can't see any of the files in my lib folder.
The first one it hits is..
web/main.dart:2:8: Error: Error when reading 'lib/app_component.template.dart': The system cannot find the file specified.
import 'package:Angular_Dart/app_component.template.dart' as ng;
it looks like my .packages file is setup correctly as my last line reads
Angular_Dart:lib/
And my launch.json configuration is
"name": "Dart",
"program": "web/main.dart",
"request": "launch",
"type": "dart"
Has anyone seen this?
Thanks in advance.
Right now it's simple. Use following configuration:
{
"name": "Dart",
"program": "web/index.html",
"request": "launch",
"type": "dart"
}
VS Code: 1.50.1
Dart SDK: 2.11.0-213.1.beta
Make sure "program" points to the index HTML file.
Edit: This answer is out of date, see theanurin's answer above or the Dart-Code v3.7 release notes.
The Dart VS Code extension doesn't currently have first-class support for web apps so unfortunately it's not as simple as just hitting F5 like for Flutter or CLI projects.
There are some relevant discussions here:
https://github.com/Dart-Code/Dart-Code/issues/386
https://github.com/dart-lang/build/issues/1025
The Flutter Devtools app is somewhat set up for this, and has VS Code tasks and launch configs to launch with webdev serve:
https://github.com/flutter/devtools/tree/master/packages/devtools/.vscode
The build config uses the Chrome Debugger for launching the browser, but has a preLaunchTask that runs webdev serve. It works, but the debugging isn't perfect, it's using source maps via the Chrome Debugger extension.