Mange teknologier går ind i at bygge hjemmesider. Indholdsstyringssystemer^{(Content management systems)} , rammer^(frameworks) , forskellige script- og programmeringssprog^{(different scripting and programming languages)} , betalingssystemer^{(payment systems)} … alle mulige ting!

Hvis du er nysgerrig efter, hvordan dit yndlingswebsted fungerer, eller ønsker at se, om et websted bruger noget skitseagtigt, vil denne artikel vise dig flere måder at kigge under motorhjelmen og se, hvordan den er bygget op.

Se hjemmesidens kode

Hvis du ikke er udvikler eller lige er startet, er du ved at lære hemmeligheden bag bedre programmering. Se på andres kode. Vi har vist dig, hvordan du bruger Chromes udviklerværktøjer^{(how to use Chrome’s Developer Tools)} til netop det. 

ChromeDevTools hjælper dig med at se et websteds HTML , JavaScript og CSS -kode, finde ud af, hvilke kilder de bruger, samt hvordan du kontrollerer et websteds indlæsningsydelse i browseren. Alle større webbrowsere har en eller anden version af udviklerens værktøjer til rådighed.

Bygget Med^(BuiltWith)

BuiltWith.com er en ressource på professionelt niveau, der går dybt ind på websteder for at se alle de teknologier, de bruger. I øjeblikket dækker de over 673 millioner websteder og tæller. Hovedidéen bag siden var at hjælpe med at generere kundeemner til folk i softwaresalg.

De avancerede funktioner er kun tilgængelige via et betalt abonnement, men alle kan gå til BuiltWith.com , indtaste en hjemmesideadresse, teknologinavn eller søgeord og få en detaljeret teknologiprofil. Tilmeld^(Sign) dig en gratis konto, og du kan lave fem detaljerede opslag om dagen.

Netcraft webstedsrapport^{(Netcraft Site Report)}

Netcraft har været en ressource for webudviklere siden 1995. Deres ekspertise gennem 25 år viser sig i Netcrafts gratis Site Report - værktøj. Den kombinerer en teknologirapport med en " hvem ejer siden^{(who owns the site)} " baggrundsrapport, så du får et grundigt overblik over siden. Du ved, hvor det er hostet, og hvem der ejer det, plus noget domænehistorik.

Netcraft Site Report^{(Netcraft Site Report)} ser ud til at tillade ubegrænsede opslag. Brug det stadig kun, når du virkelig har brug for det. Det er en gratis ressource, og udviklerfællesskabet vil gerne se det forblive på den måde.

W3Techs' webstedsoplysninger^{(W3Techs’ Sites Info)}

W3Techs' Sites Info-værktøj fungerer lidt anderledes end de andre. De holder en database med information, men kun på websteder, der allerede er søgt gennem værktøjet. Hvis du tjekker et websted, der ikke er blevet tjekket før, vil det gennemgå webstedet med det samme. 

Den leverede rapport er mindre dybdegående end andre tjenester leverer, men stadig indsigtsfuld. Du får oplyst, hvilket CMS , programmeringssprog, webserver og hostingudbyder et websted bruger. W3Techs leverer også browserudvidelser til Firefox og Chrome , så du kan tjekke websteder med blot et klik eller et tryk.

Wappalyzer

Hvis du foretrækker at have et browserplugin til at tjekke et websteds teknologier, har Wappalyzer plugins til Firefox , Chrome og Edge . Plugins er gratis, nemme at bruge og er lagt i et letlæst design. Hvis du klikker på en hvilken som helst teknologi i rapporten, kommer du til en forklaring på den, hvilket er fantastisk, hvis den finder noget, du ikke har set før. 

Wappalyzer tilbyder en unik funktion med mulighed for at oprette en advarsel til et websted. De tjekker siden dagligt og e-mailer dig, hvis de opdager en ændring. Advarslen kræver, at du opretter en gratis konto hos Wappalyzer og koster 10 kreditter om måneden.

Men du får 50 kreditter gratis hver måned, og en advarsel koster kun 10 kreditter for hver 30. dag. Så Wappalyzer Alerts er stort set gratis, hvis du overvåger 5 eller færre websteder.

Webspotter

Alle på nær én tjeneste fra Webspotter er en betalt tjeneste, men det er okay. Deres gratis Webspotter Chrome-udvidelse^{(Webspotter Chrome extension)} gør op for det. Webspotter -^(Webspotter) udvidelsen ligner Wappalyzer , men den har et par forskellige funktioner. Ved siden af ​​hver anført teknologi er der links til statistik om teknologien, en liste over websteder, der bruger denne teknologi, og den officielle hjemmeside for teknologien. 

En endnu mere spændende funktion er Webspotters evne til at trække e-mail-kontakter, links til sociale medier, SEO-analyser^{(SEO analytics)} og andre virksomhedsoplysninger ud af et websted. Selvom det ikke fortæller dig om, hvordan webstedet er lavet, kan det være nyttigt til online marketingformål eller endda jobsøgning.

WordPress temadetektor^{(WordPress Theme Detector)}

Måske er du ikke så interesseret i webudvikling, men du er ved at sammensætte et WordPress - websted og vil gerne inkludere funktioner, du har set andre steder. Download WordPress Theme Detector Chrome browser plugin^{(Download the WordPress Theme Detector Chrome browser plugin)} . 

Ikke kun vil WordPress Theme Detector fortælle dig, hvilket WordPress-tema^{(WordPress theme)} et websted bruger, men det vil også fortælle dig, hvilke WordPress-plugins det bruger. Det viser dig også, hvem der har oprettet temaet eller pluginnet, og giver et link til, hvor du kan få dem. Det gør det så nemt at inkorporere elementer i dit WordPress- websted, som du har beundret på andre websteder.

Lær, hvordan websteder fungerer

Ja, det er så nemt at dykke ned i enhver hjemmeside på internettet^(Internet) og se, hvad den er lavet af. Prøv at bruge to eller flere af disse værktøjer, da nogle vil opfange ting, som andre ikke gør. Det meste af det, du ser på et websted, gengives faktisk på din computer. Det er det, der gør det nemt at se på. Det er også grunden til, at du skal gøre dit websted så sikkert som muligt^{(make your website as secure as possible)} . Nyd din dybdedykning og fortæl os, hvad du finder eller bygger.

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

• Hvad er den bedste konferenceopkaldstjeneste – de bedste apps sammenlignet

• Flyt, slet eller kopier automatisk filer i Windows

• Sådan kontrollerer du, om din CPU-temperatur er for høj

• De 5 bedste Blue Light Filter Apps til Windows, Mac og Linux

• Sådan bruger du en Windows Package Manager til at installere Windows-programmer

• 7 bedste værktøjer til fjernelse af bloatware til Windows

• Virker Microsofts Windows-filgendannelse? Vi testede det.

• Hvad er Microsoft Power Automate og gratis skabeloner til download

• 5 Windows-alternativer til Linux sudo-kommandoen

• 5 bærbare apps, du helt sikkert gerne vil have på din USB-stick

• 5 bedste IP-scannerværktøjer til Windows, Mac, iOS og Android

• Sådan ripper du dine dvd'er og Blu-rays nemt med MakeMKV

• 7 måder at åbne en MDB-fil uden Microsoft Access

• Brug HP Print and Scan Doctor til at løse almindelige printerproblemer

• Sådan luges dublerede digitale fotos ud på din Windows-computer

• Google Apps Script Editor: Alt hvad du behøver at vide for at komme i gang

• 5 kommandoprompttricks til at gøre CMD mere interessant

• Hvordan Signal Desktop-appen kan hjælpe med at beskytte dit privatliv

• 5 værktøjer til at konvertere BIN-filer til ISO-billeder

• 7 bedste klippeværktøjer til Chromebook