Так как в данный момент моя жись повернулась так, что я стал верстальщиком, а точнее Front-end Engineer’ом, так как приходится разрабатывать JS и заниматься отладкой клиентских веб-приложений, то я решил пожертвовать некоторым количеством рабочего времени и написать небольшую заметку.
Все, кто занимается версткой под веб отлаживают свои шаблоны под различные браузеры. Ну ладно, не все :). Я из тех, кто делает это. В своей работе я использую кучу полезных расширений для Firefox:
- WebDeveloper. Незаменимое расширение, обладает внушающим количеством возможностей. Очень часто использую для того, чтобы что-то подправить в коде страницы налету. Так же использую для получения самой различной информации о странице и блоках в ней. Так же с помощью этого расширения чищу куки, смотрю css код, отключаю js, подсвечиваю блоки, изменяю размеры страницы и меряю что-нибудь встроенной линейкой :). Это то, в чём мне помогает Webdeveloper чаще всего.
- Firebug. Ну кто не знает про Firebug? Воистину мощное расширение, с которым я работаю постоянно в процессе верстки. Чаще всего при помощи него я инспектирую какой-либо элемент и смотрю его границы, отступы и то, какими css стилями обладает элемент. Часто подправляю на лету css свойства элемента, чтобы сразу же увидеть произошедшие изменения. Очень удобно, не надо открывать редактор и править HTML и CSS код. Бывает, исследую верстку некоторых сайтов - и тут Firebug очень помогает. Когда пишу Javascript, очень пригождается просмотр DOM дерева при помощи Firebug. Консоль вот юзаю нечасто. Так же пригождается просмотр асинхронных запросов к сайту и контроль загрузки внешних ресурсов (скриптов, картинок, css) во вкладке Net.
- Firescope. Это новое расширение для расширения Firebug, как бы странно это не звучало. Это такой своеобразный cheatsheet, который показывает, как элемент поддерживается в различных браузерах и имеет ли баги. Отображается все это дело в виде таблички в новой вкладке Фаербага Reference, которая появляется после установки Firescope.
- Greasemonkey. Это расширение, как все знают, позволяет подключать к сторонним сайтам свой JS файлы. Однажды, это расширение мне очень помогло. С этим связана отдельная история, в которой завязаны и другие расширения кроме Greasemonkey, и я, пожалуй, расскажу её прямо здесь.
Итак - история.
Как то раз на работе мне дали задание. Необходимо было сделать так, чтобы некий сайт, который отлично работал под IE 6, так же отлично стал бы работать и в других браузерах. Сайт, а точнее это был некоторый информационный интерфейс, типа такого, которые работают в автоматах оплаты ОСМП и прочих, уже был в продакшене, и поэтому пароли от него или локальную версию “закрысили” :).
Пришлось раскинуть мозгами, как поступить в данной ситуации. Сначала пришло неправильное решение сохранить сайт локально. Но на сайте было дофига AJAX’а и от этой идеи пришлось отказаться. И тут эврика - я вспомнил про существование Greasemonkey!
Я сделал следующее:
- Установил Greasemonkey
- Сохранил все JS скрипты с этого сайта в файл и подключил его к Greasemonkey.
- При помощи Adblock Plus забанил все JS на сайте
Таким образом получилось, что скрипты брались с моего локального компьютера в процессе рендеринга веб-страницы. Теперь я мог локально править JS и видеть изменения на сайте в продакшене. И вроде все было в шоколаде, пока я не обнаружил, что в теле страницы, в таге body, стоит onload вызов функции JS, которая теперь находилась у меня в user-скрипте Greasemonkey. По непонятным причинам, вызов этой функции происходил раньше, чем загружался и инициализировался мой скрипт и естественно, происходила ошибка. Хотя в документации написано, что Greasemonkey срабатывает по domready.
Вобщем, не стал я долго разбираться, а поставил Proximitron и вырезал нафиг все мешающие вызовы прямо из тела HTTP запроса, написав для этого пару нехитрых правил. После продолжительных мучений, скрипты стали кроссбраузерными.
Вот такая вот фигня)