Что такое Google Chrome, эквивалентный Firebug?

29

Я ищу инструмент, который может:

проверять элементы HTML
управлять / отлаживать JavaScript
производительность профиля
изменять элементы в режиме реального времени

32

Он встроен. Страница [бумага] -> Разработчик -> Инструменты разработчика (в Chrome v5 и ниже). Скорее всего, он будет другим в v6, поскольку кнопка «Страница» в этой версии исчезает.

— Марк Хаттон
источник

3

У инструмента Google есть некоторые недостатки: просмотр ajax-запросов не так прост, нет удобного многострочного режима, вы не можете редактировать HTML в окне, он не показывает отступы / поля при наведении курсора в дереве HTML, вы просто не можете ориентироваться в реальном DOM (только в дереве HTML), и, наконец, что не менее важно, я нахожу функции редактирования CSS более грубыми - в Google нет ни одного автозаполнения. Это все еще очень удобно, но Firebug просто лучше.

— CGP

2

Или shift-ctrl-I для ленивых :)

— Тим Пост

1

@ Марк Примечание, я использую 5.0.375.99. Я не уверен, если это имеет значение сейчас или в будущем, хотя.

— Эван Плейс

1

В v6 это Wrench -> Инструменты -> Инструменты разработчика

— enobrev

17

Щелкните правой кнопкой мыши -> Проверить элемент

— HoLyVieR
источник

13

Firebug Lite для Google Chrome .

— Эмметт
источник

FireBug Lite - отличный инструмент, который также работает в IE, Opera, Safari и Firefox: getfirebug.com/firebuglite

— Nat Ryall

5

Прошло 4 года с тех пор, как был задан оригинальный вопрос. Chrome (стабильный) теперь имеет версию 38. Долгое время он включал полный набор инструментов разработчика , которые примерно эквивалентны Firebug для Firefox (хотя, кстати, Firefox даже имеет встроенный инспектор ).

Инструменты разработчика Chrome позволяют сделать несколько вещей:

Осмотреть DOM
Проверить CSS
Доступ к консоли JavaScript
Отладка JavaScript
Просмотр сетевых запросов, времени и ответов
Просмотр производительности рендеринга, JavaScript и CSS
Осмотреть местное хранилище и куки

Доступ к инструментам разработки можно получить разными способами.

Меню Chrome -> Инструменты -> Инструменты разработчика
Ctrl+ Shift+ Iв Windows или Cmd+ Shift+ Iна Mac
F12 в Windows
Щелкните правой кнопкой мыши в любом месте страницы и выберите « Проверить элемент».

3

Инструменты в браузере отлично справляются со своей работой и, как правило, являются лучшим выбором, но иногда они не предоставляют достаточно технических подробностей о полезных нагрузках HTTP-запросов / ответов или слишком специфичны для конкретной страницы.

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

Если вам действительно нужно получить «голое железо», Wireshark выходит за рамки HTTP и полностью анализирует сетевой трафик, но сначала будьте готовы к поражению.

— JasonBirch
источник

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

— Эван Плейс

Fiddler ближе к инструментам разработчика Firebug / Chrome для удобства использования. Одним из мест, которые я нашел наиболее удобным, является публикация файлов KML на моем веб-сайте; вы можете видеть запросы и ответы от настольных приложений Windows, таких как Google Earth, а не только от веб-браузеров. Я пару раз использовал Wireshark, но согласен, что он обычно бесполезен для повседневной работы веб-мастеров.

— JasonBirch

1

Вы также можете попробовать Google Tracer с открытым исходным кодом - http://code.google.com/webtoolkit/speedtracer/

Speed Tracer - это инструмент, который поможет вам выявить и устранить проблемы с производительностью в ваших веб-приложениях. Он визуализирует метрики, которые берутся из низкоуровневых точек инструментария внутри браузера, и анализирует их во время работы приложения. Speed Tracer доступен как расширение Chrome и работает на всех платформах, где расширения поддерживаются в настоящее время (Windows и Linux).

Используя Speed Tracer, вы можете получить лучшее представление о том, где время тратится в вашем приложении. Это включает в себя проблемы, вызванные синтаксическим анализом и выполнением JavaScript, макетом, перерасчетом стиля CSS и соответствием селектора, обработкой событий DOM, загрузкой сетевых ресурсов, срабатыванием таймера, обратными вызовами XMLHttpRequest, рисованием и другими.

— mvark
источник