Chrome devtools save changed file path - google-chrome-devtools

I use browsersync and run site on local machine on http://localhost:3000/ — when i change css file (example path: ./static/css/menu.css/from devtools - it saved to root project folder in ./localhost%253a3000/static/css/menu.css
how can i change this path?
Thanks!

You got override locals featured enabled. You need to disabled it, and enable workspaces feature instead. I'm not giving all details because this features are different from chrome version to another. You can use the links to get workspaces working.

Related

Is the a way to share a preconfigured vscode.dev?

The situation is, I want to share my settings of vscode.dev to others. That could include
extensions installed
tabs opened (not files, but some extension related tabs such as panels or previews)
So the person who clicked on the shared link can go to vscode.dev, but with my configurations.
Try to use Settings Sync, its the easiest way: Settings Sync
You could try to create a settings.json too, and share that file with others.
I think the only solutions you have here is to use either GitHub Codespaces (Dev Containers) or store config in repository.
Basically you will not have a link for preconfigured vscode.dev. The idea is to have all required configuration in devcontainer.json file committed it to repository. So whenever the repository is opened VSCode uses the file to configure environment.
Also you can change you settings in Workspace and right click on extensions and click "add to workspace recommendations". That will create .vscode/extensions.json, .vscode/settings.json and commit .vscode folder into repository.
TLDR: commit VSCode configuration files into repository and open repository in vscode.dev
Look into Profiles, which can be enabled in your Settings (currently experimental but will be made generally available in vscode v1.75 due out very soon.
Current setting in Stable: Workbench > Experimental > Settings Profiles: Enabled
There is no setting for Profiles in the Insiders Build, it is just enabled by default. I assume when v1.75 Stable comes out that will also be the case.
See v1.75 Release Notes: Profiles:
We are happy to announce that the Profiles feature is now generally
available in VS Code. A Profile can include extensions, settings,
keyboard shortcuts, UI state, tasks, and user snippets. You can
customize VS Code for different development scenarios like data
science, documentation writing or for multiple programming languages
like Python or Java. If you have different VS Code setups based on
workflow like Work or Demo, you could also save those as different
profiles. You can open multiple workspaces (folders) with different
profiles applied simultaneously.
{image omitted]
You can also export and import profiles to share them with your
colleagues, friends or students to help them get started with VS Code.
The following video demonstrates how to export a profile using a
GitHub gist in order to share it with someone. Users that receive the
profile link can preview the shared profile in VS Code for the Web and
import it to their local VS Code instance.
There is a nice mp4 demonstration in the link, but it appears SO would take that format.
You can export a Profile to a Github Gist so that it can be imported by someone else or to a local file you can share (or yourself to a new maching, etc.) - my demo shows all the settings, UI State and extensions it can include.
More info on Profiles at v1.69 Release Notes: Settings Profiles

Allow VS Code to read download files for Flutter Application

I messed up by denying vs code to read my "download files", however, I believe this is an issue found on mac's permission settings (in which I don't know where to find it). I say this because when I downloaded a firebase file (GoogleService-Info (2).plist) I am able to run it in Xcode but not in Vs Code. How can I allow Vs code to read all download files?
Apple icon - system preferences - privacy
Select Files and Folders.
Select the checkbox below an app to allow it to access files and folders in that location.

Refresh browser on save in a non-local setup

I'm searching for a plugin that can autorefresh a specific page in my browser when I press CTRL+S in Visual Studio Code.
I'm working in a SaaS platform and I have to use WebDav to acces some Smarty template files .
I can live synchronise a local file to the platform when I save the file in VS Code, but I have to manualy refresh the browser each time to see the changes.
There are plugins that can autorefresh on save, but they are used in a local development setup.
As far as I can see, I can't use these plugins, because I can't execute the template files localy. I just change and upload them to the platform and see the result in the live website.
I found a solution with a browserextension:
Chrome: Autoreloader: reload tab on file change
Firefox: FileWatcher

How to open a file in vscode from browser?

I want my webapp to be able to open a given file in VS code. For example, when I click a button on my webapp, a file say, C:\Users\...\myProject\index.html is opened, if myProject is already opened it should navigate to index.html
I know its a peculiar use case but I want to know if its possible in vscode.
Its also completely fine if it requires using browser or vscode extension.
vscode://file/{full path to project}/
Thanks to fbg13 for providing this link
It is possible if you are using Firefox:
Open the about:config page.
Set the view_source.editor.external to true.
Set the view_source.editor.path to the VSCode's executable absolute path.
It is possible if you add this link:
vscode://file/{fullpath}:{numrow}
Example for Symfony 5.3 and higher
For example in Symfony to use the link that appears in the debug bar of the controller used you can do it as described in the examples. You have to edit your project config.
Only for VS Code:
config\packages\framework.yaml
framework:
ide: 'vscode://file/%%f:%%l'
For any editor through env:
config\packages\framework.yaml
framework:
ide: '%env(resolve:CODE_EDITOR)%'
And don't forget to add value for CODE_EDITOR into .env or .env.local.
Local
This is an example for local projects.
.env or .env.local:
CODE_EDITOR=vscode
# or
CODE_EDITOR=vscode://file/%%f:%%l
Docker
If you use Docker or trying to open a file from remote server, you may use this example.
.env or .env.local:
# Template
CODE_EDITOR=vscode://file/%%f:%%l&/PATH/TO/YOUR/SERVER/APP>/PATH/TO/YOUR/LOCAL/APP
# Real paths
CODE_EDITOR=vscode://file/%%f:%%l&/app/>/home/user/projects/symfony_project/
For more details see these pages:
Symfony Framework Configuration Reference - ide
Opening VS Code with URLs
You can install vscode-handler to open files like this
vscode://open?url=file://%file&line=%line

Change .vscode folder location

I'm programming a client side applications using SharePoint Designer 2013.
I want to change to VSCODE since it supports a lot of extensions for some Javascript library like angular, jQuery. And because of the Chrome/Node.js debugger extension.
But when I try to start any Debugger, I got the error:
Unable to create 'launch.json' file inside the '.vscode' folder (Error: UNKNOWN: unknown error, mkdir '\\servername\DavWWWRoot\sitename\Style Library\.vscode').
I get this error because it's impossible to create a folder in SharePoint where the name starts with dot.
So there's a possibility to change the name of this folder or the file location to any directory in my local computer?
No, it's not possible to move/rename that folder. VS code is a tool that bases project management on folder content. So it is essential that the project settings reside in the folder being managed.
You can move the "extensions" folder, but unfortunately not the argv.json (so the ".vscode" will, at least be recreated on vscode launch)
https://github.com/microsoft/vscode/issues/17691#issuecomment-559234574
I hope that'll finally change sometime .
https://github.com/microsoft/vscode/issues/3884
https://github.com/OmniSharp/omnisharp-roslyn/issues/953