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

29

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

  • проверять элементы HTML
  • управлять / отлаживать JavaScript
  • производительность профиля
  • изменять элементы в режиме реального времени
development performance google-chrome profiling Эван Плейс
источник

Ответы:

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
источник
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
источник