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

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

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

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

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

Chrome Browser

Нажимаем по нужному элементу правой клавишей мыши и выбираем из меню пункт "Просмотр кода элемента" (в самом низу меню):

Открывается окошко, в котором показан код нашего элемента, а также код css в стилевой таблице справа (обратите внимание, что при наведении курсора на код элемента закрашивается голубым цветом элемент на форуме, и показывается размер элемента):

Обозначения цветов вокруг элемента (картинка взята с http://modx.ws/instrumenty-razrabotchik … metka-stil ):

Как видим голубой цвет - это сам элемент, зеленый - padding, желтый - border, оранжевый - margin.

Если мы хотим узнать в каком месте стиля у нас прописан код данного элемента, то нажимаем на ссылку, с правой стороны как показано на скриншоте:

Открывается страничка стилей, на которой желтым цветом на несколько секунд указан наш элемент:

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

Opera browser

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

Откроется новая вкладка со всеми кодами (CSS и скрипты), которые используются у нас на странице форума:

Комбинацией Ctrl-F открываем поиск:

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

Mozilla Firefox

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

Через нажатие по нужному элементу правой клавишей мыши (выбираем "Исследовать элемент"):

Внизу браузера открывается окошко с кодами. Когда водим по форуму курсор, отображается подсказка на какой элемент наведен курсор:

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

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

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

Internet Explorer

В Интернет Эксплорере тоже есть инструмент для разработчиков. Наводим курсор на значок "Сервис" и нажимаем, в открывшемся меню выбираем пункт "Средства разработчика" или нажимаем F12:

Внизу окна Эксплорера откроется новое окно с кодами, которое для удобства стоит открепить:

Как и в Опере у Эксплорера есть поиск по кодам (стрелочками "Предыдущий результат" - "Следующий результат", которые расположены справа от поиска, ищем нужный код):

Поиск работает не только по кодам НТМЛ, но и по CSS - с левой стороны браузера показаны вкдадки, переключаем на вкладку CSS:

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

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