Проверить локальное фоновое изображение на Live Site с помощью инструментов Chrome Dev?

Можно ли использовать инструменты Chrome для тестирования различных изображений? Я создал новый фоновый рисунок, и я бы хотел протестировать его на живом сайте, на котором уже есть фоновая графика в теге <body>. Тем не менее, я не хочу менять сайт. Просто проверьте его, чтобы увидеть, как выглядит новое изображение. Возможно ли это?

ОТВЕТЫ

Ответ 1

Вы можете заменить url фонового изображения на панели Elements на URL-адрес изображения, которое вы хотите попробовать. Проверьте эту ссылку, чтобы узнать, как это делается.

Это изменение немедленно покажет эффект в окне браузера. Как упоминалось Johan Linder, вам нужно разместить изображение где-нибудь, если у вас есть изображение на вашем компьютере.

ответ nate wilton правильно указывает, как это сделать, используя расширение Chrome.

Ответ 2

Вот ответ, любезно предоставленный Rob Donovan @superuser (через https://superuser.com/a/839500/454034)

Поскольку вы упомянули "Chrome", вы можете использовать расширения Chrome для этого, чтобы включить локальный доступ к вашим файлам.

Выполните следующие действия:

1) В локальной папке, где находятся ваши изображения, создайте этот файл с именем manifest.json и введите следующее:

{
  "name": "File Exposer",
  "manifest_version": 2,
  "version": "1.0",
  "web_accessible_resources": ["*.jpg","*.JPG"]
}

2) Поместите это адресная строка chrome: chrome://extensions/

3) Убедитесь, что установлен режим "Разработчик" (в правом верхнем углу страницы)

4) Нажмите кнопку "Загрузите нераспакованное расширение"

5) Перейдите в локальную папку, в которой находятся изображения и файл manifest.json, нажмите ok

6) Расширение "File Exposer" теперь должно быть указано в списке и иметь галочку напротив "Enabled". Если папка находится на сетевом диске или другом медленном диске или имеет много файлов, в списке может появиться 10-20 секунд или более.

7) Обратите внимание на строку "ID", которая была связана с вашим расширением. Это EXTENSION_ID

8) Теперь в вашем HTML вы можете получить доступ к файлу со следующим, изменив "EXTENSION_ID" на любой идентификатор, сгенерированный вашим расширением:

<img src='chrome-extension://EXTENSION_ID/example1.jpg'>

Обратите внимание, что *.jpg является рекурсивным и автоматически соответствует файлам в указанной папке и во всех подпапках, вам не нужно указывать для каждой подпапки. Также обратите внимание, что его чувствительность к регистру.

В теге "img" вы не указываете исходную папку, ее родственник из этой папки, поэтому необходимо указывать только вспомогательные папки.

Если вы измените файл manifest.json, вам нужно будет нажать ссылку "Обновить (Ctrl + R)" рядом с расширением.

Ответ 3

Это не точный ответ на ваш вопрос, но один из способов сделать это - использовать что-то вроде общей папки Dropbox. После того, как изображение находится в папке, вы можете просто щелкнуть правой кнопкой мыши и скопировать общедоступный url для использования в инструментах dev.

Ответ 4

Другой вариант - запустить простой HTTP-сервер.

В вашем терминале (или командной строке) cd в каталог, в котором сохранены ваши изображения, а затем введите python -m SimpleHTTPServer.

Теперь вы можете ссылаться на изображения в инструментах dev с помощью http://localhost:8000/filename.jpg.