I'm attempting to debug a React app with React Dev Tools and Firefox Developer Edition. I can't install React Dev Tools to the profile Firefox is using when it is launched via VSCode. I have React Dev Tools installed when I launch Firefox myself via opening it in /Applications.
However, when I run the below launch.json profile, there are no extensions shown under Preferences -> Extensions & Themes -> Extensions in FireFox after it launches.
{
"name": "Launch localhost",
"type": "firefox",
"request": "launch",
"reAttach": true,
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
However, I can follow the directions here and launch Firefox with the terminal and attach my debugger to it. This Profile has React Dev Tools and it works fine running:
/Applications/Firefox\ Developer\ Edition.app/Contents/MacOS/firefox -start-debugger-server
launch.json:
{
"name": "Attach",
"type": "firefox",
"request": "attach",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
But how do I make the first one work with a launch request instead of attach? From reading it seems to have something to do with the profile
I had the same problem and was able to fix it by adding to my launch.json:
"profile": "my-firefox-profile"
Firefox can have miltiple profiles installed. You can check them by typing about:profiles in firefoxes adress bar.
It will show you a list of profiles. The one marked as Default profile: yes should be the one to choose.
My launch.json now looks like this:
{
"name": "Firefox",
"type": "firefox",
"request": "launch",
"reAttach": true,
"url": "http://localhost:4300",
"webRoot": "${workspaceFolder}",
"profile": "default-release-1"
},
Background:
Firefox profiles hold settings like browsing history, bookmarks - and most importantly - add-ons. By telling VSCode to use a specific profile it serves with the installed plugins.
This will also work if you have the same problem with Angular or Vue.
In addition to the accepted answer, I had to also add the following to launch.json to make Firefox launch with the specified profile.
"keepProfileChanges": true
I am using VSCode 1.52.1 and Firefox 84.0.2.
Related
We have a react app deployed in AWS which allows us to store specific device information, and we also have created an ec2 instance which takes that data and allows us to configure the device it was based on. We are trying to create a way to run the playbook within the EC2 using a button on the web app, however currently drawing a blank on how to do so.
We used to use a application named Morpheus but ran into all sorts of issues. We are now trying to keep everything from within AWS.
Any suggestions are helpful.
So I have tried to make use of the SSM Document and it has begun to confuse me. I attempted to make use of the script to try navigate to my folder and then run the playbook. However my method is not working at all.
{
"schemaVersion": "2.2",
"description": "Command Document Example JSON Template",
"parameters": {
"Message": {
"type": "String",
"description": "Example",
"default": "Hello World"
}
},
"mainSteps": [
{
"action": "aws:runPowerShellScript",
"name": "navigate to file",
"inputs": {
"runCommand": [ "cd /echo_configure/Config" ]
}
},
{
"action": "aws:runPowerShellScript",
"name": "execute file",
"inputs": {
"runCommand": [ "ansible-playbook apply.yml" ]
}
}
]
}
Could I get some help to push me in the right direction
I've got a Visual Studio solution with an ASP.NET Core Web API and React app (created using create-react-app). I have no issues getting things going, as long as they're on different ports.
But I'm trying to avoid the API calls from the React app needing the port, as I'd like all API calls to use relative paths (for both debug and production + so things will work when testing locally from other devices). In addition, this would avoid having to set up CORS.
I managed to figure out how to set up both React app & API to run from the solution by setting multiple startup projects in the solution. I even was able to get both the React app and API running on the same port -- but not at the same time.
If I try to run them both from Visual Studio as multiple startup projects, the FE app will start up just fine (and on the right port), and even load up in the browser, and when the API loads afterwards the FE can even make calls to the API.
However, refreshing the browser will show the FE has died (it 404s). And if I shut down the BE without shutting down the FE, it will enable me to load the FE again. So it seems like the BE running is killing the FE on the same port.
Here is the API launchSettings.json:
{
"profiles": {
"http": {
"commandName": "Project",
"launchUrl": "swagger",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"dotnetRunMessages": true,
"applicationUrl": "http://localhost:7032"
}
}
}
Here is the FE launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "localhost (Edge)",
"url": "http://localhost:7032",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "launch",
"name": "localhost (Chrome)",
"url": "http://localhost:7032",
"webRoot": "${workspaceFolder}"
}
]
}
Additionally, on the FE I have a .env file that is simply:
PORT=7032
In my solution's Startup Project properties, I have both API and FE projects set as "Start", with the API first in the order:
My understanding is this should be possible, but it seems like I should have it set up properly, but I'm obviously missing something.
Due to the various server components mixed (JavaScript dev server and Kestrel/IIS Express), you shouldn't expect port sharing to work on your local dev machine. Thus, running React and ASP.NET Core at different ports is what you should follow, and you should run ASP.NET Core on a port other than 7032.
Once you move ASP.NET Core away, revise your React project with the proper proxy options in setupProxy.js, as documented,
https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-react?view=vs-2022#start-the-project
Note that this only works when you debug the React web app locally and when deploying to production environment the proxy must be configured on your web server (nginx/IIS and others) and the actual steps vary a lot.
Coming from a PHP background I am having real trouble debugging server-side code using the following set-up:
Visual Studio Code
Yarn
node.js/express.js
React
Redux
gql/Apollo
I start the local server with yarn start and then "Launch Edge against localhost" with the following 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": "msedge",
"request": "launch",
"name": "Launch Edge against localhost",
"skipFiles": ["<node_internals>/**"],
"url": "http://localhost:3001",
"webRoot": "${workspaceFolder}"
}
]
}
I have made changes to a gqp call but I am unable to get the debugger to trigger inside what I believe to be the server-side code that executes the database query located at src/data/queries/[filename].js OR after the call is made on the client side, nor do I see any error that could shed some light on what has gone wrong.
Could someone please kindly point me in the right direction for debugging in this kind of set-up? At the moment the call seems simply to fail and nothing happens.
Thank you.
I have a React application that I'm writing in VS Code. In order to test and debug my work, I go to the the terminal and enter npm start. This starts the application server and it properly launches chrome under the current logged in user, which has the React Devtools extension installed.
However, I'm also using the Debugger with Chrome extension in VS Code. In order to use those debugger tools, once the application has been started by npm, I need to hit F5 and this launches a new browser window for Chrome. Under this mode, my breakpoints are being hit in VS code, and I can inspect as I need too.
However, the difference is that when I hit F5, VS Code opens a new browser Window that looks like a newly installed instance of Chrome. Since I use Chrome in multiple VMs and architectures, I've setup my Google account so that as I login into my profile on each machine in Chrome, all necessary bookmarks and extensions are loaded into that instance of Chrome.
F5 debugging isn't showing that user profile information, even though a regular launch of Chrome is showing those details, as is the initial launch of the browser when I run npm start. Is there a way to alter my VS Code configurations so that when debugging in VC Code with the Debugger for Chrome extension, I can access my Chrome profile with all my desired extensions and tools?
Also, here's my launch.json file. I think this is used by the debugger.
{
// 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}",
}
]
}
I think these are defaults and I think, maybe, this is what NPM is using rather than whatever is launching the debugger & browser with F5.
Add "userDataDir": false to your launch config, like this:
{
// 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}",
"userDataDir": false
}
]
}
BUT you must first quit all running instances of Chrome, because it's not possible to put a running Chrome user profile into debug mode. This is why the extension creates a new user profile by default.
I am designing to develop a firefox extension which will offer inbuilt feature to stop private browsing. I have tried given below code, but still private browsing remains same.Please can anyone help me to figure this out? Given below my manifest.json code
{
"manifest_version": 2,
"name": "Cat Gifs!",
"version": "1.0",
"incognito":"not_allowed",
"background": {
"scripts": ["background.js"],
"persistent": false
},
}