I'm trying to develop a Chrome extension within Visual Studio Code and I can't for the life of me figure out how to debug it properly. I can install the extension in Chrome and debug it there with Inspect popup, but I can't find the background.js or any other JavaScript files. I've installed Debugger for Chrome in Visual Studio Code although it doesn't seem to work for Chrome extensions.
Anyone have any ideas?
Instead of having native configuration support like Firefox does, you need to supply arguments to load the extension before running Chrome, specifically the load-extension argument.
Add this line inside your Chrome configuration object with the launch request, located on your .vscode/launch.json file. This assumes that your manifest.json file is directly on the workspace folder. If your manifest.json file is located in another folder, change the ${workspaceFolder} accordingly.
{
"runtimeArgs": ["--load-extension=${workspaceFolder}"]
}
For example, this is how I do it on the launch.json file in my workspace.
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "https://example.com",
"runtimeArgs": ["--load-extension=${workspaceFolder}"]
}
]
}
Related
I don't know where Chrome is launching from or how to change its arguments.
I want to add --remote-debugging-port=9222 to the command line arguments
I tried *, dev, various paths:
{
// 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": "chrome",
"request": "launch",
"runtimeExecutable": "/var/lib/flatpak/app/com.google.Chrome/current/active/files/bin/chrome",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"urlFilter": "http://localhost:3000/*",
"webRoot": "${workspaceFolder}"
}
]
}
I always got an error. Chrome launches ok from the app toolbar. on launch, i tcant find chrome. on attach, it cant find port. I cant figure out or find on google searhc, how to use add argument for 9222. if i could do that i htink i attach would work.
i tried to laucn chrome from terminal but nothing worksd there either. chrome or google-chrome command not found. if i launch actual executable from actual path it wont launch b/c it cant find pieces of itself, even if i launch it from the folder its already in.
so the other similar questions wont give me a solution b/c they are for windows or mac or they suggest launching a command that doesn t wor k for me
I am having trouble finding a solution for running the VS Code integrated Debugger with Browser-Sync. Instead of launching chrome with the VS Code Debugger, my current launch.json looks like this:
launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Attach to Chrome",
"port": 9222,
"request": "attach",
"type": "pwa-chrome",
"url": "http://localhost:3002",
"webRoot": "${workspaceFolder}/dist"
}
]
}
This solution let's me launch browser-sync via my taskrunner ("gulp") in my terminal, however, it does not let me set breakpoints within VS Code:
As soon as I pause the debugger, I will end up somewhere in the depths of the browsersync.js files (see Screenshot here)
Is there a better way of debugging within VS Code whilst using gulp and retaining automatic browser reload?
Ok, after making the comment I decided to give another try and it seems that everything is working finally!
My case is a little bit special because I have a browser-sync setup mapping to several other folders + typescript compilation + rollup + multi-root workspace + an in-house made framework + other things to handle. But in the end, a simple solution was the one that worked for me:
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"pathMapping": {
"/": "${workspaceFolder}/dist",
}
}
]
}
The thing here is the pathMapping property that helps the debugger find the source map files. In my case, these files are mapped (with browser-sync) to the '/' path but they are inside the '/dist' folder inside my project root.
Keep in mind that if you have typescript source files like I do, you absolutelly need to generate source map files setting "sourceMap": true inside your tsconfig.json file.
EDIT Another thing that I forgot to mention is that the browser-sync server must be running in another terminal before you start the debug.
I've been using VS Code on macOS to develop a Vue.js app, with integrated Chrome debugging. This all works fine, but I also have a separate module I’m developing in conjunction, and it’s been symlinked in with npm link. This works great, except VS Code doesn’t let me set breakpoints in my modules’s code (they appear as “unbound” breakpoints).
The solution to this is to specify runtimeArgs in launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"runtimeArgs": ["--preserve-symlinks", "--preserve-symlinks-main"],
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
},
]
}
But this still doesn’t work.The only examples I can find online show type node, not type chrome launch configurations. I’m not sure if Chrome debugging doesn’t support this option, or if there’s something else wrong.
Whenever I press F5 or Ctrl+F5, vscode asks me to "select Environment". I have to choose Node.js every time. Somebody has given this solution:
Run > Add Configuration > select Environment. It works for that particular folder.
However, when I change folders the problem persists. How can I set up configurations globally?
The worst part is that this problem started appearing since 4-5 weeks. Before that vscode was automatically debugging & running my files on node.js
I found a workaround.
Installed this free extension code runner.
https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner
I had to set a custom shortcut key for enabling it to run since Ctrl+Alt+N didn't work for me.
The type key is missing in /.vscode\launch.json (Access it from the top left gear icon or open it in vscode), please see #Andy's answer:
{
"version": "0.2.0",
"configurations": [
{
"type": "node", // to avoid the environment Select
"request": "launch",
"name": "Debug File",
"program": "${file}"
}
]
}
If the type key is not there, Vscode asks you about the type.
There is actually an official solution for this and there is no need to install other extensions, as Visual Studio Code comes with support of Node.Js
The configuration file for running and debugging is in .vscode\launch.json, which can be found in the Run panel.↓
Then you can change the configuration file to the desired effect. If you want to run or debug the current file directly, the configuration is like this
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug File",
"program": "${file}"
}
]
}
it is also possible to run the index.js file in the current working directory.
"program": "${workspaceFolder}/src/index.js"
More information：
https://go.microsoft.com/fwlink/?linkid=830387
Debugging current file in VS Code
If i Run the project, it will launch using Google Chrome normal mode.
But how can i launch it using Google Chrome Incognito Mode ?
It is very simple using visual studio 2015 / 2017 / 2019. You just need to add --incognito as command line switch and name the browser something like Google Chrome - Incognito.
That you can do using Browse With.. option in visual Studio.
Step-1:
Step-2:
Note: You can do the same thing with Firefox and Internet Explorer. Here I'm adding Internet Explorer with the -private option.
For
Google Chrome : "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --incognito
Firefox : "C:\Program Files (x86)\Mozilla Firefox\firefox.exe" -private-window
Internet Explorer/Microsoft Edge : "C:\Program Files\Internet Explorer\iexplore.exe" -private
For Visual Studio 2017
Select button that usually says IIS Express
Click the down arrow
Select Browse With...
Click Add...
Next to Program write the path to Google Chrome, eg. C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
Next to Arguments write --incognito
Next to Friendly name write Google Chrome (Incognito) (or whatever suits your needs)
Click OK
Select your friendly name from before (eg. Google Chrome (Incognito)) and click Set as Default
Now when you click the play button next to IIS Express, Google Chrome starts in Incognito mode.
Not the answer, but in case someone stumbles upon this question, looking for the Visual Studio Code solution, this worked for me:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Chrome: localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceRoot}/app"
},
{
"type": "chrome",
"request": "launch",
"runtimeArgs": [
"--incognito"
],
"name": "Incog Chrome: localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceRoot}/app"
}
]
}
However, this does not currently work using the Firefox debugging extension with the -private-window argument. Hope it helps.