2014-11-08 3 views
3

Google Chrome Dev инструменты все внезапно остановленные с указанием имен CSS файлов на моем локальном диске - см снимок экрана на ссылке:хром не отображается имя исходного файла CSS для стиля

Link to CSS Dev tools no file names

Однако, когда я goto the WWW работает очень хорошо - там я могу видеть имена файлов CSS?

Может кто-то помочь - я не думаю, что это был я, поскольку я использовал их в течение многих лет, и это сработало отлично.

См Веб снимок экрана:

Web Site link dev tools with file names

Я только заметил это сегодня

Спасибо.

ответ

1

Интересно, является ли это симптомом использования рабочих пространств в инструментах разработчика. Вы устанавливаете рабочие области и сопоставленные сетевые ресурсы локально? Я не использовал их много, но я повесился, чтобы посмотреть, смогу ли я воспроизвести вашу проблему.

Я не видел точно, что вы видите здесь, но имя файла CSS ушло, когда я настраиваю рабочее пространство, оставляя только localhost/.

Без рабочего пространства:

Without workspace: full file name is visible

С рабочей области:

With workspace: file name is not fully visible

+0

Как получить локальный хост в мое рабочее пространство - я поместил весь сетевой путь в мои файлы безрезультатно, и это работало раньше без имен рабочей области - это странно, но я уверен, что он где-то установлен - я просто не знаю, где и как вы можете видеть, что экранный снимок localhost даже не отображается (хотя у меня нет его рабочей области) –

+0

Я думаю, что вы правы, это не решает вашу проблему - это был просто удар в темно. Я думаю, что видел что-то похожее на то, о чем вы говорили, пока я редактировал некоторые из моих CSS сегодня, но я понятия не имею, как его воссоздать последовательно. С тех пор проблема ушла. –

0

Пожалуйста, попробуйте следующее:

  1. Open Devtools
  2. Щелкните по настройкам cog в правом верхнем углу.
  3. Прокрутка к нижней части общей вкладки и нажатие «Восстановить значения по умолчанию и перезагрузить».
+0

Пробовал это - он не работал –

+0

Перезапуск компьютера? –

+0

сделал это тоже :( –

0

ссылка Workspace sourcemaps от его корня

Я просто устранил эту проблему, создавая свои sourcemaps так, что они ссылаются на свои исходные файлы (меньше в моем случае) по сравнению с корня моего рабочего пространства. Если вы не используете рабочую область dev tools, это работает, потому что они могут найти исходные файлы относительно каталога, в котором находится sourcemap. Если не ссылаться на рабочую область, это прерывается, поскольку Chrome указывает на ссылку из корня рабочей области. В эту же проблему попал и исходный код JS.

MyWorkspace (node project root) 
    > bower_components 
    > node_modules 
    > routes 
    > wwwroot (public static root) 
    > app (AngularJS client) 
    > assets 
     > css 
      > app.css 
     > maps 
      > app.css.map 
     > less 
      > bootstrap (less source) 
      > app.less 
    > app.js 
    > package.json 

Так что для меня, sourcemap "источники": массив должен ссылаться на мои меньше исходных файлов, как так:

app.css.карта

{ "version":3, 
    "sources": [ 
     "/wwwroot/assets/less/app.less", 
     "/wwwroot/assets/less/....".... 

В дополнение к этому я должен был узел настройки, так что, когда он работает в режиме разработчика он предоставляет дополнительные маршруты для /Wwwroot/, а также /node_modules/ так, чтобы он мог связать правильно маршрутизирует мое рабочее пространство.

Я использую Глоток-менее sourcemaps построить CSS sourcemaps и мой меньше шаг сборки выглядит как (в случае, если кто-то борется с глотка) -

.pipe(less({ sourceMap: { sourceMapRootpath: '/wwwroot/assets/less' }}))

-1

Если вы измените путь вашего CSS, когда отображается в настоящее время Chrome, он может отображать неверный путь к папке.

Мое решение это:

  1. Открытые DevTools

  2. Перейти к настройкам

  3. Перейти к меню рабочей области

  4. Удалить недопустимые FOLDER

Смежные вопросы