Whenever I run my Flutter app with c:/data/flutter/bin/flutter run -d chrome --web-hostname localhost --web-port 60308 the URL of the app remains constant, at http://localhost:60308/#/.
But the Flutter DevTools debugger and profiler URL of the app keeps changing, and I have to copy and paste it from the command line every single time. How do I make this URL remain constant too please?
Follow (https://docs.flutter.dev/development/tools/vs-code#run-app-in-debug-profile-or-release-mode)
"configurations": [{
"name": "Flutter",
"request": "launch",
"type": "dart",
"flutterMode": "debug"
"args": [
"--web-port",
"60308"
]
}]
Related
In Visual Studio Code running on Windows 10, I am trying to run a plain HTML page in Chrome using a startup script in my workspace definition. When I run the site, chrome opens to the correct URL but I get the error below stating the connection was refused. The chrome browser that opens is not the same chrome browser I use when I just browse the internet on my own. My preferences are not set and there are not any user profiles. Has anyone else experienced this behavior?
{
"folders": [
{
"path": "."
}
],
"settings": {},
"launch": {
"version": "0.2.0",
"configurations": [
{
"name": "mypage",
"request": "launch",
"type": "chrome",
"url": "http://localhost:8080/index.html",
"webRoot": "${workspaceFolder}"
}
]
}
}
I was able to run the files by changing the URL to point to the file directly. It seems even if you leave out the protocol, VS Code defaults it to HTTP. Even though my description had the HTTP URL defined, I also tried removing it. #ScottMildenburger comment got me to reevaluate that logic and find the answer. Thank you Scott!
"launch": {
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against Samples Index",
"url": "file:///${workspaceFolder}/index.html"
}
]
I have an issue with debugging NextJS 12 apps in VSCode. Basically, the breakpoints ain't triggered when reloading in the browser.
Create the default NextJS 12 app using: $ npx create-next-app#latest.
Create the launch.json using https://nextjs.org/docs/advanced-features/debugging:
{
"version": "0.2.0",
"configurations": [
{
"name": "Next.js: debug client-side",
"type": "pwa-chrome",
"request": "launch",
"url": "http://localhost:3000"
}
]
}
Start the app with $ npm run dev
Set a breakpoint at the pages/index.js:10 for example.
Run the debug session and see how the breakpoint is getting hit.
Now if you reload the page, the breakpoing isn't going to be hit. Why?
The only way to get it triggered again is to restart the debugging session OR edit the file with the breakpoint.
Ideas?
Is there a sort of optimization which can be disabled?
Documentation from Next JS can be found here
The example illustrates 3 ways to connect:
Server side
Client side
Full stack
For your case, since it's page/index.js (client-side) I would suggest the second option or the 3rd option.
{
"version": "0.2.0",
"configurations": [
{
"name": "Next.js: debug server-side",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev"
},
{
"name": "Next.js: debug client-side",
"type": "pwa-chrome",
"request": "launch",
"url": "http://localhost:3000"
},
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"console": "integratedTerminal",
"serverReadyAction": {
"pattern": "started server on .+, url: (https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
}
}
]
}
here is the problem: I want to debug and run vue 3 vite on lan, so to do the second I just have to run vite --host but when I press F5 by default it runs vite. How can I change the default command that visual studio code is running so instead of vite it runs vite --host?
My launch.json file:
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4000",
"webRoot": "${workspaceFolder}/app",
}
]
}
EDIT:
I made another question where I explain how I fixed some of the problems In here, still cant get it to debug from external device
How to debug Vue 3 Vite while on lan --host
You can pass arguments with either args or runtimeArgs attributes. Here is more information on this. I think in your case this should work:
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4000",
"webRoot": "${workspaceFolder}/app",
"args": ["host"],
}
]
}
I have top-level folder Homepage with the following structure:
--Homepage
----Client <- Angular app, created with `ng new` command
----Server <- .NET Core WebApi, created with `dotnet new webapi` command
I open VSCode at Homepage level:
I have these extensions installed:
Question
If I want to use single VSCode environment to work on both projects, Client and Server, is it possible to bind F5 (or Ctrl+F5) to start both projects together?
Client app I start using ng serve (it will run on http port 4200)
Server app I start using dotnet run (it will run on https port 5001)
I have just one common .vscode folder on Homepage (root level):
By default, when first created, the content of launch.json was this:
{
// Use IntelliSense to find out which attributes exist for C# debugging
// Use hover for the description of the existing attributes
// For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
"version": "0.2.0",
"configurations": [
{
"name": ".NET Core Launch (web)",
"type": "coreclr",
"request": "launch",
"preLaunchTask": "build",
// If you have changed target frameworks, make sure to update the program path.
"program": "${workspaceFolder}/Server/bin/Debug/netcoreapp2.1/Server.dll",
"args": [],
"cwd": "${workspaceFolder}/Server",
"stopAtEntry": false,
"internalConsoleOptions": "openOnSessionStart",
"launchBrowser": {
"enabled": true,
"args": "${auto-detect-url}",
"windows": {
"command": "cmd.exe",
"args": "/C start ${auto-detect-url}"
},
"osx": {
"command": "open"
},
"linux": {
"command": "xdg-open"
}
},
"env": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"sourceFileMap": {
"/Views": "${workspaceFolder}/Views"
}
},
{
"name": ".NET Core Attach",
"type": "coreclr",
"request": "attach",
"processId": "${command:pickProcess}"
}
,]
}
So, when I press F5 it builds and start the Server app, the page opens at https://localhost:5001, from there I can navigate to https://localhost:5001/api/values and see WebApi works.
But the Client app doesn't start at all.
So, I thought if I add Debugger for Chrome extension's settings to launch.json, it should work, so I clicked on Add Configuration and added corresponding section:
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
},
I changed port from 8080 to 4200, since ng serve hosts on port 4200
But it does not start the Client app.
Please advice. Thanks
I have similar (node.js for API) and spent quite some times couldn't resolved, for example use && or &. Result is either API up or Angular up, never the both.
Anyway I finally realized have both Api and UI in the same folder/project/solution is not practical. An API is not specific to an UI, it's a universal DLL/service, should be siting somewhere by itself. So I separated them into two diff folders and have 2 VSC instances to run them:
start the API in debug mode
in 2nd VSC, run ng serve and let it take time to build
when ng says "Compiled successfully" go to launch.json to start the debug entry associated with Chrome
they work perfectly.
I am on Windows 10. I was having no luck getting an Angular2 app working with VsCode Chrome debugging extension. I stripped the app down to a non-Angular app with just 2 files, but still no progress.
My breakpoints don't get hit and I still get the Error: Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222)"
These are my current two source files:
index.html
<!DOCTYPE html>
<html>
<body>
<h1>External JavaScript</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it now</button>
<p><strong>Note:</strong> myFunction is stored in an external file called "myScript.js".</p>
<script src="myScript.js"></script>
</body>
</html>
MyScript.js
function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; }
My launch.json file contains:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
]
}
I start lite-server in a command window. As soon as I start it, a tab opens inside IE which happened to be already running. Inside the address bar is "http://localhost:3000/" The app runs fine. (What exactly is making this connection to IE? Could this conflict with the Chrome extension?)
I close out the IE tab and then go to Debug in VsCode. I set the configuration to "Launch Chrome against localhost...". I press F5 to start debugging. It opens a Chrome window and browses to "localhost:3000".
The app runs fine but my breakpoints don't get hit and I get an error in VSCode: "Error: Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222)"
It seems to be trying to use the 3rd configuration "Attach to Chrome...". But the dropdown was set to the second "Launch Chrome ...". I also make sure any running copies of Chrome are killed before hit F5.
I should also mention that I can create a node.js app in VsCode and the breakpoints work fine because of the built-in support.
Right click the Chrome shortcut, and select properties In the "target" field, append --remote-debugging-port=9222 or in a command prompt, execute /chrome.exe --remote-debugging-port=9222.
request:launch works
I have this launch.json and a breakpoint works with F5 in VSCode starting a new Chrome instance. I even do not have to close the other Chrome instance:
{
"name": "launch localhost",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000/public/calc.html",
"webRoot": "${workspaceRoot:rest-test}"
},