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.
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.
Hi I've got a problem to run Chrome Debugger directly in VS Code. I'm working on Linux Mint. This is how my launch.json file looks like:
{
// 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",
"name": "Launch Chrome against localhost",
"file": "${workspaceFolder}/index.html"
}
]
}
Now i try to run debugger and error message says: Unable to launch browser: "Unable to find Chrome version stable. Available auto-discovered versions are: ["dev"]. You can set the "runtimeExecutable" in your launch.json to one of these, or provide an absolute path to the browser executable."
Following the sugesstion I've added runtimeExecutable to chrome executable like this:
runtimeExecutable:"/opt/google/chrome/google-chrome" and now error message says:
Unable to Attach to the browser.
Google Chrome is installed on my machine version: 83.0.4103.116-1.
Thanks for help in advance
Error
Current Config
I'm also using Chromium on Linux Mint.
I solved the problem with
debug.javascript.usePreview: false in VS settings,
as explained in This answer
You need to add the webroot property too try this
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "${workspaceFolder}/index.html",
"webRoot": "${workspaceFolder}"
},
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.
[Description]
I'm building an IDE for developing a chrome extension by using visual studio code + debugger for chrome extension. After some trial & error, I ran source java-script successfully by using Attach to chrome, with sourcemaps debug mode. But chrome always crash immediately when I use the debug console ...
How can I fix that?
[Symptoms]
Debugger paused on breakpoint, but chrome always crash immediately when I use the debug console.
chrome crash log
[Environment]
Ubuntu 17.10
Visual Studio Code 1.18.1
Debugger for Chrome 3.5.0
Google Chrome 63.0.3239.84
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": [
{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://10.19.202.100:8080",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}/src"
}
]
}
[Root cause]
Exception: Natives disabled
Chrome stable version can't enable native client
[Solution]
Uninstall Chrome (stable channel)
Install Chrome (dev channel)
Start Chrome from console
google-chrome --remote-debugging-port=9222 --enable-nacl
Run VSCode debug with Attach to chrome, with sourcemap
Enjoy it!!
[Reference]
How to enable Native Client in Google Chrome
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