How can I run my flutter app in chrome with args?
I want to run/debug/attach my flutter app in a chrome session with --disable-web-security.
In the end I would expect to have a single launch configuration that does launch my app in a single chrome session (similar to flutter run -d chrome).
In the launch.json, I did play around with attach/launch, compounds, tasks but could not make it work.
{
"version": "0.2.0",
"compounds": [
{
"name": "Launch D1",
"configurations": [
"Launch Chrome",
"app1"
],
}
],
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "chrome",
"webRoot": "${workspaceFolder}/app1",
"runtimeArgs": [
"--disable-web-security",
"--user-data-dir=%APPDATA%\\..\\Local\\tempc"
],
},
{
"name": "app1",
"cwd": "app1",
"request": "launch",
"type": "dart",
"deviceId": "chrome"
}
]
}
If you're having certificate issues running on web, you can disable the warnings using "runtimeArgs": ["--ignore-certificate-errors"]
You can also follow other workarounds mentioned on this GitHub issue thread.
Related
I'm trying to configure my VSCode launch.json for my node app. My node command for starting the app uses the -r flag to preload a module (dotenv/config). How do I configure that in my launch.json? I can't figure it out.
My run command:
node -r dotenv/config server.js
My launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "My Launch",
"skipFiles": ["<node_internals>/**"],
"program": "${workspaceRoot}\\myapp\\src\\server.js",
"env": {
"MY_CONFIG_PATH": ".env"
}
}
]
}
I am also struggling with adding the preLoadedModules in my launch.json, but if you are just wanting to load your environment file you can add "envFile":"${workspaceFolder}/.env" to your launch.json and your app should run.
Example below:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\dist\\index.js",
"preLaunchTask": "tsc: build - tsconfig.json",
"envFile": "${workspaceFolder}/.env",
"outFiles": [
"${workspaceFolder}/dist/**/*.js"
]
}
]
}
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
}
]
}
I created an Electron forge project as described in the forge guide using the "typescript + webpack" template:
> yarn create electron-app debugging-test --template=typescript-webpack
The generated app works fine when running npm start. Then I wanted to configure VSCode debugger for this template so I followed the debugging section of the forge guide and created launch.json file with this content:
{
"type": "node",
"request": "launch",
"name": "Electron Main",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron-forge-vscode-nix",
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron-forge-vscode-win.cmd"
},
// runtimeArgs will be passed directly to your Electron application
"runtimeArgs": [
"foo",
"bar"
],
"cwd": "${workspaceFolder}"
}
This does not really work for me. After clicking F5 the debugger starts but it doesn't break on any breakpoints in the main process nor no window appears. Then I tried the launch.json from Microsoft's vscode-recipes:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Electron: Main",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"runtimeArgs": [
"--remote-debugging-port=9223",
"."
],
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
}
},
{
"name": "Electron: Renderer",
"type": "chrome",
"request": "attach",
"port": 9223,
"webRoot": "${workspaceFolder}",
"timeout": 30000
}
],
"compounds": [
{
"name": "Electron: All",
"configurations": [
"Electron: Main",
"Electron: Renderer"
]
}
]
}
This one, after hitting F5, starts the Electron window fine and even breakpoints in the main process are hit but no content is loaded to the window. The window is white. When breaking on line 21 in index.ts:
mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
I see that the MAIN_WINDOW_WEBPACK_ENTRY variable is not set and that's why there is no content loaded to the window.
What's the correct VSCode setup to debug "typescript + webpack" electron's forge template?
I found this is a bug in Windows that is tracked here on Github. The workaround is to remove the fork-ts-checker-webpack-plugin. E.g., in webpack.plugins.js remove the new ForkTsCheckerWebpackPlugin() from the array for now until it is fixed:
//const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
module.exports = [/*new ForkTsCheckerWebpackPlugin()*/];
After that debugging both, main and renderer, processes work great!
I am using Visual Studio Code on macOS for developing Flutter apps.
I can select a single device in the bottom-left of VSC. I can also run on multiple devices using flutter run -d all. I am wondering how I can run on multiple devices using the debug console in VSC. Or, at the very least, debug one device but show updates on all.
Thank you
If you're on recent versions of Flutter and the Dart/Flutter extensions (Dec 2019 onwards) this is now supported using VS Code's compound launch configurations.
Your .vscode/launch.json should contain an entry for each device, along with its deviceId (this is the ID you would pass to flutter run -d xxx):
{
"version": "0.2.0",
"configurations": [
{
"name": "Current Device",
"request": "launch",
"type": "dart"
},
{
"name": "Android",
"request": "launch",
"type": "dart",
"deviceId": "android"
},
{
"name": "iPhone",
"request": "launch",
"type": "dart",
"deviceId": "iphone"
},
],
"compounds": [
{
"name": "All Devices",
"configurations": ["Android", "iPhone"],
}
]
}
For more information, see https://github.com/flutter/flutter/wiki/Multi-device-debugging-in-VS-Code.
How about this one, it worked for me
flutter run -d all
well you can run only two devices or two virtual machine at the same time
one using command flutter run -d <put the id of the device>
and the other using f5 and choose the other device
In Flutter 1.12 support multi device debugging in VS Code
https://github.com/flutter/flutter/wiki/Multi-device-debugging-in-VS-Code
If you have different flavors, you can configure your launch.json config as follows.
{
"version": "0.2.0",
"configurations": [
// config "Run Dev Android" and "Run Dev Iphone" will be user for multiple debuging,
{
"name": "Run Dev Android",
"request": "launch",
"deviceId": "SM",
"type": "dart",
"program": "lib/app/flavors/main_development.dart",
"flutterMode": "debug",
"args": [
"--flavor", "development",
]
},
{
"name": "Run Dev Iphone",
"flutterMode": "debug",
"deviceId": "Iphone",
"program": "lib/app/flavors/main_development.dart",
"type": "dart",
"args": [
"--flavor", "development",
]
},
{
"name": "Run Dev",
"program": "lib/app/flavors/main_development.dart",
"flutterMode": "debug",
"deviceId": "Android",
"type": "dart",
"args": [
"--flavor", "development",
]
},
{
"name": "Run Stage",
"program": "lib/app/flavors/main_staging.dart",
"flutterMode": "debug",
"type": "dart",
"args": [
"--flavor", "staging"
]
},
{
"name": "Run Prod",
"program": "lib/app/flavors/main_development.dart",
"flutterMode": "release",
"type": "dart",
"args": [
"--flavor", "production"
]
},
],
"compounds": [{
"name": "All Devices",
"configurations": ["Run Dev Android", "Run Dev Iphone"],
}]
}
Now you can select the All Device and hit run.
I develop web project. Server is node.js application written in TypeScript. Client also written in Typescript. I need two ability:
to compile different projects with different compiler options in different folders.
to debug both projects at the same time.
How can I do this?
See our documentation on multitarget debugging: https://code.visualstudio.com/Docs/editor/debugging#_multitarget-debugging
In your launch.json, just create a compounds section that contains the targets you want to debug
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Server",
"program": "${workspaceRoot}/server.js",
"cwd": "${workspaceRoot}"
},
{
"type": "node",
"request": "launch",
"name": "Client",
"program": "${workspaceRoot}/client.js",
"cwd": "${workspaceRoot}"
}
],
"compounds": [
{
"name": "Server/Client",
"configurations": ["Server", "Client"]
}
]
}