Chrome开发人员工具工作区映射

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

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

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

2 Solutions collect form web for “Chrome开发人员工具工作区映射”

它现在只在金丝雀工作。

编辑:现在在Chrome中(自30以上)

1)你需要打开devtools设置面板。 它有“工作区”部分。

设置页面的屏幕截图

2)在这一部分,你需要点击“添加文件夹”项目。 它会显示文件夹select对话框。

3)select文件夹后,您将看到一个关于文件夹访问权限的信息栏。

访问权限信息栏的屏幕截图

4)因此,您将在“来源”面板文件select器窗格中看到两个顶层元素。 在我的情况下,它是localhost:9080站点和devtools本地文件系统文件夹。 此时您需要创build站点文件和本地文件之间的映射。 你可以通过文件上下文菜单来做到这一点。

屏幕截图

本地或站点文件映射哪个文件并不重要。

5)那个时候devtools会问你重启。 重启截图

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

只是更正了loislo所说的话。 “现在只能在金丝雀里工作。”

您可以通过在地址栏中inputChrome://标记来在稳定的Chrome版本中触发所有这些实验function。

  • 检查Chrome浏览器中的hover元素?
  • 安装devtools软件包的问题
  • 如何重新定位Chrome开发者工具
  • 如何在Chrome开发人员工具中使用XPath或CSSselect器searchDOM元素?
  • 在Chromedebugging器中“小心:显示临时标题”
  • “检查”hover元素?
  • 我如何debuggingNode.js应用程序?
  • 从现有网站select性地复制HTML + CSS + JS的工具
  • Javascript使用Google Chrome逐行debugging
  • Chrome“开发者工具”元素 - 隐藏恼人的黄色尺寸框
  • jQuery的jquery-1.10.2.min.map触发404(Not Found)