Számos technológia beépül a weboldalak létrehozásába. Tartalomkezelő rendszerek^{(Content management systems)} , keretrendszerek^(frameworks) , különböző szkript- és programozási nyelvek^{(different scripting and programming languages)} , fizetési rendszerek^{(payment systems)} …mindenféle dolog!

Ha kíváncsi, hogyan működik kedvenc webhelye, vagy szeretné látni, hogy egy webhely nem használ-e valami vázlatos elemet, ez a cikk bemutatja, hogyan nézzen be a motorháztető alá, és nézze meg, hogyan épül fel.

Tekintse meg a webhely kódját

Ha Ön nem fejlesztő, vagy csak most kezdi a munkát, hamarosan megtanulja a jobb programozás titkát. Nézd meg mások kódját. Megmutattuk, hogyan használhatja a Chrome fejlesztői eszközeit^{(how to use Chrome’s Developer Tools)} erre. 

A ChromeDevTools^{(ChromeDevTools)} segítségével megtekintheti egy webhely HTML- , JavaScript- és CSS -kódját, megtudhatja, milyen forrásokat használnak fel, valamint hogyan ellenőrizheti a webhely betöltési teljesítményét a böngészőben. Minden nagyobb böngészőben elérhető a fejlesztői eszközök valamelyik verziója.

Beépített^(BuiltWith)

A BuiltWith.com^{(BuiltWith.com)} egy professzionális szintű erőforrás, amely a webhelyek mélyére nyúlik, hogy megtekinthesse az általuk használt technológiákat. Jelenleg több mint 673 millió webhelyet fednek le, és ez a szám folyamatosan bővül. A webhely mögött meghúzódó fő gondolat az volt, hogy segítsen potenciális ügyfeleket generálni a szoftverértékesítésben részt vevő emberek számára.

A speciális funkciók csak fizetős előfizetéssel érhetők el, de bárki felkeresheti a BuiltWith.com webhelyet^{(BuiltWith.com)} , megadhatja a webhely címét, a technológia nevét vagy a kulcsszót, és részletes technológiai profilt kaphat. Regisztráljon^(Sign) egy ingyenes fiókot, és napi öt részletes keresést végezhet.

Netcraft webhelyjelentés^{(Netcraft Site Report)}

A Netcraft 1995 óta a webfejlesztők erőforrása. 25 éves szakértelmük megmutatkozik a Netcraft ingyenes Site Report eszközében. Egy technológiai jelentést kombinál egy „ ki a webhely tulajdonosa^{(who owns the site)} ” háttérjelentéssel, így alapos áttekintést kap a webhelyről. Tudni fogja, hol található, és ki a tulajdonosa, valamint néhány domain előzményt.

Úgy tűnik, hogy a Netcraft Site Report korlátlan keresést tesz lehetővé. Ennek ellenére csak akkor használja, ha valóban szüksége van rá. Ez egy ingyenes forrás, és a fejlesztői közösség szeretné, ha ez így is maradna.

A W3Techs webhelyeinek információi^{(W3Techs’ Sites Info)}

A W3Techs Sites Info eszköze kissé eltér a többitől. Adatbázist^(database) vezetnek , de csak azokon a webhelyeken, amelyeken már kerestek az eszközön keresztül. Ha olyan webhelyet keres, amelyet korábban nem ellenőriztek, akkor az azonnal feltérképezi a webhelyet. 

A benyújtott jelentés kevésbé mélyreható, mint a többi szolgáltatás, de mégis áttekinthető. Megtudhatja, hogy egy webhely melyik CMS -t , programozási nyelveket, webszervert és tárhelyszolgáltatót használja. A W3Techs^(W3Techs) böngészőbővítményeket is biztosít a Firefoxhoz^(Firefox) és a Chrome -hoz , így egyetlen kattintással vagy érintéssel ellenőrizheti a webhelyeket.

Wappalyzer

Ha inkább böngészőbővítményt szeretne használni a webhely technológiáinak ellenőrzéséhez, a Wappalyzer rendelkezik beépülő modulokkal a Firefox , a Chrome és az Edge számára . A beépülő modulok ingyenesek, könnyen használhatók, és könnyen olvasható kialakításúak. Ha rákattint a jelentésben szereplő bármely technológiára, megjelenik annak magyarázata, ami nagyszerű, ha olyasmit talál, amit még nem látott. 

A Wappalyzer^(Wappalyzer) egyedülálló funkciót kínál, amely képes riasztást létrehozni egy webhelyhez. Naponta ellenőrzik a webhelyet, és e-mailt küldenek Önnek, ha változást észlelnek. A riasztáshoz létre kell hoznia egy ingyenes fiókot a Wappalyzerrel^(Wappalyzer) , és havonta 10 kreditet kell fizetnie.

De minden hónapban 50 kreditet kap ingyen, és egy figyelmeztetés csak 10 kreditbe kerül 30 naponként. Tehát a Wappalyzer Alerts alapvetően ingyenes, ha 5 vagy kevesebb webhelyet figyel.

Webspotter

A Webspotter egy kivételével minden szolgáltatás fizetős, de ez rendben van. Ingyenes Webspotter Chrome-bővítményük^{(Webspotter Chrome extension)} pótolja ezt. A Webspotter bővítmény hasonló a Wappalyzerhez^(Wappalyzer) , de van néhány eltérő funkciója. Az egyes felsorolt ​​technológiák mellett hivatkozások találhatók a technológiával kapcsolatos statisztikákra, az adott technológiát használó webhelyek listája, valamint a technológia hivatalos webhelye. 

Még érdekesebb funkció a Webspotter azon képessége, hogy e-mail-címeket, közösségimédia-hivatkozásokat, SEO-elemzést^{(SEO analytics)} és egyéb vállalati információkat húzzon ki egy webhelyről. Bár ez nem árulja el, hogyan készült az oldal, hasznos lehet online marketing célokra vagy akár álláskereséshez.

WordPress téma detektor^{(WordPress Theme Detector)}

Lehet, hogy nem annyira a webfejlesztés érdekli, de éppen egy WordPress -webhelyet hoz létre, és szeretné beépíteni a máshol látott funkciókat. Töltse le a WordPress Theme Detector Chrome böngészőbővítményt^{(Download the WordPress Theme Detector Chrome browser plugin)} . 

A WordPress Theme Detector^{(WordPress Theme Detector)} nemcsak azt mutatja meg, hogy egy webhely milyen WordPress-témát^{(WordPress theme)} használ, hanem azt is, hogy milyen WordPress-bővítményeket^{(WordPress plugins)} használ. Azt is megmutatja, hogy ki hozta létre a témát vagy a beépülő modult, és egy linket is tartalmaz, ahol megtalálhatja azokat. Így olyan egyszerűen beépíthet olyan elemeket a WordPress -webhelyébe, amelyeket más webhelyeken is megcsodált.

Ismerje meg, hogyan működnek a webhelyek

Igen, ilyen egyszerű belemerülni az internet bármely webhelyébe, és megnézni, miből áll. Próbáljon meg kettő vagy több ilyen eszközt használni, mivel egyesek olyan dolgokat is felvesznek, amelyeket mások nem. A legtöbb, amit egy webhelyen lát, az valójában a számítógépén jelenik meg. Ez az, ami megkönnyíti a rálátást. Ez az oka annak is, hogy webhelyét a lehető legbiztonságosabbá^{(make your website as secure as possible)} kell tennie . Élvezze a mély merülést, és tudassa velünk, mit talált vagy épít.

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

• Mi a legjobb konferenciahívás-szolgáltatás – A legjobb alkalmazások összehasonlítása

• Fájlok automatikus áthelyezése, törlése vagy másolása a Windows rendszerben

• Hogyan ellenőrizhető, hogy a CPU hőmérséklete túl magas-e

• Az 5 legjobb kék fényszűrő alkalmazás Windowsra, Macre és Linuxra

• A Windows csomagkezelő használata Windows-programok telepítéséhez

• A legjobb CPU, videokártya és RAM hangoló segédprogramok

• 9 módszer a játékmenet rögzítésére a számítógépen

• Működik a Microsoft Windows fájl-helyreállítása? Teszteltük.

• 11 legjobb ingyenes képernyőképes szoftver Windowshoz

• Google Apps Script Editor: Minden, amit tudnia kell az induláshoz

• A legjobb alkalmazások az internethasználat figyelésére

• 5 hordozható alkalmazás, amelyet mindenképpen szeretnél az USB-meghajtón

• A 7 legjobb GIF-tömörítő és optimalizáló eszköz

• A 4 legjobb porttovábbítási szoftveralkalmazás és használatuk

• Mi az a chatbot, és hogyan kell használni a webhelyén

• 7 legjobb bloatware-eltávolító eszköz Windowshoz

• Halott pixel tesztek a monitoron elakadt pixel kijavításához

• A Microsoft Planner oktatóanyaga: Minden, amit tudnod kell

• 5 legjobb ingyenes eldobható e-mail fiók

• 5 legjobb biztonságos APK-letöltő webhely Android-alkalmazásokhoz