google-chrome - Chrome 开发者工具工作区映射

标签 google-chrome google-chrome-devtools

谁能告诉我 Chrome 开发者工具工作区映射是如何工作的。 我相信目前它仅在加那利可用。

我认为它应该允许我在元素 View 中更改 CSS 规则,并将它们自动保存到本地文件中,正如 Paul Irish 在 Google IO 2013 上演示的那样。我无法让此功能发挥作用.

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

最佳答案

目前仅适用于金丝雀。

编辑:现在在 Chrome 中(自版本 30+ 起)

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

Screenshot of settings page

2) 在此部分中,您需要单击“添加文件夹”项。它将显示文件夹选择对话框。

3) 选择文件夹后,您将看到有关该文件夹访问权限的信息栏。

Screenshot of access rights infobar

4) 因此,您将在源面板文件选择器 Pane 中看到两个顶级元素。就我而言,它是 localhost:9080 站点和 devtools 本地文件系统文件夹。此时您需要在站点文件和本地文件之间创建映射。您可以通过文件的上下文菜单来执行此操作。

Mapping screenshot

映射什么文件、本地文件或站点文件并不重要。

5) 此时 devtools 会询问您是否重新启动。 restart screenshot

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

关于google-chrome - Chrome 开发者工具工作区映射,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16631825/

相关文章:

google-chrome - 淡出淡入 Chrome 问题

javascript - document.location.reload(true) 在 chrome 中取消

google-chrome - 是什么原因导致Chrome时间轴框架中有太多空白

html - 谷歌浏览器不会加载两个 CSS 文件

vue.js - 这在 sfc vue 方法中是未定义的

css - Chrome DevTools 将所有 HEX 颜色转换为 RGB

javascript - 如何找到某个函数被调用的地方?

google-chrome - PDF文档文本在IE/Firefox/Chrome浏览器中的显示方式有所不同

html - 自动填充在与自动填充无关的 chrome 输入中弹出

javascript - `setTimeout(func, 0)` 和 `setTimeout(func, 1)` 被认为是一样的吗?