Chrome开发人员工具工作区映射 [英] Chrome developer tools workspace mappings

问题描述

任何人都可以告诉我Chrome开发人员工具工作区映射是如何工作的。
我相信它目前只在加那利可用。

我认为它应该允许我在元素视图中更改CSS规则并让他们自动保存到本地文件中，如Paul Irish在Google IO 2013中所示。我无法使用此功能。

$ b

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

解决方案

它的工作原理只有在此刻金丝雀

编辑：现在Chrome（自30以来）

<1>您需要打开devtools设置面板。它有'工作区'部分。

它会显示文件夹选择对话框。

3）选择一个文件夹后，您将看到一个关于文件夹访问权限的信息栏。 IMG SRC = https://i.stack.imgur.com/BgdXB.png ALT = 访问权限信息栏的屏幕快照>

4）作为结果您将在来源面板文件选择器窗格中看到两个顶级元素。在我的情况下，它是localhost：9080站点和devtools本地文件系统文件夹。此时您需要创建站点文件和本地文件之间的映射。您可以通过文件上下文菜单进行操作。

映射哪个文件，本地或站点文件无关紧要。

5 ）在那一刻devtools会问你重启。

重启devtools后会在文件窗格中显示单个文件夹条目，并且每次在Mac上按下Ctrl + S或Cmd + S时，都会将所做的所有更改应用到本地文件中。

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

解决方案

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开发人员工具工作区映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！