Veel technologieën gaan over het bouwen van websites. Contentmanagementsystemen^{(Content management systems)} , frameworks , verschillende script- en programmeertalen^{(different scripting and programming languages)} , betalingssystemen^{(payment systems)} … van alles!

Als je nieuwsgierig bent naar hoe je favoriete website werkt, of wilt zien of een site iets vaags gebruikt, laat dit artikel je verschillende manieren zien om onder de motorkap te kijken en te zien hoe het is gebouwd.

Bekijk de code van de website

Als u geen ontwikkelaar bent of net begint, staat u op het punt het geheim te leren van beter programmeren. Kijk naar de code van anderen. We hebben u laten zien hoe u de ontwikkelaarstools van Chrome kunt gebruiken^{(how to use Chrome’s Developer Tools)} om precies dat te doen. 

Met ChromeDevTools kunt u de ^{(ChromeDevTools)}HTML- , JavaScript- en CSS -code van een site bekijken , ontdekken welke bronnen ze gebruiken en hoe u de laadprestaties van een site in de browser kunt controleren. Alle belangrijke webbrowsers hebben een versie van de ontwikkelaarstools beschikbaar.

gebouwdMet^(BuiltWith)

BuiltWith.com is een hulpmiddel op professioneel niveau dat diep in sites gaat om alle technologieën te zien die ze gebruiken. Momenteel bestrijken ze meer dan 673 miljoen websites en dat is nog niet het geval. Het belangrijkste idee achter de site was om leads te genereren voor mensen in de softwareverkoop.

De geavanceerde functies zijn alleen beschikbaar via een betaald abonnement, maar iedereen kan naar BuiltWith.com gaan, een websiteadres, technologienaam of trefwoord invoeren en een gedetailleerd technologieprofiel krijgen. Meld^(Sign) u aan voor een gratis account en u kunt vijf gedetailleerde zoekopdrachten per dag doen.

Netcraft-siterapport^{(Netcraft Site Report)}

Netcraft is sinds 1995 een bron voor webontwikkelaars. Hun expertise gedurende 25 jaar blijkt uit de gratis Site Report -tool van Netcraft. Het combineert een technologierapport met een achtergrondrapport ' wie is de eigenaar van de site^{(who owns the site)} ', zodat u een grondig overzicht van de site krijgt. U weet waar het wordt gehost en wie de eigenaar is, plus wat domeingeschiedenis.

Het Netcraft Site Report lijkt onbeperkt opzoeken mogelijk te maken. Gebruik het echter alleen als je het echt nodig hebt. Het is een gratis hulpmiddel en de ontwikkelaarsgemeenschap zou graag zien dat dit zo blijft.

Informatie over W3Techs-sites^{(W3Techs’ Sites Info)}

De Sites Info-tool van W3Techs werkt een beetje anders dan de andere. Ze houden een database met informatie bij, maar alleen op sites die al met de tool zijn doorzocht. Als u een site controleert die nog niet eerder is gecontroleerd, wordt de site onmiddellijk gecrawld. 

Het verstrekte rapport is minder diepgaand dan andere services, maar nog steeds inzichtelijk. Je krijgt te zien welke CMS , programmeertalen, webserver en hostingprovider een site gebruikt. W3Techs biedt ook browserextensies voor Firefox en Chrome , zodat u sites met slechts een klik of tik kunt controleren.

Wappalyser^(Wappalyzer)

Als u liever een browserplug-in hebt om de technologieën van een site te controleren, heeft Wappalyzer plug- ins voor Firefox , Chrome en Edge . De plug-ins zijn gratis, gebruiksvriendelijk en hebben een gemakkelijk leesbaar ontwerp. Als u op een technologie in het rapport klikt, gaat u naar een uitleg ervan, wat geweldig is als er iets wordt gevonden dat u nog niet eerder hebt gezien. 

Wappalyzer biedt een unieke functie met de mogelijkheid om een ​​alert voor een website te creëren. Ze controleren de site dagelijks en e-mailen je als ze een wijziging detecteren. De waarschuwing vereist dat je een gratis account bij Wappalyzer aanmaakt^(Wappalyzer) en 10 credits per maand kost.

Maar je krijgt elke maand 50 credits gratis en een alert kost maar 10 credits per 30 dagen. Dus Wappalyzer Alerts zijn in principe gratis als je 5 of minder sites in de gaten houdt.

Webspotter

Op één na is de dienst van Webspotter een betaalde dienst, maar dat geeft niet. Hun gratis Webspotter Chrome-extensie^{(Webspotter Chrome extension)} maakt dat goed. De Webspotter- extensie is vergelijkbaar met Wappalyzer , maar heeft een paar verschillende functies. Naast elke vermelde technologie staan ​​links naar statistieken over de technologie, een lijst met websites die die technologie gebruiken en de officiële website voor de technologie. 

Een nog meer intrigerende functie is de mogelijkheid van Webspotter om e-mailcontacten, links naar sociale media, SEO-analyses^{(SEO analytics)} en andere bedrijfsinformatie uit een website te halen. Hoewel dat je niet vertelt hoe de site is gemaakt, kan het nuttig zijn voor online marketingdoeleinden of zelfs voor het zoeken naar een baan.

WordPress Thema Detector^{(WordPress Theme Detector)}

Misschien ben je niet zo geïnteresseerd in webontwikkeling, maar ben je bezig met het samenstellen van een WordPress - site en wil je functies toevoegen die je elders hebt gezien. Download de WordPress Theme Detector Chrome-browserplug-in^{(Download the WordPress Theme Detector Chrome browser plugin)} . 

De WordPress Theme Detector^{(WordPress Theme Detector)} vertelt je niet alleen welk WordPress-thema^{(WordPress theme)} een site gebruikt, maar hij vertelt je ook welke WordPress-plug-ins het gebruikt. Het laat ook zien wie het thema of de plug-in heeft gemaakt en geeft een link naar waar je ze kunt krijgen. Dat maakt het zo gemakkelijk om elementen in je WordPress- site op te nemen die je op andere sites hebt bewonderd.

Leer hoe websites werken

Ja, het is zo gemakkelijk om een ​​website op internet te bekijken en te zien waar deze van gemaakt is. Probeer twee of meer van deze tools te gebruiken, want sommige zullen dingen oppikken die anderen niet doen. Het meeste van wat u op een site ziet, wordt daadwerkelijk op uw computer weergegeven. Dat is wat het gemakkelijk maakt om naar te kijken. Het is ook de reden waarom u uw website zo veilig mogelijk moet maken^{(make your website as secure as possible)} . Geniet van je diepe duik en laat ons weten wat je vindt of bouwt.

How Websites Work: Learn What’s Under the Hood

Many technologies 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

• Wat is de beste conference call-service - de beste apps vergeleken?

• Automatisch bestanden verplaatsen, verwijderen of kopiëren in Windows

• Hoe u kunt controleren of uw CPU-temperatuur te hoog is?

• De 5 beste blauwlichtfilter-apps voor Windows, Mac en Linux

• Een Windows Package Manager gebruiken om Windows-programma's te installeren

• 4 geweldige tools om Windows Installer-pakketten te maken

• Beste hulpprogramma's voor het afstemmen van CPU, videokaart en RAM

• Hoe u uw dvd's en Blu-rays moeiteloos kunt rippen met MakeMKV

• Google Apps Script Editor: alles wat u moet weten om aan de slag te gaan

• Beste weerwidgets voor Windows 10/11

• Automatisch aanvullen van Google Chrome: een complete gids

• Hoe de Signal Desktop-app kan helpen uw privacy te beschermen

• De beste apps om internetgebruik te controleren

• 5 beste gratis wegwerp-e-mailaccounts

• 5 beste veilige APK-downloadsites voor Android-apps

• 5 beste softwareprogramma's om dubbele monitoren te beheren

• Hoe u dubbele digitale foto's op uw Windows-computer kunt verwijderen

• Gebruik een oude webcam om uw eigendom gratis te controleren

• Beste Markdown-editors: alle platforms en online

• 4 Beste Port Forwarding-software-apps en hoe ze te gebruiken