I'm using VS Code as my IDE and need multiple debuggers available for the various projects. I have Extendscript as one and would like to have Chrome for other files.
This is my launch.json file:
{
// 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": "1.0.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
{
"type": "extendscript-debug",
"request": "launch",
"name": "Ask for script name",
"program": "${workspaceFolder}/${command:AskForScriptName}",
"stopOnEntry": false
}
]
}
VSC is complaining about it "Matches multiple schemas when only one must validate." having two schema.
Also VSC is providing this: "Configuration 'Launch Chrome against localhost' is missing in 'launch.json'."
I'm able to debug the Extendscript files (jsx) but not the JS or HTML/JS/CSS files.
I am totally lost as used to use ESDK for jsx files and did Chrome in the browser. There seems to be no way to select the debugger I need.
I'm on Win10 very latest 1909 and VSC Version: 1.44.2 (user setup)
Commit: ff915844119ce9485abfe8aa9076ec76b5300ddd
Date: 2020-04-16T16:36:23.138Z
Electron: 7.1.11
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.18363
Thanks,
RONC
Regarding the complaining message, this might be a mismatch. Please restart the VS Code first. The messages should disappear after restart.
For setup of multiple debuggers, you need to add configuration separately to launch.json, like what you have done in your current launch.json, and you can choose the debugger you want to run in the option.
Try the following steps to get the Chrome debugger working:
Go to Extensions View (⇧⌘X) and search for Debugger for Chrome extension and then install.
You have specified http://localhost:8080 in your chrome url of the configuration, so you have to run a web server on that URL. Like step 1, go to Extensions View to search for Live Server extension and then install. Moreover, go to Command Palette (⇧⌘P) with Preferences: Open Settings (JSON), add the below snippet:
{
"liveServer.settings.port": 8080,
}
This will set custom port number of Live Server. In your case, 8080.
Click Go Live at the bottom right of VS Code to start the server. This will open a new Chrome browser. You can close it or leave it there.
Go to Run View (⇧⌘D) and select Launch Chrome option to run the debugger. It will launch a new Chrome browser, and at this point you should be able to start debugging by setting breakpoints.
You can see https://code.visualstudio.com/docs/debugging for more useful information and https://github.com/Microsoft/vscode-chrome-debug#using-the-debugger for Debugger for Chrome in specific.
Related
I have installed javascript debugger for Edge browser in my VSCode
It modifies the launch.json file like this.
"configurations": [
{
"name": "Attach to Edge",
"port": 9222,
"request": "attach",
"type": "pwa-msedge",
"webRoot": "${workspaceFolder}"
}
I have started the edge browser and enabled remote debugging on specified port through this command.
start msedge.exe --remote-debugging-port=9222
I am getting the following error
Which version of JavaScript Debugger and Edge browser are you using? I test with JavaScript Debugger v1.57.0 and Edge browser Version 91.0.864.59, it works well.
Have you launched the page you want to debug in Edge first before you start to debug in VS Code? "request": "attach" means attaching the debug to an existing instance. For example, I need to debug this page https://localhost:44364/test.html, then I'll navigate to this url in Edge after start msedge.exe --remote-debugging-port=9222. The result is like this:
Update:
If you're using Debugger for Microsoft Edge, you can use the launch.json like below, then do what I said in the previous answer:
{
"version": "0.2.0",
"configurations": [
{
"type": "edge",
"request": "attach",
"name": "Attach to Edge",
"port": 9222,
"webRoot": "${workspaceFolder}"
}
]
}
Note: Please install the latest version of Visual Studio. Debugging Microsoft Edge (Chromium) is supported for VS versions >= 15.9.19.
Microsoft Edge extension APIs don't support promises as stated in the official docs.
If it's an option, you could use callbacks in your app instead of promises..
Also see issue on github here and there.
I uninstalled Debugger for microsoft Edge extension and reinstalled it
Then I disabled Javascript debugger extension globally.
I closed all instances of edge browser and ran the following command.
start msedge.exe --remote-debugging-port=9222
Attached debugger and added breakpoint and it started working.
This is becoming really annoying & time-consuming behaviour of VS Code that affect my coding experience very badly.
I usually debug my Expo project by using the Attach to Debugger option in VS Code.
Everything seems good for a while but after some time passes, as soon as I hit the Reload button in my Expo Developer menu (accessing Cmd + D in simulator), my lovely bottom orange bar suddenly goes back to blue and a Chrome page pops up addressing http://localhost:19001/debugger-ui/.
Also in the Output pane, below errors are thrown:
[2020-09-04 21:45:54.816] [renderer3] [error] timeout after 1000 ms: Error: timeout after 1000 ms
at t.RawDebugSession.handleErrorResponse (file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.desktop.main.js:3209:226)
at file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.desktop.main.js:3208:532
at async t.RawDebugSession.shutdown (file:///Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.desktop.main.js:3206:536)
At that point, I have to manually stop the debugger, stop Remote Debugging in Expo Developer menu, start the debugger and start Remote Debugging again over and over.
My launch.json looks like this:
{
"version": "0.2.0",
"configurations": [
{
"name": "Attach to packager",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "attach",
"port": "19001",
"sourceMaps": true,
}
]
}
I came across a similar Github issue relating debugger restart but I do my reload in Expo developer menu, so it doesn't really address my case.
So, how can i get rid of these debugger issues and keep my debugging experience uninterrupted?
I've been trying out a lot of the potential fixes from so, but none of them helped me so far.
I cannot get the debugger to attach properly, it does attach, but it doesn't give me breakpoints (breakpoint set but not yet bound).
What I've done so far :
I created the entry in launch.json
{
"type": "node",
"request": "launch",
"name": "Launch debug client",
"sourceMaps": true,
"runtimeExecutable": "node",
"runtimeArgs": [
"--inspect-brk",
"./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
],
"cwd": "${workspaceFolder}/client/"
}
That resulted in this error.
Is the second --inspect-brk=PORT the one that I should strive to attach to? The second PORT is always random, how would I get the debugger to attach to that? It also seems like webpack-dev-server doesn't care about inspect-brk because the client launches and works ...
I'm also not sure if I got webpack-dev-server to build source maps - are they saved in memory?
I did try to set a fixed port, remap sourceMapPathOverrides, set outFiles and setting the program path to no avail. Prior to writing this I did not even see that it tried to generate it's own new port ...
If anyone stumbles upon this: Webpack-dev-server is already launched in debugger mode, and the only way to currently attach to that process (as far as I could find) is through the browser.
You will need to install a debugger extension for vsc for the browser that you are using (currently only available for chrome and firefox). Then you can just attach / launch to the url that webpack-dev-server is starting on and vscode will hook into that instance.
Example
launch.json
{
"type": "firefox",
"name": "firefox debug",
"request": "launch",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/client"
}
I am using the extension Debugger For Chrome on Visual Studio Code to debug JavaScript client code
As you know, it starts a new Chrome instance, without any extension.
Is there a way to allow Chrome extensions on that instance?
I could not find how to do what I asked. But a workaround that worked for my problem is to attach the debugger to an opened instance of Chrome.
So I can use extensions when debugging on Visual Studio Code.
In the file ./.vscode/.launch.json I edited the object that has "type": "chrome"
From:
{
"type": "chrome",
"request": "launch",
"name": "Meteor: Chrome",
"url": "http://localhost:3000/",
"webRoot": "${workspaceFolder}"
},
To:
{
"type": "chrome",
"request": "attach",
"name": "Meteor: Chrome",
"url": "http://localhost:3000/*",
"webRoot": "${workspaceFolder}",
"port": 9222
},
And add to the Chrome shortcut the remote-debugging-port parameter as you can see in the following image:
Once this is done, you have to open Chrome from your modified shortcut, go to the URL that you want to debug (The same that is on the URL value) and then attach the debugger on Visual Studio Code clicking on Start Debugging.
Note that:
The port of the JSON and the port of the Chrome shortcut must match.
I edited the URL value from "http://localhost:3000/" to "http://localhost:3000/*". The asterisk is because when you open your project, maybe it will redirect you to and URL like "http://localhost:3000/dashboard" or something similar. So when you try to attach the debugger it will no match. The asterisk says to the debugger that the last part of the URL could be anything.
I am using Microsoft.ClearScript.V8 to embed a simple instance of a V8 Engine in a C# console application. I want to remote debug what is happening in the Google Chrome devtools but I fail.
Searching the interwebz, the only solution I can find is to install Eclipse and debug from there. This however is not desired. I want to understand what happens in the background and be able to reproduce the functionality.
I already know that the remote debugger talks through WebSockets but I don't know the implementation details. Can you guys perhaps point me in the right direction here?
My code:
int debugPort = 8888;
var ctx = new V8ScriptEngine(V8ScriptEngineFlags.EnableDebugging, debugPort);
ctx.AllowReflection = true;
/* This is not required but allows me to console log things. */
ctx.AddHostType("Console", typeof(Console));
When I attempt to connect using the V8 inspector (https://chrome.google.com/webstore/detail/nodejs-v8-inspector/lfnddfpljnhbneopljflpombpnkfhggl), I get the following error:
Could not launch debugger
Unexpected token T in JSON at position 0
This makes complete sense because it expects a JSON formatted string as Node implements it that way.
When I open http://127.0.0.1:8888/ in my browser, I receive the following output:
Type: connect
V8-Version: 5.3.332.45
Protocol-Version: 1
Embedding-Host: V8Runtime
Content-Length: 0
How do I remote debug my non-Node application from the Google Devtools?
You need at least ClearScript 5.5. Older versions don't support the V8 Inspector protocol. The latest version (5.5.2) works with chrome://inspect and fixes a few bugs.
Reading https://stackoverflow.com/a/50695896/5288052 seems that local debug of JavaScript code with ClearScript and Visual Studio Code is a complex thing, but is not. Here follows instructions to do it:
setup Visual Studio Code editing the Launch configuration in settings.json as stated in "VII. Debugging with ClearScript and V8"
start the V8 engine with V8ScriptEngineFlags.EnableDebugging + V8ScriptEngineFlags.AwaitDebuggerAndPauseOnStart option
run the C# code from Visual Studio or directly from the compiled executable; the C# code will pause waiting for the Visual Studio Code debug process to attach to it
start debug in Visual Studio Code (menu Debug | Start Debugging)
At this point VSCode connects and stops at the first JavaScript line executed and then stops at all "debugger;" commands. The current script is loaded and debuggable, and all previously executed scripts are visible inside VSCode.
See also Issue 159 and Issue 24.
This is the part of the answer (and not the answer).
Well so far I've have spent 2 days trying the same, and figured out that
ClearScript doesn't use node for debuging javascript code =/=.
have managed to run node.exe and attach debugger:
node process list output is (http://127.0.0.1:9229/json/list):
[ {
"description": "node.js instance",
"faviconUrl": "https://nodejs.org/static/favicon.ico",
"id": "574da142-2ee2-44da-a912-03f96868339c",
"title": "Administrator: IA-32 Visual Studio 2008 mode - node --inspect[6416]",
"type": "node",
"url": "file://"
} ]
But it doesn't look anything like ClearScript.V8 device (http://127.0.0.1:9222/):
Type: connect
V8-Version: 5.5.372.40
Protocol-Version: 1
Embedding-Host: V8Runtime
Content-Length: 0
Similar to yours.
Reading further V8 implements it's own debug protocol, which I didn't manage to find any definitive documents. All of internet has bits and pieces but nothing is complete.
I've managed in Chrome Dev Tools to recognize Remote Device, but beyond that there is no option to Inspect Device, not sure why (maybe due fact we both are using older version of ClearScript 5.4.x).
CDT > Remote Devices: Remote Target #127.0.0.1 / Target (and that's it, no button, no link, nothing can be done with it).
Last hope is to build my own inspector to some extent to see at least js stack traces if nothing (which was originally my goal).
--- Edit: to conclude and finish answer (for op, me, and others):
Found something that works correctly "Microsoft Code". It took little tweaking of configuration example, reading their helps, but made it work.
Loading script sources, break points, console, everything just works (as advertised).
How to:
Download Microsoft Code (I've took zip package - no installation needed)
https://code.visualstudio.com/
Run Microsoft Code, create workspace (launch.json file will be created there)
Edit launch.json (by switching to View->Debug and pressing configuration button - it automatically opens launch.json file).
add last 3 configurations from code provided below. The tweak is "protocol" : "legacy" ie 5.4.x versions uses NodeJS < 8.x version and debug protocol is much different. The CS V8 5.5.x uses "protocol" : "inspector", and "protocol" : "auto" covers them both (guess and the future extensions to debug protocol).
launch.json source code:
{
// 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": "node",
"request": "launch",
"name": "Launch Program (NodeJS)",
"program": "${workspaceRoot}/bin/Debug/",
"cwd": "${workspaceRoot}",
},
{
"type": "node",
"request": "attach",
"name": "Attach by Process ID",
"processId" :"${command:PickProcess}",
"cwd": "${workspaceRoot}",
},
// works with 5.5.x V8 Runtime
{
"type": "node",
"request": "attach",
"name": "Attach to CSV8:9222 (Inspector)",
"protocol": "inspector",
"address": "127.0.0.1",
"port": 9222,
},
// works with 5.4.x V8 Runtime
{
"type": "node",
"request": "attach",
"name": "Attach to CSV8:9222 (Legacy)",
"protocol": "legacy",
"address": "127.0.0.1",
"port": 9222,
},
// works with 5.4.x and 5.5.x V8 Runtime
{
"type": "node",
"request": "attach",
"name": "Attach to CSV8:9222 (Auto)",
"protocol": "auto",
"address": "127.0.0.1",
"port": 9222,
},
]
}
run your ClearScript application (make sure you have debugging enabled, and that debug port matches).
from Microsoft Code Debug toolbar select Attach to CSV8:9222 (Auto) and press run. In this moment MS Code will load all remote JS source code. and you can select source and put break points there. Debuging works just as advertised.
Hope this helps you too