Я пишу веб-сайт на PHP, і HTML, який він надає, не є добре відформатованим і важко читається у Firefox (більшість із них знаходиться в одному рядку).
Я не хочу зіпсувати свій PHP-код, додаючи набір матеріалів для форматування білого простору, тому мені було цікаво, чи є опція чи, можливо, доповнення до Firefox, що дасть мені можливість переглядати джерело з відступом відповідно до структура HTML.
Відповіді:
Працює чудово, встановіть розширення звідси: https://addons.mozilla.org/en-US/firefox/addon/655/
Клацніть правою кнопкою миші -> Переглянути вихідну діаграму
Ось що я отримую від джерела HTML домашньої сторінки Google:
Перед:
Після:
від сюди
Переглянути джерельну діаграму Графічно відображає структуру джерела.
JSView 2.0.5 Відображає інформацію про зовнішні файли сторінки.
HighlightAll Виділяє однакові елементи в коді.
Перевірка Html перевіряє HTML поточної сторінки.
Перегляд форматованого джерела Показує структуру джерела.
SourceEditor Дозволяє редагувати код і переглядати результати.
Я зазвичай використовую Firebug для налагодження виводу HTML.
Це дозволяє мені переглядати HTML, як він відображається браузером, а також добре відформатованим джерелом у Firebug. Я також можу перевірити елементи у відображеному html та побачити, звідки вони беруться у вихідному HTML-джерелі.
Якщо хтось шукає таку саму функціональність у 2019 році, для Firefox Quantum є Fire Source Viewer [1], який відображає впорядкований HTML DOM після того, як javascripts маніпулює ним, що навіть краще, ніж тільки джерело html, доставлене веб-сервером.
[1] https://addons.mozilla.org/en-US/firefox/addon/fire-source-viewer/
Розширення Web Developer додає у браузер різні інструменти для веб-розробників. Розширення доступне для Chrome та Firefox і працюватиме на будь-якій платформі, яку підтримують ці браузери, включаючи Windows, OS X та Linux
Viewменю вікна джерела. Клацніть правою кнопкою миші =>,View Page Sourceщоб відкрити це вікно.