Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Справочная » Инструменты для поиска и редактирования стиля (скриптов).


Инструменты для поиска и редактирования стиля (скриптов).

Сообщений 1 страница 2 из 2

1

Инструменты для поиска и редактирования стиля (скриптов). Используем браузер.

Я заметил, что большинство людей не знают, что у них под рукой есть всегда инструмент для разработчика, с помощью которого человек может быстро и без особого труда найти тот или иной элемент на своем форуме, чтобы проверить на ошибки и отредактировать свой стиль. Когда то была тема по этому вопросу: Пишем стили, CSS сами. (...или понятный ответ на 70% вопросов раздела) - думаю, что зря ее отправили в Архив. Поэтому была создана эта тема в помощь людям, которые занимаются редактированием своего стиля.

Еще советую почитать:

Прокачиваем навыки отладки с помощью инструментов разработчика Chrome (часть 1)

Прокачиваем навыки отладки с помощью инструментов разработчика Chrome (часть 2)

Chrome Browser

Нажимаем по нужному элементу правой клавишей мыши и выбираем из меню пункт "Просмотр кода элемента" (в самом низу меню):
http://s5.uploads.ru/t/SwgqT.gif

Открывается окошко, в котором показан код нашего элемента, а также код css в стилевой таблице справа (обратите внимание, что при наведении курсора на код элемента закрашивается голубым цветом элемент на форуме, и показывается размер элемента):
http://s5.uploads.ru/t/IS5Wi.gif
Обозначения цветов вокруг элемента (картинка взята с http://modx.ws/instrumenty-razrabotchik … metka-stil ):
http://s4.uploads.ru/t/leaHS.gif
Как видим голубой цвет - это сам элемент, зеленый - padding, желтый - border, оранжевый - margin.

Если мы хотим узнать в каком месте стиля у нас прописан код данного элемента, то нажимаем на ссылку, с правой стороны как показано на скриншоте:
http://s4.uploads.ru/t/pCfFK.gif

Открывается страничка стилей, на которой желтым цветом на несколько секунд указан наш элемент:
http://s5.uploads.ru/t/0Eua7.gif

Более подробную информацию о возможностях инструмента для разработчиков на Хроме вы можете найти вот на этом сайте (там показан Canary Chrome, но в целом все тоже самое, что и в обычном Хроме): http://modx.ws/instrumenty-razrabotchika-chrome-razmetka-stil

Opera browser

С Оперой в принципе все тоже самое, что и с Хромом. Нажимаем правой клавишей мыши по странице, и выбираем пункт "Исходный код" (можно воспользоваться комбинацией Ctrl-U):
http://s5.uploads.ru/t/pB6YM.gif

Откроется новая вкладка со всеми кодами (CSS и скрипты), которые используются у нас на странице форума:
http://s4.uploads.ru/t/Zm57O.gif

Комбинацией Ctrl-F открываем поиск:
http://s4.uploads.ru/t/DFb6r.gif

Забиваем в поиск то что ищем (оранжевым закрашивается неверный ввод) и нажимаем Enter. Кроме того справа от поля поиска есть две кнопки: "Найти Предыдущее" и "Найти Далее", используя их ищем нам нужный код:
http://s4.uploads.ru/t/D9BxL.gif

http://s4.uploads.ru/t/9alWc.gif

Mozilla Firefox

В Мозилле можно вызвать инструмент для веб разработчика несколькими путями:
Через Меню - Веб разработка - Инспектор:

http://s4.uploads.ru/t/F1UDd.gif
Через нажатие по нужному элементу правой клавишей мыши (выбираем "Исследовать элемент"):
http://s5.uploads.ru/t/T1fsK.gif

Внизу браузера открывается окошко с кодами. Когда водим по форуму курсор, отображается подсказка на какой элемент наведен курсор:
http://s4.uploads.ru/t/hGLor.gif

Нажимаем левой клавишей мыши по элементу на форуме и внизу отображается требуемый код. Обратите внимание: с правой стороны подсказки можно вызвать менюшку, с левой стороны мы открепляем зафиксированное положение от данного элемента для продолжения исследования форума:
http://s5.uploads.ru/t/JN8d5.gif

http://s4.uploads.ru/t/AXuNT.gif

Окошко с информацией о кодах можно закрепить сбоку или вовсе открепить от основного окна браузера (браузер запоминает это и при следующем запуске запустит инструмент так как вы его оставили перед закрытием):
http://s5.uploads.ru/t/vJV6m.gif

http://s4.uploads.ru/t/hURqS.gif

С Мозиллой я плохо знаком, поэтому более подробно возможности веб инструмента Мозиллы не смог рассказать.. Если будут добавления и поправки, то добавлю. Вот ссылки, где можно прочесть более подробную информацию:
http://www.firefoxhacker.ru/00341.html
http://dvpress.ru/urok-78-firebug-for-vebmastera/.html
http://habrahabr.ru/post/142277/

Internet Explorer

В Интернет Эксплорере тоже есть инструмент для разработчиков. Наводим курсор на значок "Сервис" и нажимаем, в открывшемся меню выбираем пункт "Средства разработчика" или нажимаем F12:
http://s4.uploads.ru/t/1Exrm.gif

Внизу окна Эксплорера откроется новое окно с кодами, которое для удобства стоит открепить:
http://s4.uploads.ru/t/qTQ8s.gif

http://s5.uploads.ru/t/7JzYM.gif

Как и в Опере у Эксплорера есть поиск по кодам (стрелочками "Предыдущий результат" - "Следующий результат", которые расположены справа от поиска, ищем нужный код):
http://s4.uploads.ru/t/WLdcQ.gif

Поиск работает не только по кодам НТМЛ, но и по CSS - с левой стороны браузера показаны вкдадки, переключаем на вкладку CSS:
http://s4.uploads.ru/t/pHJUe.gif

http://s5.uploads.ru/t/5nRkM.gif

Более подробные инструкции на сайте Майкрософта: http://msdn.microsoft.com/ru-ru/library/cc817576.aspx

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

Отредактировано kolobdur74 (Вс, 15 Авг 2021 11:06:06)

+6

2

kolobdur74, в Опере инструмент, подобный тому, о котором ты ведешь речь, вызывается по клику на пункт меню под названием "Проинспектировать элемент". Исходный код - само собой, и он так же вызывается по клику на любом пространстве экрана (не обязательно конкретного элемента, на то он и код страницы).

В Лисе и, кажется, Опере совершенно точно можно работать со скриптами, но поскольку я пока в них чайник, досконально разбираться не довелось, а вот редактор стилей Лисы в области CSS и слегка HTML знаю неплохо.

Там есть возможность адаптивного дизайна (для тех, кто заботится о пользователях с разным разрешением экранов)
Сырой дизайн в процессе верстки удобно проверять на гибкость и читабельность.

http://savepic.net/3895406.jpg

Есть возможность легко и быстро определять шрифт выделенного элемента (вкладка Шрифты в правом верхнем меню окна)

http://savepic.net/3883118.jpg

Есть возможность посмотреть ошибки текущей страницы (вкладка Консоль в левом верхнем меню окна редактора)

http://savepic.net/3890286m.jpg

Можно, не заходя в админку, посмотреть все файлы стилей: Структура, Цвета, Экстра и все дополнительные таблицы стилей, размещенные в html-верхе (вкладка Редактор стилей в верхнем левом меню). Но что самое удобное - там же, в режиме он-лайн и вносить правки, видя результат на месте. После достижения удовлетворительного результата, достаточно просто скопировать и заменить код в Администрировании. Слева перечень всех таблиц css-стилей по названиям, справа - окно с содержимым

http://savepic.net/3888238.jpg

В общем, много всего вкусного и очень удобного.

Отредактировано Remus John Lupin (Чт, 26 Сен 2013 00:10:33)

+1


Вы здесь » Единый форум поддержки » Справочная » Инструменты для поиска и редактирования стиля (скриптов).