I am using the Debugger for Chrome VS Code extension. I am working on a React project using yarn start, which opens at localhost:3000.
I have an already running instance of Chrome where I am logged in using my Google account. However when I hit "Launch Chrome against localhost", the tab opens in a new instance of Chrome where I am not logged in.
How do I force the tab to open in my already-running instance of Chrome instead?
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": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
]
}
The following guide was helpful, basically you want to use "request": "attach" not "request": "launch".
https://www.freecodecamp.org/news/how-to-set-up-the-debugger-for-chrome-extension-in-visual-studio-code-c0b3e5937c01/
I've tried several suggestions on other posts to no avail.
I have a 9 month old project that no longer shows in the browser from F5 debugging in vs code.
I set up a brand new simple project with an index.html file to try to get Visual Studio code to launch it in a Chrome browser window.
I keep getting an error page in chrome that says:
This site can’t be reached
localhost refused to connect.
Did you mean http://localhost8000.com/?
Search Google for localhost 8000
ERR_CONNECTION_REFUSED
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": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8000",
"webRoot": "${workspaceFolder}"
}
]
}
index.html:
hello world!!!!!
Any help would be greatly appreciated!
If anyone else is having this issue, I solved it by:
1)installing the ritwickdey/vscode-live-server available here:
vscode-live-server link
2) restarting vscode
3) clicking the Go Live button at the bottom of the screen
4) getting the server address from the resulting Chrome window (ex: http://localhost:5500/)
5) changing the .vscode/launch.json file to include that server address:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:5500",
"webRoot": "${workspaceRoot}"
}
]
}
6) creating(or editing) a settings.json file with the following json:
{
"liveServer.settings.port": 5500,
"liveServer.settings.CustomBrowser" : "chrome",
"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",
"liveServer.settings.NoBrowser" : false,
"liveServer.settings.ignoreFiles" : [
".vscode/**",
"**/*.scss",
"**/*.sass"
]
}
7) switching to vscode's debug pane on the left and pushing the green arrow next to "Launch Chrome against localhost"
Hope this helps someone else out!
For others using VS code to debug Vue it could be as simple as this:
You must have your project running before you start debugging. Contrary to what a user would think, clicking the play button doesn't start your project. It just starts the debugger. The solution for me (using yarn) was running "yarn serve" before starting the debugger. Maybe this is obvious!
If you don't have a web server,You can just change the option "webroot" to "file", and remove the "url" option, like this:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"file": "${workspaceRoot}/index.html"
}
]
}
For someone wants debug react-app like me.
After config as question above.
Pls note: Ensure that your development server is running ("npm start")..
And then F5 to debugg.
It works with my case.
For me I used the code below the installed a chrome extension for javascript and it worked out fine
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"file": "${workspaceRoot}/index.html"
}
]
}
I use laragon for windows to host my websites locally. For myself I just needed to change the URL to the laragon url and it worked fine
For me, the problem was that the debugger configuration had been reset to launch with Chrome. I switched it to .NET Core Launch and then it worked.
I use chrome developer edition, this is the configuration that worked for me:
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "${workspaceFolder}/index.html",
"runtimeExecutable": "YOUR PATH TO THE EXE"
}
]
}
I used the advice of #tuchunxiao, but using the file as url.
Note that this works for experimental JS, but for react, vue, or a production enviroment this is likely not to suit you.
I opened the .htm file with the Live Server and it worked fine.
Right-click on the file (index.htm in my case)
Choose Open With Live
Server
Delete launch.json visible on Explorer tab. Then F5.
I solved my problem just by copying and pasting my browser URL into the URL section in the config file which has the value "local host blah blah"
and it worked.
I use the same live server as you.
I right clicked on my HTML page and clicked on "open with live server option", when the page loaded I copied the URL into the section I mentioned.
Thanks
I believe the error that I introduced was unmindfully creating a launch.json file under .vscode/launch.json, with the below default configurations (w/o making head or tail of it)
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Open index.html",
"file": "c:\\path\\to\\index.html"
}
]
}
Upon removing the file, I could Start Debugging (F5) index.html on my browser
I change the webRoot and url like this and it works
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost/svg/",
"webRoot": "/"
}
For me I just did a simple solution and It worked perefectly.
First, I installed a Live Server by Ritwick Dey.
Select your workspace folder and Go live from the button located at Bottom Right corner.
As you must tried running You must see a .vscode Folder in your workspace or in your rootfolder.
Just **Delete .vscode where you would see a .json file located ** and Restart your Visual Studio Code.
I hope, it works out for you as it did for me.
I did a Chrome extension, successfully published it on Chrome Webstore, a friend installed it yesterday, and today, when launching Chrome, he sees Unsupported extensions disabled:
What are the usual reasons for that? How to fix it?
Note: the extension is just a minimalist:
{
"name": "...",
"version": "1.0",
"description": "...",
"content_scripts": [
{
"css": ["fix.css"],
"matches": ["http://*/*", "https://*/*"],
"run_at": "document_end"
}
],
"manifest_version": 2,
"permissions": ["*://*/*"]
}
and a fix.css that modifies the design of certain elements. Nothing else is in the extension. It is still accepted/published on the Chrome Webstore.
This is because extension is not published in Chrome webstore. Perhaps installing Chromium browser can help. It should allow to use non-webstore extensions.
There is also bit complexated way to use pre-installed extension described here.
As recommended in this page:
Try this removal procedure ... http://malwaretips.com/blogs/remove-discount-buddy-virus/
Try running the new Google Software Removal Tool ..(Windows Only). Do Browser Reset at end.
You may also check this Important: Updates on Chrome Extensions.
I installed this "Debugger for Chrome" extension in VSCode, but I want to use it for developing Chrome extensions that only has a popup view.
I have this launch.josn in my project folder:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch popup.html",
"type": "chrome",
"request": "launch",
"webRoot": "/To/My/Project-Folder"
},
{
"name": "Attach",
"type": "chrome",
"request": "attach",
"port": 9222,
"webRoot": "/To/My/Project-Folder",
"sourceMaps": true,
"smartStep": true
}
]
}
Then I first start the first configuration, and got a new Chrome window. There I can see my extension right to the address bar, so I suppose it locates my extension correctly.
Then I start the second configuration to attach, and I can see call stacks appear for both "Launch popup.html" and "Attach".
However the problem is I set a few breakpoints in background.js and popup.js, and tried to click my extension icon to launch the popup, but none of the breakpoints are hit.
Has anyone successfully used it for developing Chrome extensions?
I found a sort of workaround to debug chrome extension in vscode.
Install Debugger For Chrome and start the debugger with the following configuration.
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "chrome-extension://<your-chrome-extension-id>/popup.html",
"webRoot": "${workspaceFolder}"
}
]
It will create a new chrome instance however it won't open the page. then go to setting and enable developer mode and load your extension again.
Now refresh the chrome-extension://<your-chrome-extension-id>/popup.html the link and Voilà! you are connect to vscode.
Here I am working with chrome my menifest.json file like :
{
"name": "chrome Demo",
"version": "1.0",
"description": "Official addon from chrome",
"browser_action": {
"default_icon": "star-on.png",
"popup": "popupnew.html"
},
"permissions": [
"tabs",
"cookies",
"http://*/*",
"https://*/*",
"contextMenus"
],
"background_page": "background.html"
}
Here it work fine when I click default_icon on browser it will open popup page.
Now my concern is I want to open my popup page using script. "In background I want to write script which able to handle popup page"
thanks in advance..
Sorry, but currently there is no way of opening it programmatically.
You can open popup.html in a new window or tab. While this isn't quite the functionality you are looking for it will have a similar effect. Especially if you format the new window similarly.
Have you tried using chrome.pageAction.show()? I've never had to use this before but I believe it's what you're looking for.