Отладка сайтов в разных браузерах

Question

У меня первый опыт в дизайне веб-сайтов, и я многому учусь. Я также теперь понимаю, почему веб-разработчики не являются большим поклонником разработки для Internet Explorer. Кажется, ничего не работает так, как я ожидаю. Однако, поскольку веб-сайт должен работать в кросс-браузерном режиме, я трачу время на его просмотр в Firefox, Chrome и IE. Однако кое-что, что для меня неочевидно, это то, как определить, в чем проблема на сайте.

Например, макет одной из моих страниц заставляет нижний колонтитул внизу страницы. Он отлично смотрится в Chrome и Firefox, но в IE есть что-то не то, что заставляет нижний колонтитул выравниваться вправо (и вызывает горизонтальную прокрутку). Я поиграл с кодом, но на самом деле ничто не отвечает тому, что я хочу в IE (даже если это происходит в других браузерах).

Существуют ли какие-либо инструменты, которые могут помочь "отладить" проблемы на веб-сайте, поэтому исправление их - это больше, чем просто метод проб и ошибок? Спасибо.

Answer 1

Одним из моих любимых приложений, который работает во всех браузерах, является X-Ray . Вы просто вставляете ссылку на этой странице в закладку, и она загружает некоторый внешний JavaScript поверх страницы, которую вы тестируете. Он показывает множество параметров об объекте DOM, на который вы щелкаете, а также его иерархию в модели.

Что касается вашей конкретной проблемы нижнего колонтитула, я бы посмотрел на потенциальное отсутствие очистки float и div, которые шире, чем их родительские контейнеры где-то в строке.

Answer 2

Я предполагаю, что вы проверили, что ваш код действителен , с

• HTML-валидатор, например: Служба проверки разметки W3C
• Проверка CSS, например: Служба проверки W3C CSS

И, конечно, у вас должен быть правильный doctype в вашем html-файле. Без doctype некоторые браузеры переходят в режим причуд, чтобы эмулировать ошибки в старых браузерах.

Answer 3

Существуют фреймворки, такие как GWT, ext-js, YUI , которые скрывают от вас множество ошибок браузера. Но сегодня (ближе к концу 2009 года) до сих пор нет хорошего и надежного способа сузить проблемы с браузерами и устранить их.

PS: я собираю инструменты, которые помогают при отладке здесь: Какие инструменты вы используете для отладки HTML / JS в вашем браузере?

Answer 4

Мне нравится Firebug для Firefox и IE8 имеет Инструменты разработчика из меню инструментов и Панель инструментов разработчика IE для более старых версий. Chrome имеет аналогичные инструменты из меню страницы.

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

Answer 5

Кросс-браузерная библиотека JavaScript, такая как jQuery и ее компоненты пользовательского интерфейса, может быть очень полезной для избежания различий между браузерами. Microsoft предоставляет панель инструментов разработчика IE, ее не так просто использовать, как Firebug, но она все равно может быть очень полезной. Отладчик Just-In-Time, такой как MS Script Debugger или Visual Studio, также экономит время.