Как проверить, какие изображения / CSS / Javascript используются в веб-приложении?

Question

На днях я нашел этот маленький кусочек программного обеспечения - WARI. Это расшифровывается как инспектор ресурсов веб-приложений. По-видимому, он проверяет зависимости между CSS, HTML, JS и изображениями и сообщает о неиспользованных и дублированных стилях CSS, функциях JavaScript и изображениях.

Ссылка: WARI выпущен!

Что вы используете? Есть альтернативы?

Answer 1

Концептуально такой инструмент был бы очень удобен, так как обычно очень неудобно находить случайные файлы и безопасно их удалять.

Я не уверен, что это так ... но из формулировки этого вопроса похоже, что это может быть вопрос саморекламы, который не является одобренным видом деятельности. Если вы хотите ответить на общий вопрос «какие инструменты существуют для выполнения x, y, & z» со своим собственным ответом, это будет хорошо.

Для справки, я использую 2 инструмента под названием CheckWeb и Xenu, которые будут переходить по всем ссылкам и сообщать, что было найдено.

Это находит мне любые 404, и я затем сравниваю список ссылочных файлов с моим списком каталогов, чтобы увидеть, какие файлы не использовались. (Это грубо, но работает)

Answer 2

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

При попытке оптимизировать сайт, yslow (http://developer.yahoo.com/yslow/)) является отличным дополнением к firebug, так как предоставляет конкретные советы по реализации для достижения более быстрой загрузки страницы.

Существует также замечательная утилита smush.it (http://developer.yahoo.com/yslow/smushit/), которая недавно была добавлена ​​в набор инструментов yslow), которая производит оптимизацию для уменьшения размера изображения.

Answer 3

Если ваша цель - ускорить загрузку страниц, WARI, похоже, поможет вам сократить объем данных, необходимых для загрузки вашей страницы.

Тем не менее, я предлагаю вам пойти дальше - воспользуйтесь советами Yahoo! и , чтобы минимизировать количество HTTP-запросов :

• Объединенные файлы - это способ уменьшить количество HTTP-запросов, объединяя все сценарии в один сценарий и аналогичным образом объединяя все CSS в одну таблицу стилей. Объединение файлов становится более сложным, когда сценарии и таблицы стилей меняются от страницы к странице, но выполнение этой части процесса выпуска сокращает время отклика.
• CSS-спрайты являются предпочтительным методом для уменьшения количества запросов изображений. Объедините фоновые изображения в одно изображение и используйте свойства CSS background-image и background-position для отображения нужного сегмента изображения.
• Встроенные изображения Используйте схему URL data: для встраивания данных изображения в фактическую страницу. Это может увеличить размер вашего HTML-документа. Объединение встроенных изображений в ваши (кэшированные) таблицы стилей - это способ уменьшить HTTP-запросы и избежать увеличения размера ваших страниц. Встроенные изображения еще не поддерживаются во всех основных браузерах.

Answer 4

Если вы являетесь поклонником Firefox, я использую надстройку Firebug, которая подойдет для всех мастеров веб-разработки. Я мог бы немного преувеличить, но считаю это очень полезным. Вот краткое замечание: Firebug интегрируется с Firefox, чтобы во время просмотра у вас было множество инструментов веб-разработки. Вы можете редактировать, отлаживать и отслеживать CSS, HTML и JavaScript в режиме реального времени на любой веб-странице

Если вы хотите узнать больше информации, вы можете проверить их домашнюю страницу здесь: Firebug

Answer 5

Вы можете попробовать Скорость страницы Google

С этим вы можете проверить все релевантные вещи о вашем сайте. Какой CSS не используется, скорость страницы Google минимизирует ваши файлы JS и так далее. Проверьте это, вы будете впечатлены. : -)