Wiele technologii wykorzystuje się do tworzenia stron internetowych. Systemy zarządzania treścią^{(Content management systems)} , frameworki^(frameworks) , różne języki skryptowe i programowania^{(different scripting and programming languages)} , systemy płatności^{(payment systems)} ... różne rzeczy!

Jeśli ciekawi Cię, jak działa Twoja ulubiona witryna lub chcesz sprawdzić, czy w witrynie jest coś niewyraźnego, ten artykuł pokaże Ci kilka sposobów, jak zajrzeć pod maskę i zobaczyć, jak jest zbudowana.

Wyświetl kod strony internetowej

Jeśli nie jesteś programistą lub dopiero zaczynasz, wkrótce poznasz sekret lepszego programowania. Spójrz na kod innych ludzi. Pokazaliśmy Ci, jak korzystać z Narzędzi dla programistów Chrome,^{(how to use Chrome’s Developer Tools)} aby to zrobić. 

ChromeDevTools pomoże Ci wyświetlić kod HTML^(HTML) , JavaScript i CSS witryny , dowiedzieć się, z jakich źródeł mogą korzystać, a także jak sprawdzić wydajność ładowania witryny w przeglądarce. We wszystkich głównych przeglądarkach internetowych dostępna jest pewna wersja narzędzi programisty.

Zbudowany z^(BuiltWith)

BuiltWith.com to zasób na poziomie profesjonalnym, który zagłębia się w witryny, aby zobaczyć wszystkie używane przez nich technologie. Obecnie obejmują one ponad 673 mln stron internetowych i wciąż rośnie. Główną ideą serwisu była pomoc w generowaniu leadów dla osób zajmujących się sprzedażą oprogramowania.

Zaawansowane funkcje są dostępne tylko w ramach płatnej subskrypcji, ale każdy może przejść do BuiltWith.com , wprowadzić adres strony internetowej, nazwę technologii lub słowo kluczowe i uzyskać szczegółowy profil technologii. Załóż^(Sign) darmowe konto i możesz wykonywać pięć szczegółowych wyszukiwań dziennie.

Raport o witrynie Netcraft^{(Netcraft Site Report)}

Netcraft jest źródłem informacji dla twórców stron internetowych od 1995 roku. Ich ponad 25-letnie doświadczenie pokazuje w bezpłatnym narzędziu Site Report firmy Netcraft . Łączy on raport dotyczący technologii z raportem w tle „ kto jest właścicielem witryny^{(who owns the site)} ”, dzięki czemu można uzyskać dokładny przegląd witryny. Będziesz wiedział, gdzie jest hostowany i kto jest jego właścicielem, a także trochę historii domeny.

Raport witryny Netcraft^{(Netcraft Site Report)} wydaje się umożliwiać nieograniczone wyszukiwanie. Mimo to używaj go tylko wtedy, gdy naprawdę tego potrzebujesz. Jest to darmowy zasób, a społeczność programistów chciałaby, aby tak pozostało.

Informacje o witrynach W3Techs^{(W3Techs’ Sites Info)}

Narzędzie Sites Info firmy W3Techs działa nieco inaczej niż pozostałe. Prowadzą bazę^(database) informacji, ale tylko na stronach, które zostały już przeszukane za pomocą narzędzia. Jeśli sprawdzasz witrynę, która nie była wcześniej sprawdzana, zostanie ona natychmiast zindeksowana. 

Dostarczony raport jest mniej dogłębny niż inne usługi, ale nadal wnikliwy. Dowiesz się, jakiego systemu CMS , języków programowania, serwera internetowego i dostawcy usług hostingowych używa witryna. W3Techs zapewnia również rozszerzenia przeglądarki dla Firefoxa^(Firefox) i Chrome , dzięki czemu możesz sprawdzać witryny za pomocą jednego kliknięcia lub dotknięcia.

Wappalyzer

Jeśli wolisz mieć wtyczkę do przeglądarki do sprawdzania technologii witryny, Wappalyzer ma wtyczki do przeglądarek Firefox^(Firefox) , Chrome i Edge . Wtyczki są bezpłatne, łatwe w użyciu i mają czytelną konstrukcję. Kliknięcie dowolnej technologii w raporcie przeniesie Cię do jej wyjaśnienia, co jest świetne, jeśli znajdzie coś, czego wcześniej nie widziałeś. 

Wappalyzer oferuje unikalną funkcję z możliwością tworzenia alertu dla strony internetowej. Codziennie sprawdzają witrynę i wysyłają e-maile, jeśli wykryją zmianę. Alert będzie wymagał utworzenia bezpłatnego konta w Wappalyzer i kosztował 10 kredytów miesięcznie.

Ale co miesiąc otrzymujesz 50 kredytów za darmo, a alert kosztuje tylko 10 kredytów na każde 30 dni. Tak więc alerty Wappalyzer są w zasadzie bezpłatne, jeśli monitorujesz 5 lub mniej witryn.

Obserwator stron internetowych^(Webspotter)

Wszystkie usługi Webspotter oprócz jednej są usługami płatnymi, ale to jest w porządku. Ich bezpłatne rozszerzenie Webspotter do Chrome^{(Webspotter Chrome extension)} nadrabia to. Rozszerzenie Webspotter jest podobne do Wappalyzer , ale ma kilka różnych funkcji. Obok każdej wymienionej technologii znajdują się linki do statystyk dotyczących technologii, lista witryn korzystających z tej technologii oraz oficjalna strona internetowa tej technologii. 

Jeszcze bardziej intrygującą funkcją jest zdolność Webspottera do wyciągania z witryny kontaktów e-mail, linków do mediów społecznościowych, analiz SEO^{(SEO analytics)} i innych informacji o firmie. Chociaż nie mówi to o tym, jak powstaje strona, może być przydatna do celów marketingu online, a nawet poszukiwania pracy.

Wykrywacz motywów WordPress^{(WordPress Theme Detector)}

Może nie jesteś tak zainteresowany tworzeniem stron internetowych, ale tworzysz witrynę WordPress i chcesz uwzględnić funkcje, które widziałeś gdzie indziej. Pobierz wtyczkę WordPress Theme Detector Chrome^{(Download the WordPress Theme Detector Chrome browser plugin)} . 

Wykrywacz motywów WordPress^{(WordPress Theme Detector)} nie tylko poinformuje Cię, jakiego motywu WordPress^{(WordPress theme)} używa witryna, ale także poinformuje Cię, jakich wtyczek WordPress^{(WordPress plugins)} używa. Pokazuje również, kto utworzył motyw lub wtyczkę, i zawiera link do miejsca, w którym możesz je pobrać. To sprawia, że ​​tak łatwo jest włączać do witryny WordPress elementy , które podziwiałeś w innych witrynach.

Dowiedz się, jak działają strony internetowe

Tak, tak łatwo jest zanurzyć się w dowolnej witrynie w Internecie^(Internet) i zobaczyć, z czego jest zrobiona. Spróbuj użyć dwóch lub więcej z tych narzędzi, ponieważ niektórzy wykryją rzeczy, których inni nie. Większość tego, co widzisz w witrynie, jest w rzeczywistości renderowana na Twoim komputerze. To sprawia, że ​​łatwo na to patrzeć. Jest to również powód, dla którego musisz zadbać o to , aby Twoja witryna była jak najbezpieczniejsza^{(make your website as secure as possible)} . Ciesz się głębokim nurkowaniem i daj nam znać, co znajdziesz lub zbudujesz.

How Websites Work: Learn What’s Under the Hood

Manу teсhnologies go into building websites. 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

• Jaka jest najlepsza usługa połączeń konferencyjnych — porównanie najlepszych aplikacji

• Automatycznie przenoś, usuwaj lub kopiuj pliki w systemie Windows

• Jak sprawdzić, czy temperatura procesora jest zbyt wysoka?

• 5 najlepszych aplikacji do filtrowania światła niebieskiego dla systemów Windows, Mac i Linux

• Jak używać Menedżera pakietów systemu Windows do instalowania programów systemu Windows

• Jak usunąć zduplikowane zdjęcia cyfrowe na komputerze z systemem Windows?

• Najlepsi edytorzy przecen: wszystkie platformy i online

• Autouzupełnianie Google Chrome: kompletny przewodnik

• 11 najlepszych darmowych programów do tworzenia zrzutów ekranu dla systemu Windows

• 5 narzędzi do konwersji plików BIN na obrazy ISO

• 7 najlepszych narzędzi do wycinania dla Chromebooka

• Parser e-maili Zapier: 3 kreatywne sposoby korzystania z niego

• Jak bez wysiłku zgrywać płyty DVD i Blu-Ray za pomocą MakeMKV

• Najlepsze narzędzia do dostrajania procesora, karty graficznej i pamięci RAM

• Najlepsze programy do dodania nowych funkcji do systemu Windows 10

• 9 sposobów na nagrywanie rozgrywki na komputerze

• 5 najlepszych programów do zarządzania dwoma monitorami

• 7 najlepszych narzędzi do kompresji i optymalizacji GIF

• Jak blokować witryny za pomocą bezpłatnego oprogramowania do kontroli rodzicielskiej?

• 10 najlepszych rozszerzeń prywatności dla Chrome (2022)