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开发人员工具中的“覆盖”页面已在最新的Canary中
  • 了解Chromenetworking日志“已停止”状态
  • 当前浏览器窗口closures时,如何防止Chrome开发人员工具closures?
  • 在Google Chrome中检查jsfiddle.net上的JavaScript
  • Chromedebugging器的分析器中的“(程序)”是什么?
  • jQuery的jquery-1.10.2.min.map触发404(Not Found)
  • 为什么Chrome开发工具将date__proto__显示为无效date?
  • 请参阅:Chrome开发人员工具中的hover状态
  • 什么时候window.location改变?
  • 在Chrome中的Javascript执行跟踪 - 如何?