Що Google Chrome еквівалентне Firebug?

29

Я шукаю інструмент, який може:

перевірити елементи HTML
управління / налагодження JavaScript
продуктивність профілю
змінювати елементи в режимі реального часу

32

Він вбудований. Сторінка [paper] -> Developer -> Інструменти для розробників (у Chrome v5 і нижче). У версії v6, ймовірно, буде по-іншому, оскільки, здається, кнопка Сторінка зникає у цій версії.

— Марк Хаттон
джерело

3

У інструмента Google є деякі недоліки - переглядати запити ajax не так просто, не існує зручного багаторядкового режиму, ви не можете редагувати HTML у вікні, він не відображає набивання / поля при наведенні в дереві HTML, ви просто не можете орієнтуватися у фактичному DOM (лише в дереві HTML) і, нарешті, я вважаю, що функції редагування CSS просто незграбніші - в Google немає жодного автозаповнення. Він все ще дуже корисний, але Firebug просто кращий.

— cgp

2

Або shift-ctrl-I для ледачих :)

— Tim Post

1

@Mark Note, я використовую 5.0.375.99. Я не впевнений, чи має це значення зараз чи в майбутньому.

— Еван Плейс

1

У v6 це Ключ -> Інструменти -> Інструменти для розробників

— 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 дозволяють вам робити:

Огляньте ДОМ
Огляньте CSS
Доступ до консолі JavaScript
Налагодження JavaScript
Перегляд мережевих запитів, термінів та відповідей
Перегляд продуктивності візуалізації, JavaScript та CSS
Перевірте місцеве зберігання та файли cookie

До інструментів розробки можна отримати доступ різними способами.

Меню Chrome -> Інструменти -> Інструменти для розробників
Ctrl+ Shift+ Iв Windows або Cmd+ Shift+ Iна Mac
F12 на Windows
Клацніть правою кнопкою миші будь-де на сторінці та виберіть Перевірити елемент

3

Інструменти в браузері чудово справляються зі своєю роботою і зазвичай є вашим найкращим вибором, але іноді вони не надають достатньо технічних деталей щодо корисних навантажень HTTP запиту / відповіді або занадто специфічні для сторінки.

У цих випадках ви можете виявити, що спеціалізований інструмент перевірки HTTP, як-от Fiddler або одна з альтернатив Linux , надасть більше розуміння.

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

— ДжейсонБірх
джерело

Я не можу сказати, що я знайомий з фіддлером, але Wireshark, безумовно, надмірно голий метал. Wireshark дійсно корисний лише тоді, коли вам потрібно переглянути деталі протоколів нижнього рівня.

— Еван Плейс

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

— JasonBirch

1

Ви також можете спробувати швидкий Tracer з відкритим кодом Google - http://code.google.com/webtoolkit/speedtracer/

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

Використовуючи Speed Tracer, ви зможете отримати кращу картину того, де витрачається час у вашій програмі. Сюди входять проблеми, спричинені розбором та виконанням JavaScript, компонуванням, перерахунком стилю CSS та відповідності селекторів, обробкою подій DOM, завантаженням мережевих ресурсів, тимчасовими пожежами, зворотними викликами XMLHttpRequest, фарбуванням тощо.

— мварк
джерело