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


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

  • проверка HTML-элементов
  • управление/отладка JavaScript
  • производительность профиля
  • изменять элементы в режиме реального времени
Author: Evan Plaice, 2010-07-08

6 answers

Он встроен. Страница [документ] - > Разработчик - > Инструменты разработчика (в Chrome версии 5 и ниже). Вероятно, в версии 6 все будет по-другому, так как в этой версии кнопка "Страница", похоже, исчезает.

 32
Author: Mark Hatton, 2010-07-09 13:46:21

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

 17
Author: HoLyVieR, 2010-07-08 21:25:18
 13
Author: Emmett, 2010-07-08 21:32:24

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

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

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

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

  • Меню Chrome -> Инструменты -> Инструменты разработчика

  • Ctrl + Сдвиг + Я в Windows или Cmd + Сдвиг + Я на Мак

  • F12 в Windows

  • Щелкните правой кнопкой мыши в любом месте страницы и выберите Проверить элемент

 6
Author: , 2014-11-11 20:43:40

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

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

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

 3
Author: JasonBirch, 2017-05-23 12:37:07

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

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

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

 1
Author: mvark, 2010-07-17 07:52:02