Chrome devtools没有显示较少的文件

时间:2014-07-17 20:54:46

标签: css google-chrome less developer-tools source-maps

我已经非常接近能够真正开始使用更少,但最后一个障碍:我无法在Chrome开发者工具中显示更少的文件。我必须拥有开发人员工具。

我使用Codekit来编译较少的CSS并生成源映射,这两个CK似乎都在做。当我保存较少的更改时,Chrome甚至会自动刷新。但是在检查器中只引用了一个css文件,这是主编译的bootstrap.css文件。

有一次,我看到检查器中的文件越少,但不再。我不知道他们何时停止展示或为什么,但我似乎无法让他们回来。我尝试在Chrome中启用实验性开发人员功能,没有骰子。我确保Codekit在CSS文件夹中生成源映射文件,是的。我甚至打开了地图文件,但立即再次关闭它。基本上是一个庞大的,单行的文本,我无法做出正面或反面。没有帮助。

我看到有一种方法可以将较少的文件夹添加到Chrome工作区,但据我所知,这将要求我更改整个文件夹结构,将less文件夹移动到网站的根文件夹中,这将是具有级联效果我必须重新映射Codekit中的文件源和目的地(对于初学者),我想避免(特别是如果它不起作用)。

我意识到这里的具体信息几乎没有,但我不确定我还能提供什么。我希望有一个关键的步骤我不知道,但是两个小时的谷歌搜索不断提高相同的结果。有人有什么建议吗?

1 个答案:

答案 0 :(得分:0)

好吧,看起来我已经解决了这个问题,但仍然不知道是什么导致它开始。

当Codekit生成源映射时,它还应该在目标CSS文件的底部附加一行:

/ *#sourceMappingURL = bootstrap.css.map * /

我在一个文件中发现了这个缺失的行,我相信我在这个令人困惑的过程中错误地将其作为目标。我将其复制并粘贴到bootstrap.css的底部(由于某种原因,它不存在),以及bingo,开发工具中的文件较少。现在,如果我知道我做了什么让它首先消失......你知道,所以我不再这样做了。这是'hopin'。如果您或您认识的人看到了我的方式错误,我将非常感谢您对该主题的任何启发。