Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome developer tools workspace mappings

Can anyone tell me how the Chrome developer tools workspace mappings work. I believe it is only available in Canary at the moment.

I thought it is supposed to allow me to make changes to the CSS rules in the elements view and have them automatically saved to the local files as demonstrated by Paul Irish at Google IO 2013. I can't get this functionality to work.

https://developers.google.com/events/io/sessions/325206725

like image 242
Mike Avatar asked May 19 '13 05:05

Mike


People also ask

How do I add a workspace in Chrome?

Press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, ChromeOS) to open the Console panel of DevTools. Click the Sources tab. Click the Filesystem tab. Click Add Folder To Workspace.

How do I change my DevTools position?

Change where DevTools is docked by using the Command Menu Or, press Shift + Ctrl + P on Windows/Linux or Command + Shift + P on macOS. Type dock, and then select a dock command: Dock to bottom. Dock to left.


2 Answers

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.

Screenshot of settings page

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.

Screenshot of access rights infobar

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.

Mapping screenshot

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

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

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.

like image 78
loislo Avatar answered Sep 28 '22 04:09

loislo


Just a correction on what loislo has said. "It works only in canary at the moment."

You can trigger all these experimental features in stable chrome releases by typing Chrome://flags in the address bar.

like image 42
Vennsoh Avatar answered Sep 28 '22 03:09

Vennsoh