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"
}
]
}
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"
}
}
]
}
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 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?