Chrome设备不显示较少的文件 [英] Chrome devtools not showing less files

问题描述

我距离实际可以使用 更少，但是对于一个最后的路障：我无法获得更少的文件显示在Chrome开发工具中。我必须有我的开发工具。

I'm so close to being able to actually start actually using less, but for one final roadblock: I can't get the less files to show up in Chrome Developer Tools. I gotta have my developer tools.

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

I'm using Codekit to compile the less to CSS and to generate the source map, both of which CK seems to be doing. Chrome is even auto-refreshing when I save less changes. But there is only one css file referenced in the inspector, and that is the master, compiled bootstrap.css file.

一次我看到了在检查器中的文件越少，但不再。我不知道他们停止展示或为什么，但我似乎不能让他们回来。我试着在Chrome中打开实验性开发者功能，没有骰子。我确保Codekit在CSS文件夹中生成源映射文件，是的。我甚至打开了地图文件，但立即再次关闭它。基本上一个巨大的，单行的文本，我不能做头或尾。没有帮助。

At one point I saw the less files in the inspector, but no longer. I have no idea when they stopped showing or why, but I can't seem to get them back. I tried turning on Experimental developer features in Chrome, no dice. I made sure Codekit was generating a source map file in the CSS folder, yes. I even opened the map file, but immediately closed it again. Basically a massive, single line of text that I can't make heads or tails of. No help there.

我看到有一种方法来添加less文件夹到Chrome工作区，但从我可以告诉这将要求我更改我的整个文件夹结构，将较少的文件夹移动到网站的根文件夹，这将具有级联的效果，我必须重新映射文​​件源和目的地在Codekit（为初学者），我想避免（特别是如果它不' t工作）。

I saw there was a way of adding the less folder to the Chrome workspace, but from what I can tell this will require me to change my entire folder structure, moving the less folder into the root folder of the site, which will have the cascading effect of me having to remap the file source and destinations in Codekit (for starters), which I'd like to avoid (especially if it doesn't work).

我意识到这里有一些特定的信息，但我不知道还能提供什么。我希望有一个关键的一步，我失踪，但两个小时的谷歌不断得到相同的结果。任何人有任何建议？

I realize there is little in the way of specific info here, but I'm not sure what else I can provide. I'm hoping there is a key step I'm missing, but two hours of googling keep turning up the same results. Anyone have any suggestions?

推荐答案

好吧，看起来像我解决了问题，但仍然不知道是什么导致它开始

Well, looks like I've solved the problem, but still no idea what caused it to begin with.

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

When Codekit generates the source map, it's also supposed to append a line at the bottom of the target CSS file:

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

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

我在文件中发现了这行缺少的行，我相信我错误地在混乱的过程。我复制并粘贴到bootstrap.css（由于某种原因，它不存在）的底部，和bingo，更少的文件在开发工具。现在，如果我只知道我做了什么，使它消失在第一个地方...你知道，所以我不再做。这是hopin'。如果你或你认识的人看到我的方法的错误，我将非常感谢任何关于这个问题的教训。

I found this missing line in a file I believe I'd mistakenly targeted earlier in this confusing process. I copied and pasted it to the bottom of bootstrap.css (where for some reason, it was not present), and bingo, less files in the dev tools. Now if only I knew what I did to make it go away in the first place... you know, so I don't do it again. Here's hopin'. If you or someone you know sees the error of my ways, I'd be very grateful for any edification on the subject.

这篇关于Chrome设备不显示较少的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！