Många tekniker används för att bygga webbplatser. Innehållshanteringssystem^{(Content management systems)} , ramverk^(frameworks) , olika skript- och programmeringsspråk^{(different scripting and programming languages)} , betalningssystem^{(payment systems)} ... alla möjliga saker!

Om du är nyfiken på hur din favoritwebbplats fungerar, eller vill se om en webbplats använder något skissartat, kommer den här artikeln att visa dig flera sätt att titta under huven och se hur den är byggd.

Se webbplatsens kod

Om du inte är en utvecklare, eller precis har börjat, är du på väg att lära dig hemligheten bakom bättre programmering. Titta på andras kod. Vi har visat dig hur du använder Chromes utvecklarverktyg^{(how to use Chrome’s Developer Tools)} för att göra just det. 

ChromeDevTools hjälper dig att visa en webbplatss HTML , JavaScript och CSS -kod, ta reda på vilka källor de kan använda, samt hur du kontrollerar en webbplatss laddningsprestanda i webbläsaren. Alla större webbläsare har någon version av utvecklarens verktyg tillgängliga.

Byggd Med^(BuiltWith)

BuiltWith.com är en resurs på professionell nivå som går djupt in på webbplatser för att se all teknik de använder. För närvarande täcker de över 673 miljoner webbplatser och allt fler. Huvudidén bakom sajten var att hjälpa till att generera leads för personer inom mjukvaruförsäljning.

De avancerade funktionerna är endast tillgängliga via ett betalabonnemang, men vem som helst kan gå till BuiltWith.com , ange en webbadress, tekniknamn eller nyckelord och få en detaljerad teknikprofil. Registrera^(Sign) dig för ett gratis konto så kan du göra fem detaljerade sökningar om dagen.

Netcraft webbplatsrapport^{(Netcraft Site Report)}

Netcraft har varit en resurs för webbutvecklare sedan 1995. Deras expertis under 25 år visar sig i Netcrafts kostnadsfria webbplatsrapportverktyg^{(Site Report)} . Den kombinerar en teknikrapport med en bakgrundsrapport för " vem äger sajten^{(who owns the site)} ", så att du får en grundlig överblick över sajten. Du vet var den finns och vem som äger den, plus lite domänhistorik.

Netcraft Site Report^{(Netcraft Site Report)} verkar tillåta obegränsade uppslagningar. Ändå, använd den bara när du verkligen behöver den. Det är en gratis resurs och utvecklargemenskapen skulle vilja se att det förblir så.

W3Techs webbplatsinformation^{(W3Techs’ Sites Info)}

W3Techs Sites Info-verktyg fungerar lite annorlunda än de andra. De håller en databas^(database) med information, men bara på webbplatser som redan har sökts igenom verktyget. Om du tittar på en webbplats som inte har kontrollerats tidigare kommer den att genomsöka webbplatsen direkt. 

Rapporten som tillhandahålls är mindre djupgående än andra tjänster tillhandahåller, men ändå insiktsfull. Du får reda på vilket CMS , programmeringsspråk, webbserver och värdleverantör en webbplats använder. W3Techs tillhandahåller även webbläsartillägg för Firefox och Chrome så att du kan kolla webbplatser med bara ett klick eller ett tryck.

Wappalyzer

Om du föredrar att ha en webbläsarplugin för att kontrollera en webbplatss teknik, har Wappalyzer plugins för Firefox , Chrome och Edge . Plugins är gratis, lätta att använda och är utformade i en lättläst design. Om du klickar på någon teknik i rapporten kommer du till en förklaring av den, vilket är bra om den hittar något du inte har sett tidigare. 

Wappalyzer erbjuder en unik funktion med möjligheten att skapa en varning för en webbplats. De kollar webbplatsen dagligen och mailar dig om de upptäcker en förändring. Varningen kräver att du skapar ett gratis konto hos Wappalyzer och kostar 10 krediter per månad.

Men du får 50 krediter gratis varje månad och en varning kostar bara 10 krediter för var 30:e dag. Så Wappalyzer Alerts är i princip gratis om du övervakar 5 eller färre webbplatser.

Webspotter

Alla utom en tjänst hos Webspotter är en betaltjänst, men det är okej. Deras gratis Webspotter Chrome-tillägg kompenserar^{(Webspotter Chrome extension)} för det. Webspotter -^(Webspotter) tillägget liknar Wappalyzer , men det har några olika funktioner. Bredvid varje listad teknik finns länkar till statistik om tekniken, en lista över webbplatser som använder den tekniken och den officiella webbplatsen för tekniken. 

En ännu mer spännande funktion är Webspotters förmåga att dra e-postkontakter, länkar till sociala medier, SEO-analyser^{(SEO analytics)} och annan företagsinformation från en webbplats. Även om det inte berättar om hur sajten är gjord, kan den vara användbar för marknadsföring på nätet eller till och med jobbsökande.

WordPress temadetektor^{(WordPress Theme Detector)}

Du kanske inte är så intresserad av webbutveckling men du håller på att skapa en WordPress- webbplats och skulle vilja inkludera funktioner som du har sett någon annanstans. Ladda ner WordPress Theme Detector Chrome webbläsarplugin^{(Download the WordPress Theme Detector Chrome browser plugin)} . 

Inte bara kommer WordPress Theme Detector att berätta vilket WordPress-tema^{(WordPress theme)} en webbplats använder, utan det kommer också att berätta vilka WordPress-plugins den använder. Den visar dig också vem som skapade temat eller plugin-programmet och ger en länk till var du kan få tag på dem. Det gör det så enkelt att infoga element i din WordPress- webbplats som du har beundrat på andra webbplatser.

Lär dig hur webbplatser fungerar

Ja, det är så enkelt att dyka in på vilken webbplats som helst på Internet och se vad den är gjord av. Försök att använda två eller flera av dessa verktyg, eftersom vissa kommer att ta upp saker som andra inte gör. Det mesta av det du ser på en webbplats renderas faktiskt på din dator. Det är det som gör det lätt att titta på. Det är också anledningen till att du måste göra din webbplats så säker som möjligt^{(make your website as secure as possible)} . Njut av din djupdykning och låt oss veta vad du hittar eller bygger.

How Websites Work: Learn What’s Under the Hood

Many technolоgies 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

• Vad är den bästa konferenssamtalstjänsten – de bästa apparna jämfört

• Flytta, ta bort eller kopiera filer automatiskt i Windows

• Så här kontrollerar du om din CPU-temperatur är för hög

• De 5 bästa blåljusfilterapparna för Windows, Mac och Linux

• Hur man använder en Windows Package Manager för att installera Windows-program

• Hur man blockerar webbplatser med gratis programvara för föräldrakontroll

• De 7 bästa klippverktygen för Chromebook

• De 7 bästa verktygen för borttagning av bloatware för Windows

• 5 bärbara appar du definitivt vill ha på ditt USB-minne

• Hur Signal Desktop-appen kan hjälpa till att skydda din integritet

• Bästa väderwidgetarna för Windows 10/11

• 5 bästa gratis engångs-e-postkonton

• Vad är en chatbot och hur man använder en på din webbplats

• 5 kommandotolktrick för att göra CMD mer intressant

• Vad är Microsoft Power Automate och gratis mallar att ladda ner

• HDG förklarar: Vad är Markdown och vad är grunderna jag borde veta?

• Google Apps Script Editor: Allt du behöver veta för att komma igång

• Hur du enkelt ripper dina DVD-skivor och Blu-rays med MakeMKV

• 11 bästa gratis skärmdumpsprogramvara för Windows

• HDG förklarar: Vad är SQL, T-SQL, MSSQL, PL/SQL och MySQL?