Are there any step by step instructions for beginners to be able to see the output of VSCode code runs in Chrome Developer Tools?
Here is what I have done:
Installed "Debugger for Chrome" 3.1.7 extension with VSCode - extension installed OK, along with Live Server 1.6.7. Launch.json file shows up as below. However, even if I restart Chrome and VSCode, I can't see any logs in Chrome Developer tools.
Thanks!
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceRoot}"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}"
}
]
}
Related
I am having trouble launching a web project in Google Chrome incognito mode. I have tried making changes to the launch.json file but it's not working.
{
// 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": "pwa-chrome",
"request": "launch",
"runtimeArgs": [ "--incognito"],
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
I am trying to build and run a project in both iOS and Web from VS Code. Is there any way to do this?
I have tried running flutter run -d all but that only runs iOS, even though flutter devices lists both of them
Yep, you can create a compound launch config in your .vscode/launch.json. This one creates three configs, one to launch on the current device (shown in the status bar), one to launch on iOS, and one to launch on Android. It then creates a compound config that will launch on iOS and Android devices at the same time. You can change one of the device IDs to chrome to launch on Chrome.
{
"version": "0.2.0",
"configurations": [
{
"name": "Current Device",
"request": "launch",
"type": "dart"
},
{
"name": "Android",
"request": "launch",
"type": "dart",
"deviceId": "android"
},
{
"name": "iPhone",
"request": "launch",
"type": "dart",
"deviceId": "iphone"
},
],
"compounds": [
{
"name": "All Devices",
"configurations": ["Android", "iPhone"],
}
]
}
More info can be found on the Flutter wiki.
I am trying to debug Deno using VSCode on Ubuntu 20.04 LTS running inside WSL-2. I setup my launch.json as described in the Deno manual:
{
"version": "0.2.0",
"configurations": [
{
"name": "Deno",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "deno",
"runtimeArgs": ["run", "--inspect-brk", "-A", "${fileBasename}"],
"outputCapture": "std",
"port": 9229
}
]
}
however when I launch Deno the "--inspect-brk" option is being stripped out from the command used to launch Deno. If I modify my launch.json to change the option to "inspect-brk" (removing the leading --) the option shows up on the command line and I get the error:
Cannot resolve module "file:///mnt/c/Users/mlwp/projects/deno/inspect-brk"
Similarly if I change the name of the option to be "--inspect-brk-fun" then I get the message:
Found argument '--inspect-brk-fun' which wasn't expected, or isn't valid in this context
Anyone know why VSCode would strip the option or how to debug this
The cause of your issue was an incompatibility with --inspect-brk in previous versions of the VSCode JavaScript debugger. It has been fixed some time ago and so have the Deno docs on this matter, where the value of type has changed and port has been replaced with attachSimplePort in launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Deno",
"type": "pwa-node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "deno",
"runtimeArgs": ["run", "--inspect-brk", "-A", "${file}"],
"attachSimplePort": 9229
}
]
}
However, I've found that using your current configuration should also work on newer releases (1.47+) of VSCode (running on Ubuntu 20.04 in WSL 2).
Windows 10 x64 Professional
Visual Studio Code v1.26.1
Debugger for Chrome 4.9.0
I have the simple config (launch.json):
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080/index.html",
"webRoot": "${workspaceFolder}"
}
]
}
The launch.json file is located in the .vscode subdirectory of my project folder. Also my folder contains the index.html file.
I open my project folder in Visual Studio Code and press F5 key, but I get the ERR_CONNECTION_REFUSED error in the new Google Chrome instance. I.e. the browser can't to open my index.html page.
But this variant works fine:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against index.html",
"file": "${workspaceFolder}/index.html"
}
]
}
Why I have the problem with the localhost variant and how can I solve it?
I had the same problem this week. As far as I understand the first launch config (using URL and webroot) needs a local (f.i. node.js) web server up and running.
The second launch config "just" runs the local file(s).
I would like to debug my office-js application (with angular2) within VS-Code.
My launch.json is:
"configurations": [
{
"sourceMaps": true,
"type": "node",
"request": "attach",
"port": 4200,
"name": "Launch Program",
"outFiles": [
"${workspaceRoot}/*.js"
]
}
Currently I'm using Atom Editor with angular cli and "ng serve" command and VS Community Edition 2017 as debugger. It works with "Attach to Process" (iexplore) and I'm able to debug my Word AddIn.
For simplification I tried to move to VS-Code which -for my understanding- supports inline debugging.
In launch.json, "type" could be "node", "chrome", "edge", "firefox" but I didn't found iexplore which I would need in my opinion.
Thank you in advance for sharing your expierences.
There are a number of debuggers in the extension marketplace but I'm not aware of one for Internet Explorer.