У меня тоже была эта проблема навсегда, и в конце концов я решил, что мы не должны редактировать что-то в веб-инспекторе, и создал что-то для нее ( https://github.com/viatropos/design.io ).
Лучшее решение:
Браузер автоматически отражает изменения CSS без перезагрузки при нажатии кнопки «Сохранить» в текстовом редакторе .
Основная причина, по которой мы редактируем css в веб-инспекторе (я использую webkit, но FireBug работает по тем же принципам), заключается в том, что нам нужно вносить небольшие корректировки, а перезагрузка страницы занимает слишком много времени.
Есть 2 основных проблемы с этим подходом. Во-первых, вы можете редактировать отдельный элемент, который может не иметь idселектора. Таким образом, даже если бы вы могли скопировать / вставить сгенерированный CSS из веб-инспектора, он должен был бы сгенерировать idобласть действия CSS. Что-то вроде:
#element-127 {
background: red;
}
Это сделало бы ваш CSS беспорядком.
Вы можете обойти это, только изменив стили для существующего селектора ( .spaceселектор классов на изображении инспектора webkit ниже).
Тем не менее, вторая проблема. Интерфейс этой штуки довольно грубый, трудно вносить большие изменения - например, если вы хотите по-настоящему быстро скопировать этот блок CSS в это место или что-то еще.
Я бы предпочел просто придерживаться TextMate.
Идеально было бы просто написать CSS в вашем текстовом редакторе и сделать так, чтобы браузер отражал изменения без перезагрузки страницы. . Таким образом, вы будете писать свой окончательный CSS, когда будете вносить небольшие изменения.
Следующим уровнем будет писать на динамическом языке CSS, таком как Stylus, Less, SCSS и т. Д., И обновлять браузер созданным CSS. Таким образом, вы можете начать создавать такие миксины box-shadow(), которые абстрагируют от сложностей, которые веб-инспектор определенно не может сделать.
Есть несколько вещей, которые делают это, но, на мой взгляд, ничего не оптимизирует.
Отсутствие возможности легко настроить способ работы - основная причина, по которой я их не использовал.
Я собрал https://github.com/viatropos/design.io специально для решения этой проблемы и сделал так:
- Браузер отображает css / js / html / etc в любое время, когда вы сохраняете, без перезагрузки страницы
- Он может обрабатывать любые шаблоны / языки / рамки (Stylus, Less, CoffeeScript, Jade, Haml и т. Д.)
- Он написан на JavaScript, и вы можете быстро собрать вместе расширения в JavaScript.
Таким образом, когда вам нужно внести эти небольшие изменения в CSS, вы можете сказать, установить цвет фона, нажать сохранить, увидеть нету, не совсем, отрегулировать оттенок на 10, сохранить, нет, отрегулировать на 5, сохранить, выглядит хорошо.
Это работает путем наблюдения за каждым сохранением файла (на уровне операционной системы), обработки файла (здесь работают расширения) и передачи данных в браузер через веб-сокеты, которые затем обрабатываются (на стороне клиента). расширение).
Не для подключения или что-нибудь, но я боролся с этой проблемой в течение долгого времени задницу.
Надеюсь, это поможет.
