How do I get new HTML files to execute in VS Code? - visual-studio-code

I have recently started learning WebDev using Colt Steele Udemy course. I've created few HTML files and whenever I try to execute any of them only the first created .html file opens in Chrome. How do I get the other files to open in the browser. Eg: If I create 3 files i.e a.html, b.html & c.html only a.html opens in Chrome even if b/c is open in the editor. This happens with both debugging or run without debugging. My VS Code version is 1.65.2. Please advice.
The launch.json code is:
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Open a.html",
"file": "e:\\\\Colt Steele\\HTML the essentials\\a.html"
}

The launch configuration you're showing is telling VSCode what to do when running the project. You can change the launch configuration to open a different file by default:
{
"type": "pwa-chrome",
"request": "launch",
"name": "Open b.html",
"file": "e:\\\\Colt Steele\\HTML the essentials\\b.html"
}
Or perhaps add multiple launch configurations, which you can select when debugging/running:
{
"type": "pwa-chrome",
"request": "launch",
"name": "Open a.html",
"file": "e:\\\\Colt Steele\\HTML the essentials\\a.html"
},
{
"type": "pwa-chrome",
"request": "launch",
"name": "Open b.html",
"file": "e:\\\\Colt Steele\\HTML the essentials\\b.html"
}
In general any given "application" would have a single default page as the entry point, and from there you can navigate through the application to use the other pages. So you might have a single index.html as the launch file, and in whatever you're building there would be links to other files as needed for the application.
But if what you're building for whatever reason truly has different "entry points" then you can just set up your build configurations based on that and select which configuration to use when running the application.
Alternatively (and I haven't tested this), you should be able to tell it to launch "the current file" by using a variable called file in the launch config:
{
"type": "pwa-chrome",
"request": "launch",
"name": "Open Current File",
"program": "${file}"
}

Related

How to continue debug VSCode extension when extension open new windows?

I press F5 to debug a VSCode extension and VSCode will open a new window that will contain the extension. The extension will open a new VSCode window to open a specific project. But this new VSCode window didn't contain the extension and I can't debug it anymore. What can I do? šŸ˜©
Not sure if you are looking for a specific extension. If you have already installed the debugger extension, Try to uninstall/reinstall.
Your automatically generated extension launch configuration should look like this:
{
"version": "0.2.0",
"configurations": [
{
"name": "Run Extension",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": [
"${workspaceFolder}/../OneDrive/Test Bed", // add the path here
"--extensionDevelopmentPath=${workspaceFolder}"
]
},
{
"name": "Extension Tests",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}",
"--extensionTestsPath=${workspaceFolder}/test/suite/index"
]
}
]
}
You see in the Run Extension configuration that I added a path from the extension's ${workspaceFolder} up one level and then into my OneDrive folder to another folder named Test Bed. That Test Bed folder will be opened in the first ExtensionHost window that is opened when you F5 and you can debug the extension using that folder immediately.

How to launch swagger url through vscode?

I am trying to launch swagger UI in browser using dotnet run command. Here is what I have tried in launch.json file. Expected outcome is that it should launch browser at the specified url and open swagger UI automatically. FYI I am using dotnet5 and created new web api project that already has swagger baked in. It doesn't launch the browser.
If you are using dotnet run command then its a known limitation that it doesn't launch a browser.
Please refer to this link for confirmation
While it doesn't launch it, it will still have your project running just means you manually have to type it in browser or use one of the workarounds listed in that issue.
Use compounds launch settings
"configurations": [
{
"name": ".NET Core Launch (console)",
"type": "coreclr",
"request": "launch",
"preLaunchTask": "build",
"program": "${workspaceFolder}/src/WebApi/bin/Debug/net7.0/YourWebDll.dll",
"args": [],
"cwd": "${workspaceFolder}",
"stopAtEntry": false,
"console": "internalConsole"
},
{
"name": "Launch Chrome",
"request": "launch",
"type": "chrome",
"url": "https://localhost:5001/swagger/index.html",
"webRoot": "${workspaceFolder}"
}
],
"compounds": [
{
"name": ".Net Core & Chrome",
"configurations": [".NET Core Launch (console)","Launch Chrome"]
}
]
This will run your app and launch chrome at the URL you want.

Run and Debug problems in Visual Studio Code using haxe

I'm currently coding in Haxe with Heaps using Visual Studio Code. The latter has recently updated to version 1.56 which is now giving my a strange problem I can't manage to fix. Before the update, I was able to click Run and Debug using Hashlink in order to open the window of my game. After the update, when I Run and Debug it no longer opens the window, despite the compile.hxml and launch.json being exactly the same as before:
compile.hxml:
-cp src
-lib heaps
-lib hlsdl
-hl main.hl
-main Main
.json
"version": "0.2.0",
"configurations": [
{
"name": "HashLink (launch)",
"request": "launch",
"type": "hl",
"cwd": "${workspaceFolder}",
"preLaunchTask": {
"type": "haxe",
"args": "active configuration"
}
},
{
"name": "HashLink (attach)",
"request": "attach",
"port": 6112,
"type": "hl",
"cwd": "${workspaceFolder}",
"preLaunchTask": {
"type": "haxe",
"args": "active configuration"
}
}
]
Is anyone experiencing a similar problem?
Update: hashlink-debugger 1.1.2 was released, which should fix the problem.
It's a known issue:
HL debugger no longer works in latest vscode #97
You can downgrade to the previous VSCode release or subscribe to the issue and wait for the hashlink-debugger update.

How to disable "just my code" setting in VSCode debugger?

When starting my project in the debugger (C# .NET Core), it states it's debugging "just my code".
I want to also debug the libraries, and can't see a setting to disable this anywhere in VSCode.
Is it possible to disable?
Just adding "justMyCode": false to launch.json doesn't work. You need to add a separate config in launch.json like below. FYI each {} represents a config.
"configurations": [
{
.... # existing config
},
{
"name": "Debug Unit Test",
"type": "python",
"request": "test",
"justMyCode": false,
}
]
As pointed out in here
For this you need to change the launch.json file. Inside the launch.json file you have to set "justMyCode" to false.
As described here. (I was pointed to that link through this post on the Visual Studio Code site.)
VSCode 1.60 was complaining about the "request": "test" method suggested by others.
But I did have to add a new section below my existing configuration to get "justMyCode": false to work.
Here is what worked for me:
{
// 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": "Python: Current File",
"type": "python",
"request": "launch",
"program": "${file}",
"console": "integratedTerminal",
"args": [
"blah",
"whatever"
]
},
{
"name": "Python: Debug Unit Tests",
"type": "python",
"request": "launch",
"purpose": ["debug-test"],
"console": "integratedTerminal",
"justMyCode": false,
}
]
}
The purpose addition appears to be important.
I found the correct approach documented here: https://code.visualstudio.com/docs/python/testing#_debug-tests
If you're specifically debugging Python unit tests, adding "justMyCode": "false" to your normal config won't do, you'll need to add another in your launch.json with "request": "test":
{
"name": "Debug Unit Test",
"type": "python",
"request": "test",
"justMyCode": false,
},
Source: Github Microsoft/vscode-python Issue #7131
I added the "justMyCode": false" setting to launch.json and it still didn't stop at breakpoints in external library code. What was even more confusing: It did work for once and then suddenly it didn't anymore.
Then I found out: If you are in the "Run and Debug (SHIFT+CMD+D)"-tab and select your configuration there and click the green triangle / "Start Debugging (F5)" it works! However, if I click "Debug Python File" in the upper right corner it does not stop in external library code!
As of 2022, VS Code no longer seems to have an ā€œOpen launch.jsonā€ shortcut in its command palette, but it still prompts you to edit launch.json to set "justMyCode" to false. The solution that worked for me was:
create a directory called .vscode in the root of the repository
create a file called launch.json in the .vscode directory
put this text in the file:
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Unit Test",
"type": "python",
"request": "test",
"justMyCode": false,
}
]
}
There will be an error message under the word "test" saying that "test" is not a valid value, and that "attach" would be valid. However, it doesn't work for me if I change "test" to "attach". If the "version" field isn't there, it doesn't work and VS Code raises an error saying launch.json is missing a field.
In the documenentation of Visual Studio Code they have a section "Skipping uninteresting code".
VS Code Node.js debugging has a feature to avoid source code that you don't want to step through (AKA 'Just My Code').
This feature can be enabled with the skipFiles attribute in your launch configuration. skipFiles is an array of glob patterns for script paths to skip.
In your launch.json file you have to add (or any other file you want to skip):
"skipFiles": [
"${workspaceFolder}/node_modules/**/*.js",
"${workspaceFolder}/lib/**/*.js"
]
If you are using vscode on mac, press shift+command+p, search for Open'launch.json', open an editor you want, and add the following JSON object to the file :
{
"name": "Python: Debug Unit Tests",
"type": "python",
"request": "launch",
"purpose": ["debug-test"],
"console": "integratedTerminal",
"justMyCode": false,
}
Reopen your vscode and now you can put breakpoints on lines that are imported or you have not written.
I added in the configurations part as below:
"configurations": [
{
"name": "Python: Curent File",
"type": "python",
"request": "launch",
"program": "${file}",
"console": "integratedTerminal",
"justMyCode": false,
}
],
It took me a while to understand where the file needs to be and what exactly needs to be inside it. So here's what I've got for others to enjoy:
The launch.json file is not in the root of your project, it needs to be in .vscode/launch.json instead. And for new VSCode versions, once you open that file from that location, you can get warnings on issues in the file, and also automatically add sections to it.
For me, at the end the contents of the file is this:
{
"configurations": [
{
"name": "Python: Current File",
"type": "python",
"request": "launch",
"program": "${file}",
"console": "integratedTerminal",
"justMyCode": false
},
]
}
This allows me to enter (F11) other libs when I run a custom code in debug mode for Python.
None of the fiddling with launch.json worked for me.
I had to tick the "Allow setting breakpoints in any files" box in the Settings:
Recently, even I faced this issue where the VS code was not taking the latest launch.json (one with 'justMycode: false'). So, I had to perform the following steps.
Instead of running a debugger from the Top right group menu of the editor, I ran it from below status bar as shown in the below picture
Click here to see the screenshot of the status bar
Once clicked on this option a pop-up appears asking which launch.json you want to run your debugging with, as shown below.
Click here to see the screenshot of the pop-up menu
You can click on launch.json here to edit the configuration file and now the debugger opens with the selected launch.json and 'justtMycode:false' setting will be applied.
I merged the previous answers and the below setting works for me (vscode 1.75.0).
"launch": {
"configurations": [
{
"name": "Debug Unit Test",
"type": "python",
"request": "launch",
"purpose": "debug-test",
"justMyCode": false,
"program": "${file}",
}
],
},

Can not change debug environment automatically on visual studio code with config

For example, my root workstation directory is /home/chain/Project. And I have two separate projects which is python and website. My launch.json goes:
{
"version": "0.2.0",
"configurations":
[
{
"name": "Python",
"type": "python",
"request": "launch",
"stopOnEntry": true,
"pythonPath": "${config:python.pythonPath}",
"program": "${workspaceRoot}/python_project_source/test.py",
"cwd": "${workspaceRoot}/python_project_source",
"env": {},
"envFile": "${workspaceRoot}/.env",
"debugOptions": [
"WaitOnAbnormalExit",
"WaitOnNormalExit",
"RedirectOutput"
]
},
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "${workspaceRoot}/website/test.html",
"webRoot": "${workspaceRoot}/website"
}
]
}
As expected when I select test.py and press 'F5' it can switch to python debug environment, and when I select test.html the Chrome will be opened.
The fact is, VS code only remember the environment I debugged last time rather than change it automatically. So the only thing I do now is adding some comments to one environment (/* */) when I need to compile the other.:(
Is there something wrong in my launch.json?
Automatically switching the debug environment based on the file (or file-type) is not a current feature of Visual Studio Code, I believe.
You'll have to manually switch the launch configuration depending on the type of debugging task you want to perform.
And, of course, you could consider writing a feature request: https://github.com/Microsoft/vscode