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"],
}
]
}
Related
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.
I'm working on a Create-React-App where I have configured the .launch.json file to have 2 configurations
Launch via NPM - to launch server via npm start
Launch Chrome - to open the client and debug my web-app with breakpoints
Right now I can only choose one option from the drop-down. So i'm manually running npm start in the terminal and then using the debugger to Launch Chrome which enables breakpoints
But I would like to know how to launch these 2 configs simultaneously using the VS Code debugger. Is it possible?
Below is the config that I have in launch.json:
"version": "0.2.0",
"configurations": [
{
// This doesn't stop at breakpoints
"name": "Launch via NPM",
"request": "launch",
"runtimeArgs": ["run-script", "start"],
"runtimeExecutable": "npm",
"skipFiles": ["<node_internals>/**"],
"cwd": "${workspaceFolder}",
"type": "pwa-node"
},
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}
You can use compounds in launch.json file to run 2 configs simultaneously.
so you need to add another array called compounds in launch.json after configurations like below
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch via NPM",
"request": "launch",
"runtimeArgs": ["run-script", "start"],
"runtimeExecutable": "npm",
"skipFiles": ["<node_internals>/**"],
"cwd": "${workspaceFolder}",
"type": "pwa-node"
},
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
],
"compounds": [
{
"name": "Server + Browser",
"configurations": ["Launch via NPM", "Launch Edge"]
}
]
}
The compound - Server + Browser will be visible in the Run and Debug dropdown in VS Code
TIP
You can also set a delay for one of the configs by using tasks.json
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"
}
]
}