Многие технологии используются для создания веб-сайтов. Системы управления контентом^{(Content management systems)} , фреймворки^(frameworks) , разные языки сценариев и программирования^{(different scripting and programming languages)} , платежные системы^{(payment systems)} … много всего!

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

Посмотреть код веб-сайта

Если вы не разработчик или только начинаете, вы скоро узнаете секрет лучшего программирования. Посмотрите на код других людей. Мы показали вам, как использовать инструменты разработчика Chrome,^{(how to use Chrome’s Developer Tools)} чтобы сделать именно это. 

ChromeDevTools поможет вам просмотреть код HTML , JavaScript и CSS сайта , узнать, какие источники они могут потреблять, а также как проверить производительность загрузки сайта в браузере. Во всех основных веб-браузерах доступны некоторые версии инструментов разработчика.

Встроенный с^(BuiltWith)

BuiltWith.com — это ресурс профессионального уровня, который углубляется в сайты, чтобы увидеть все технологии, которые они используют. В настоящее время они охватывают более 673 миллионов веб-сайтов и продолжают расти. Основная идея сайта заключалась в том, чтобы помочь привлечь потенциальных клиентов для людей, занимающихся продажей программного обеспечения.

Расширенные функции доступны только по платной подписке, но любой может зайти на сайт BuiltWith.com^{(BuiltWith.com)} , ввести адрес веб-сайта, название технологии или ключевое слово и получить подробный профиль технологии. Зарегистрируйте^(Sign) бесплатную учетную запись, и вы сможете выполнять пять подробных поисков в день.

Отчет о сайте Netcraft^{(Netcraft Site Report)}

Netcraft является ресурсом для веб-разработчиков с 1995 года. Их 25-летний опыт отражен в бесплатном инструменте Netcraft Site Report . Он сочетает в себе технологический отчет с справочным отчетом « кому принадлежит сайт^{(who owns the site)} », так что вы получаете полный обзор сайта. Вы будете знать, где он размещен и кому он принадлежит, а также немного истории домена.

Отчет о сайте Netcraft^{(Netcraft Site Report)} разрешает неограниченный поиск. Тем не менее, используйте его только тогда, когда он вам действительно нужен. Это бесплатный ресурс, и сообщество разработчиков хотело бы, чтобы он таким и оставался.

Информация о сайтах W3Techs^{(W3Techs’ Sites Info)}

Инструмент информации о сайтах W3Techs работает немного иначе, чем другие. Они ведут базу данных^(database) информации, но только на сайтах, которые уже были обысканы с помощью инструмента. Если вы проверяете сайт, который ранее не проверялся, он будет просканирован мгновенно. 

Предоставляемый отчет менее подробен, чем другие сервисы, но все же содержателен. Вы узнаете, какие CMS , языки программирования, веб-сервер и хостинг-провайдер использует сайт. W3Techs также предоставляет расширения браузера для Firefox и Chrome , чтобы вы могли проверять сайты одним щелчком мыши или касанием.

Ваппалайзер^(Wappalyzer)

Если вы предпочитаете использовать плагин для браузера для проверки технологий сайта, у Wappalyzer есть плагины для Firefox , Chrome и Edge . Плагины бесплатны, просты в использовании и имеют удобный для чтения дизайн. Нажав на любую технологию в отчете, вы перейдете к ее объяснению, и это здорово, если вы найдете что-то, чего вы раньше не видели. 

Wappalyzer предлагает уникальную функцию с возможностью создания оповещения для веб-сайта. Они ежедневно проверяют сайт и отправляют вам электронное письмо, если обнаруживают изменения. Предупреждение потребует от вас создать бесплатную учетную запись в Wappalyzer и стоить 10 кредитов в месяц.

Но вы получаете 50 кредитов бесплатно каждый месяц, а предупреждение стоит всего 10 кредитов за каждые 30 дней. Таким образом, оповещения Wappalyzer практически бесплатны, если вы отслеживаете 5 или менее сайтов.

Веб-споттер^(Webspotter)

Все сервисы Webspotter , кроме одного , являются платными, но это нормально. Их бесплатное расширение Webspotter Chrome^{(Webspotter Chrome extension)} компенсирует это. Расширение Webspotter похоже на Wappalyzer , но имеет несколько отличий. Рядом с каждой перечисленной технологией есть ссылки на статистику о технологии, список веб-сайтов, использующих эту технологию, и официальный сайт этой технологии. 

Еще более интригующей особенностью является способность Webspotter извлекать контакты электронной почты, ссылки в социальных сетях, SEO-аналитику^{(SEO analytics)} и другую информацию о компании с веб-сайта. Хотя это не говорит вам о том, как сделан сайт, это может быть полезно для целей онлайн-маркетинга или даже поиска работы.

Детектор темы WordPress^{(WordPress Theme Detector)}

Может быть, вы не очень заинтересованы в веб-разработке, но вы собираете сайт на WordPress и хотели бы включить в него функции, которые видели где-то еще. Загрузите плагин WordPress Theme Detector для браузера Chrome^{(Download the WordPress Theme Detector Chrome browser plugin)} . 

Детектор темы WordPress^{(WordPress Theme Detector)} не только сообщит вам, какую тему WordPress^{(WordPress theme)} использует сайт, но также сообщит вам, какие плагины WordPress^{(WordPress plugins)} он использует. Он также показывает вам, кто создал тему или плагин, и дает ссылку, где их можно получить. Это позволяет легко включать в ваш сайт WordPress элементы , которыми вы восхищались на других сайтах.

Узнайте, как работают веб-сайты

Да, так просто зайти на любой веб-сайт в Интернете^(Internet) и посмотреть, из чего он сделан. Попробуйте использовать два или более из этих инструментов, так как некоторые из них подберут то, что другие не поймут. Большая часть того, что вы видите на сайте, на самом деле отображается на вашем компьютере. Вот что облегчает просмотр. Это также причина, по которой вам необходимо сделать свой веб-сайт максимально безопасным^{(make your website as secure as possible)} . Наслаждайтесь глубоким погружением и дайте нам знать, что вы нашли или построили.

How Websites Work: Learn What’s Under the Hood

Many technologies go into building websіtes. Content management systems, frameworks, different scripting and programming languages, payment systems…all sorts of things!

If you’re curious how your favorite website works, or want to see if a site is using something sketchy, this article will show you several ways to look under the hood and see how it’s built.

View the Website’s Code

If you’re not a developer, or just starting out, you’re about to learn the secret to better programming. Look at other people’s code. We’ve shown you how to use Chrome’s Developer Tools to do just that. 

ChromeDevTools will help you view a site’s HTML, JavaScript, and CSS code, find out what sources they may be consuming, as well as how to check a site’s loading performance in the browser. All major web browsers have some version of the developer’s tools available.

BuiltWith

BuiltWith.com is a professional-level resource that goes deep into sites to see all the technologies they use. Currently, they cover over 673 million websites and counting. The main idea behind the site was to help generate leads for people in software sales.

The advanced features are only available through a paid subscription, but anyone can go to BuiltWith.com, enter a website address, technology name, or keyword, and get a detailed technology profile. Sign up for a free account and you can do five detailed lookups a day.

Netcraft Site Report

Netcraft has been a resource for web developers since 1995. Their expertise over 25 years shows in Netcraft’s free Site Report tool. It combines a technology report with a “who owns the site” background report, so you get a thorough overview of the site. You’ll know where it’s hosted, and who owns it, plus some domain history.

The Netcraft Site Report appears to allow unlimited lookups. Still, use it only when you really need it. It’s a free resource and the developer community would like to see it stay that way.

W3Techs’ Sites Info

W3Techs’ Sites Info tool works a bit differently from the others. They keep a database of information, but only on sites that have already been searched through the tool. If you’re checking on a site that hasn’t been checked before, it will crawl the site instantly. 

The report provided is less in-depth than other services provide, but still insightful. You’ll get which CMS, programming languages, web server, and hosting provider a site uses. W3Techs also provide browser extensions for Firefox and Chrome so you can check sites with just a click or a tap.

Wappalyzer

If you prefer to have a browser plugin to check a site’s technologies, Wappalyzer has plugins for Firefox, Chrome, and Edge. The plugins are free, easy to use, and are laid out in an easy to read design. Clicking on any technology in the report will take you to an explanation of it, which is great if it finds something you haven’t seen before. 

Wappalyzer offers a unique feature with the ability to create an alert for a website. They check the site daily and email you if they detect a change. The alert will require you to create a free account with Wappalyzer and cost 10 credits per month.

But you get 50 credits for free every month and an alert only costs 10 credits for every 30 days. So Wappalyzer Alerts are basically free if you’re monitoring 5 or fewer sites.

Webspotter

All but one service of Webspotter is a paid service, but that’s okay. Their free Webspotter Chrome extension makes up for that. The Webspotter extension is similar to Wappalyzer, yet it has a few different features. Next to each technology listed, there are links to statistics about the technology, a list of websites using that tech, and the official website for the tech. 

An even more intriguing feature is Webspotter’s ability to pull email contacts, social media links, SEO analytics, and other company information out of a website. Although that doesn’t tell you about how the site is made, it could be useful for online marketing purposes or even job hunting.

WordPress Theme Detector

Maybe, you’re not so interested in web development but you’re putting together a WordPress site and would like to include features you’ve seen elsewhere. Download the WordPress Theme Detector Chrome browser plugin. 

Not only will the WordPress Theme Detector tell you what WordPress theme a site is using, but it’ll also tell you what WordPress plugins it’s using. It also shows you who created the theme or plugin and provides a link to where you can get them. That makes it so easy to incorporate elements into your WordPress site that you’ve admired on other sites.

Learn How Websites Work

Yes, it’s that easy to dive into any website on the Internet and see what it’s made of. Try using two or more of these tools, as some will pick up things that others don’t. Most of what you see on a site is actually rendered on your computer. That’s what makes it easy to look at. It’s also the reason why you need to make your website as secure as possible. Enjoy your deep diving and let us know what you find or build.

Related posts

• Что такое лучший сервис конференц-связи - сравнение лучших приложений

• Автоматически перемещать, удалять или копировать файлы в Windows

• Как проверить, не слишком ли высока температура вашего процессора

• 5 лучших приложений для фильтрации синего света для Windows, Mac и Linux

• Как использовать диспетчер пакетов Windows для установки программ Windows

• Лучшие программы для добавления новых функций в Windows 10

• 5 лучших бесплатных одноразовых учетных записей электронной почты

• Что такое Microsoft Power Automate и бесплатные шаблоны для загрузки

• Редактор скриптов Google Apps: все, что вам нужно знать, чтобы начать работу

• 5 альтернатив Windows команде sudo в Linux

• 4 лучших альтернативы Google Chromecast

• Как приложение Signal для ПК может защитить вашу конфиденциальность

• 7 способов открыть файл MDB без Microsoft Access

• 5 инструментов для преобразования файлов BIN в изображения ISO

• 7 лучших инструментов для обрезки Chromebook

• 5 лучших безопасных сайтов для скачивания APK для приложений Android

• 5 лучших инструментов для сканирования IP-адресов для Windows, Mac, iOS и Android

• 3 инструмента для диагностики и устранения проблем с монитором

• 10 лучших расширений конфиденциальности для Chrome (2022 г.)

• Что такое чат-бот и как его использовать на своем сайте