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"
}
]
Related
I can launch my chrome profile using cmd: chrome.exe --profile-directory="Profile 6"
With launch.json it launches the correct profile:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4200/account/login?admin_login=true",
"webRoot": "${workspaceFolder}",
"userDataDir": false,
"runtimeArgs": ["--profile-directory=profile 6"],
"urlFilter": "http://localhost:4200/*"
}
]
}
However, even with the ngServe running I get this error as soon as the correct chrome profile opens "Unable to attach to browser"
It works fine with the default configuration, but not in the correct profile:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
}
]
}
Could the fact that the profile is called "Profile 6" be an issue with the space?
You must quit all running instances of Chrome first, It's not possible to put a running Chrome user profile into debug mode. This is why the extension creates a new user profile by default.
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'd like to know if it's possible to have the launch.json file of VSCode using the hostname of my machine. To be more precisely, I'd like to use the hostname in the configurations.url properties, something like this:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch",
"url": "https://<<hostname>>/",
"webRoot": "${workspaceFolder}"
}
]
}
As you can see, the url properties has <<hostname>>; though, I'd like that, when pressing F5, that <<hostname>> is automatically replaced with the machine hostname (e.g. DESKTOP-JUWKA3).
I've tried to look for answer on stackOverflow, as well as VSCode official site:
https://code.visualstudio.com/docs/nodejs/browser-debugging
https://code.visualstudio.com/docs/editor/variables-reference
I thought something was possible with the information in the second link, but unfortunately I haven't been able to do that (maybe I'm not capable of doing it >_>)
I have this xdebug configuration on php8.0 on WSL.
zend_extension=xdebug.so
xdebug.mode=debug
xdebug.client_port=9000
xdebug.discover_client_host=1
xdebug.start_with_request=yes
xdebug.log=/mnt/c/www/traces/xdebug.log
and on 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": [
{
"name": "Listen for Xdebug",
"type": "php",
"request": "launch",
"port": 9000,
"pathMappings": {
"/var/www/html/": "${workspaceFolder}"
}
},
{
"name": "Launch currently open script",
"type": "php",
"request": "launch",
"program": "${file}",
"cwd": "${fileDirname}",
"port": 9000
}
]
}
The extension used
https://github.com/xdebug/vscode-php-debug/actions?query=branch:main
Now, When I set breakpoints on my-root-directory/public/index.php and run and debug on VScode and refresh on Google Chrome it will stop on the breakpoint.
my-root-directory/public/index.php is the entry file when visiting the app on the browser.
But
When I set breakpoints on my-root-directory/app/controller/someController.php and run and debug on VSCode and refresh on Google Chrome.
It will not stop in there.
Have you encountered this, and what is your solution?
I know this question has been asked before, but after reading a lot of the threads, I still haven't found my answer...
I am trying to debug a very simple html app with Chrome, but when I get to my localhost I get an error that says "This site can’t be reached". My launch.json code looks like this:
"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}"
}
]
}
Any help would really be appreciated as I have been struggling for quite a while with this now.
As #Rob-Lourens has mentioned you need to start your own local server to host your HTML/Javascript/CSS and images.
You can use a VS code plugin Live Server to create a local development server for you. Please make sure your URL("url": "http://localhost:3000") in your configuration file matches the URL of Live Server.
If you are on Windows and want to use IIS or IIS Express you can read up on IIS and IISExpress
Just change the value in launch.Json and remove unwanted and paste the html file location in the file attribute.
{
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Open index.html",
"file": "C:\\Users\\xyz\\projects\\PracticeProjects\\jsbasics\\index.html"
}
]
}