Chrome devtools 没有显示更少的文件

Posted 2023-05-07

【中文标题】Chrome devtools 没有显示更少的文件

【英文标题】：Chrome devtools not showing less files

【发布时间】：2014-07-17 20:54:46

【问题描述】：

我非常接近能够真正开始使用 less，但最后一个障碍是：我无法让 less 文件显示在 Chrome 开发者工具中。我得有我的开发者工具。

我正在使用 Codekit 将 less 编译为 CSS 并生成源映射，CK 似乎正在这样做。当我保存较少的更改时，Chrome 甚至会自动刷新。但是inspector中只引用了一个css文件，那就是master，编译后的bootstrap.css文件。

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

我看到有一种方法可以将 less 文件夹添加到 Chrome 工作区，但据我所知，这需要我更改整个文件夹结构，将 less 文件夹移动到站点的根文件夹中，这将有我不得不重新映射 Codekit 中的文件源和目标（对于初学者）的级联效应，我想避免这种情况（特别是如果它不起作用）。

我意识到这里的具体信息很少，但我不确定我还能提供什么。我希望我错过了一个关键步骤，但是两个小时的谷歌搜索不断出现相同的结果。有人有什么建议吗？

【问题讨论】：

我从未听说过在开发工具中看到更少的文件。我通常只是不缩小 CSS，而不得不推断问题出在哪里（这很困难）。我不认为 Chrome 自己可以解释更少，除非我弄错了，它现在有这种能力？

也许这是相关的并且可以帮助：***.com/questions/15664064/…

【参考方案1】：

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

Codekit 生成源映射时，还应该在目标 CSS 文件的底部附加一行：

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

我在一个文件中发现了这个缺失的行，我相信我在这个令人困惑的过程中早些时候错误地定位了目标。我将它复制并粘贴到 bootstrap.css 的底部（由于某种原因，它不存在）和宾果游戏，开发工具中的文件较少。现在，如果我知道我做了什么让它一开始就消失了……你知道，所以我不再这样做了。这是希望。如果您或您认识的人看到我的方式错误，我将非常感谢您对此主题的任何启发。

【讨论】：

Drat，情节变厚了。准备开始使用 less，我对导入的 less 文件进行了更改，该文件重新生成了 bootstrap.css，令人惊讶的是，没有必要的附加行。所以出于某种原因，Codekit 没有加入其中。