According to the Microsoft Documentation, the Visual Studio Code debugger should be able to debug typescript and javascript.
Problematically, they only provide examples for server side apps using node or python. Intellisense only suggests server languages.
Is it possible to debug client-side typescript or javascript apps with the Visual Studio Code debugger?
launch.json
{
// Use IntelliSense to learn about possible Node.js debug attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type":"node" <-- what if I'm building a JS / TS app?
"request": "launch",
"name": "Launch Program",
"program": "${file}",
"outFiles": [
"${workspaceRoot}/out/**/*.js"
]
}
]
}
You have to install one (or more) of the browser debugger extensions: Chrome, Firefox, iOS Web or Edge.
Then you can use launch configuration like this for Chrome:
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceRoot}"
}
Depending on you build workflow, you may have to do some additional steps to get source maps to work.
Related
I am trying to debug Assembly x86 in Visual Studio Code but all the stepping buttons are disabled
I am using this extension https://marketplace.visualstudio.com/items?itemName=DamianKoper.gdb-debug
I am using Windows 7 and i have installed gdb with Msys
This is 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": [
{
"type": "gdb",
"request": "launch",
"name": "GDB",
"program": "${workspaceFolder}/${command:AskForProgramName}",
"stopOnEntry": true,
"arguments": ""
}
]
}
Have had the same issue with GDB Debug extension in VS Code (WSL2), also tried change configs with no result. Anyhow, this extension and similar extensions (like Native Debug that allowed me to make breakpoints with proper config) are not so useful. There is no register view and memory view that are crucial for asm debugging. I assume VS Code is not good for asm, and for Windows your best bets are QtCreator (includes asm debugger with registers, etc) and MS Visual Studio. Another option is GDB in TUI mode from the terminal (gdb ./exefilename -tui), but GDB with its number of commands has a steep learning curve.
I am experiencing a weird issue with the Debugger on VS Code, I am following this guide: https://github.com/AdaCore/ada_language_server/wiki/getting-started but can't make it work at all. I have installed the Native Debug extension, gdb is installed...etc. I have been working with Ada for some time but just thought about starting to debug my projects. I am first trying to make it work with a simple project hello_world, like explained on the guide.
I can start the debugger, but it won't show anything, not the variables or the call stack, nothing - just which breakpoints I did toggle. The controls that allow you to step through the code are also empty, as you can see here: https://i.stack.imgur.com/eJ7dC.png
The content of my launch.json is:
{
// 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": "Debug",
"type": "gdb",
"request": "launch",
"target": ".objs/hello_world",
"cwd": "${workspaceRoot}",
"valuesFormatting": "parseText",
"preLaunchTask": "ada: Build current project",
}
]
}
The rest are also the same than the guide's. Any help would be greatly appreciated! I am a bit lost and don't know what to do.
Thank you.
Edit: Just in case, I did it everything from scratch again, same result. Can't achieve to make it work, debugger controls and variable/watch windows are always empty.
Any ideas?
Thanks!
Using Debugger For Firefox in VS Code, and running an instance of LiveServer for my HTML/JS application on localhost, breakpoints do not work when opening the site in Firefox or Firefox Developer Edition.
VS code has generated the launch.json for debugging in Firefox for my project, with the relevant part here:
{
"name": "Launch localhost",
"type": "firefox",
"request": "launch",
"reAttach": true,
"url": "http://localhost/index.html",
"webRoot": "${workspaceFolder}"
},
The issue is that when I then run this setup, Firefox cannot find the page, and even if it does, breakpoints do not work. The equivalent of the above for Chrome works, however.
I resolved this issue by changing the settings on LiveServer so that it always works on localhost port 8080, it won't just chose a random port when its active. This can be done by adding the following to LiveServer's settings.json file:
"liveServer.settings.port": 8080,
In the launch.json code included in the above question, the following line is causing the issue:
"url": "http://localhost/index.html",
This should instead be
"url": "http://localhost:8080",
Once this change is made, and all the Firefox configurations suggested under 'Attach' on this page are made and LiveServer is active for your project, the debugger should work for Firefox.
I have a rather simple setup:
- parcel 1.12.4
- vs code 1.43.2
- chrome 80.0.3987.149 on macOS
- chrome debugger extension
- node v13.11.0
- a simple index.html that uses main.js which imports moment.js and a module of mine.
Snippet from launch.json
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:1234",
"webRoot": "${workspaceFolder}"
}
When I serve everything via parcel index.js it compiles and runs fine.
When I set a breakpoint in main.js , it is grayed out and ignored.
When I resort to debugger;, this breakpoint works and I can also set other breakpoints via VS Code or Chrome.
Most of the time, the breakpoint shows up in a tab main.js read only inlined content ... – the extract of the sourcemap/bundle which is a bit weird but understandable.
Sometimes the breakpoint shows up in dist/main.fb6bbcaf.js, essentially forcing me to debug inside the generated bundle.
This is a bit inconsistent and I did not find any pattern what happens when. I plan to use parcel/javascript with a number of students and I anticipate that they will be confused.
What can I do to get a more consistent debugging experience?
Is it possible to put an icon in the Mac dock for a chrome extension I'm working on.
Here's the extension code just for reference. manifest.json:
{
"manifest_version": 2,
"name": "Habitica",
"author": "Sam Dale",
"description": "A launcher to quickly get to Habitica. Especially great for Mac users.",
"version": "1.0",
"icons": {"16": "habitica-logo-16.png", "128": "habitica-logo-128.png", "300": "habitica-logo-300.png"},
"browser_action": {
"default_icon": "habitica-logo-128.png",
"default_title": "Habitica"
},
"background": {
"scripts": ["background.js"],
"persistent": false
}
}
background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({ url: "https://habitica.com/#/tasks" });
});
There is no API to interact with the dock. So, no easy way.
I can think of several complicated ways to do it, but in general I would recommend avoiding that idea.
One can add a shortcut to a non-existing webpage, say, https://launch-my-awesome-extension.horse/, and intercept it with webRequest API.
Note that one can't use a link to a Chrome extension page to sidestep webRequest requirements: such links are likely to be ignored if you try to open them via a shortcut due to elevated privilege of chrome-extension:// pages.
Write a companion native app and use Native Messaging API with all the usual consequences.
Complication: Chrome can only initiate Native Messaging, you cannot launch an app to tell Chrome something; so there must be some resident component already launched when you click the dock icon.
Both are cumbersome and not really a good idea.