html - 如何保存 Chrome 开发者工具样式面板的 CSS 更改?

标签 html css google-chrome google-chrome-extension google-chrome-devtools

如何保存 Styles panel 的 CSS 更改的 Google Chrome Developer Tools ?

在工具的网站上提到 we can see all change in resource panel

enter image description here

但我正在本地处理 CSS 文件,但更改未显示在资源面板中

enter image description here

enter image description here

顺便问一下,您知道 Chrome 开发者工具的任何插件、保存 css 更改的工具吗? 我知道 Firebug 有很多 https://stackoverflow.com/search?q=firebug+CSS+changes+save

最佳答案

您可以从 Chrome 开发工具本身保存您的 CSS 更改。 Chrome 现在允许您将本地文件夹添加到您的工作区。在允许 Chrome 访问文件夹并将文件夹添加到本地工作区后,您可以将 Web 资源映射到本地资源。

  • 导航到开发人员工具的“源”面板,右键单击左侧面板(文件在其中列出)并选择将文件夹添加到工作区您可以通过单击“元素”面板中选定元素的每个 CSS 规则右上角的样式表来快速访问“源”面板中的样式表。

enter image description here

  • 添加文件夹后,您必须授予 Chrome 访问该文件夹的权限。 Allow chrome access

  • 接下来,需要将网络资源映射到本地资源。

enter image description here

  • 重新加载页面后,Chrome 现在会加载映射文件的本地资源。为了让事情更简单,Chrome 只显示本地资源(这样您就不会混淆您是在编辑本地资源还是网络资源)。要保存更改,请在编辑文件时按 CTRL + S

附言

您可能必须打开映射的文件并开始编辑才能让 Chrome 应用本地版本(日期 201604.12)。

关于html - 如何保存 Chrome 开发者工具样式面板的 CSS 更改?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6843495/

相关文章:

javascript - 从javascript获取python函数的值

php - 如果返回,在 php 中添加 div 类

javascript - 通过 PHP URL 从 JSON 对象构建 HTML 表

python - 自定义 Django 登录页面不呈现登录表单

javascript - 顶部的滑动菜单隐藏在 Safari 移动栏后面

html - 针对不同尺寸正确显示与 div 内联的图像

css - 当父 div 设置宽度时,为什么省略号不能与 table-cell 一起使用?

css - Chrome 四舍五入媒体查询 em 单位错误吗?

css - IE10悬停伪类没有背景色不起作用

html - Safari css 高度 : auto; and height: 100%; stretches image. 在 firefox 或 chrome 中不会发生