How to Config Workspace in Chrome

How can I config workspace in chrome?

Here are the steps to map a local workspace to a server path, using my example:

1. Click "Add folder" in the Workspace settings, and navigate to your working directory. Click "Allow" in the bar at the top to grant Chrome permissions.

2. Add a mapping between your server and the path

3. Load the URL and navigate to the Sources tab. Open your file and start editing.
   If you save with Cmd+S (Mac) / Ctrl+S (Windows / Linux), the changes will be persisted in the workspace.

   

You can read more information from the official documentation here, which shows how to add it directly from the Sources panel. Read the Limitations section, in case you are trying to do something that isn't supported.

How to setup Google Chrome workspace correctly

I looks like it was a bug - it works fine after the most recent Chrome update.

How to use Chrome Workspaces to save CSS changed locally with Angular2 + webpack?

Yes, you can. Read the Webpack your Chrome DevTools Workspaces article for a detailed walkthrough of configuring your webpack config.

Chrome developer tools workspace mappings

It works only in canary at the moment.

EDIT: Now in Chrome (since ver 30+)

1) you need to open devtools settings panel. It has 'Workspace' section.

2) in this section you need to click on 'Add folder' item. It will show folder selection dialog.

3) After selecting a folder you will see an info bar about access rights for the folder.

4) As a result you will see two top level elements in the Source panel file selector pane. In my case it were localhost:9080 site and devtools local file system folder. At this moment you need to create a mapping between site files and your local files. You can do that via context menu on a file.

It doesn't matter what file to map, local or site file.

5) at that moment devtools will ask you about restart.

After restart devtools will show you the singe folder entry in the files pane and will apply all the changes you do to the local file each time when you press Ctrl + S or Cmd + S on mac.

Chrome dev tool workspace: I can't map my network resource?

Yup, I have gotten the Chrome Workspace all up and running.
Indeed, Prefixfree.js is screwing things up.

My setup:
1) Get a localhost (I am using WAMP to set it up)
2) Run your project through your localhost eg: localhost/project
3) F12, open chrome dev tools on it, the localhost/project
4) Configure Workspaces to map it back to your system drive

Chrome workspaces not working with Source Maps and Javascript

I had the same issue with the standard Chrome but it works on the last Chrome Canary.

https://www.google.com/chrome/browser/canary.html

Working with component css files in workspaces in chrome with angular cli 6 project

@Kayce Basques, the technical writer of Chrome DevTools commented on a question similar to this one, saying:

DevTools technical writer here. The workflow that benshabatnoam posted is the best we've got. Set up a Workspace and then edit your files from the Sources panel. Editing from Elements panel > Styles pane works on basic projects, but has trouble with frameworks (such as Angular) that use sourcemaps and do a lot of build transformations. Sucks, I know, but I recall that we've looked into it in-depth and our hands are tied until sourcemap usage is standardized.

Unfortenatly the answer to your question is NO, we can't (as for today) edit the component CSS files from within Chrome dev tools with workspaces :(

Remove Chrome DevTools Workspace Folder

Oh wait… found the solution.

When you hover over the box there’s an ‘x’ you can click.

Sadly I couldn’t click this ‘x’ because it was being blocked by the path.

By resizing your window you can very exactly position your mouse to just hover over the ‘x’ but not the path. Very buggy.

---

Related Topics