许多技术都用于构建网站。内容管理系统(Content management systems)、框架(frameworks)、不同的脚本和编程语言(different scripting and programming languages)、支付系统(payment systems)……各种各样的东西！
如果您对自己喜欢的网站的工作方式感到好奇，或者想看看网站是否使用了一些粗略的东西，本文将向您展示几种方法来深入了解并了解它是如何构建的。
查看网站的代码
如果您不是开发人员，或者刚刚起步，那么您将学习更好编程的秘诀。看看别人的代码。我们已经向您展示了如何使用 Chrome 的开发者工具(how to use Chrome’s Developer Tools)来做到这一点。
ChromeDevTools将帮助您查看网站的HTML、JavaScript和CSS代码，找出它们可能使用的资源，以及如何检查网站在浏览器中的加载性能。所有主要的网络浏览器都有一些可用的开发者工具版本。
内置(BuiltWith)
BuiltWith.com是一种专业级资源，可深入网站以查看他们使用的所有技术。目前，它们覆盖了超过 6.73 亿个网站并且还在不断增加。该网站背后的主要思想是帮助为软件销售人员创造潜在客户。
高级功能只能通过付费订阅获得，但任何人都可以访问BuiltWith.com，输入网站地址、技术名称或关键字，并获得详细的技术资料。注册(Sign)一个免费帐户，您每天可以进行五次详细查找。
自 1995 年以来，Netcraft 一直是 Web 开发人员的资源。Netcraft 的免费站点报告(Site Report)工具显示了他们超过 25 年的专业知识。它将技术报告与“谁拥有该网站(who owns the site)”背景报告相结合，因此您可以全面了解该网站。您将知道它的托管位置、所有者以及一些域历史记录。
Netcraft 站点报告(Netcraft Site Report)似乎允许无限制的查找。不过，仅在您真正需要时才使用它。这是一个免费资源，开发者社区希望看到它保持这种状态。
W3Techs 的站点信息工具的工作方式与其他工具略有不同。他们保留了一个信息数据库(database)，但仅限于已经通过该工具搜索过的网站。如果您正在检查以前未检查过的网站，它会立即抓取该网站。
提供的报告没有其他服务提供的那么深入，但仍然很有见地。您将了解站点使用的CMS、编程语言、Web 服务器和托管服务提供商。W3Techs还为(W3Techs)Firefox和Chrome提供浏览器扩展，因此您只需单击或点击即可查看网站。
分析仪(Wappalyzer)
如果您更喜欢使用浏览器插件来检查网站的技术，Wappalyzer有适用于Firefox、Chrome和Edge的插件。这些插件是免费的，易于使用，并以易于阅读的设计布局。点击报告中的任何技术都会带你去解释它，如果它找到你以前没见过的东西，那就太好了。
Wappalyzer提供了一项独特的功能，能够为网站创建警报。他们每天都会检查网站，如果他们发现有变化，会通过电子邮件发送给您。该警报将要求您使用Wappalyzer创建一个免费帐户，并每月花费 10 个积分。
但是您每个月可以免费获得 50 个积分，而提醒每 30 天只需 10 个积分。因此，如果您监控 5 个或更少的站点，Wappalyzer 警报基本上是免费的。
网络观察员(Webspotter)
除了Webspotter的一项服务外，其他所有服务都是付费服务，但这没关系。他们的免费Webspotter Chrome 扩展(Webspotter Chrome extension)弥补了这一点。Webspotter扩展类似于Wappalyzer ，(Webspotter)但(Wappalyzer)它有一些不同的功能。在列出的每项技术旁边，都有指向该技术统计数据的链接、使用该技术的网站列表以及该技术的官方网站。
一个更有趣的功能是 Webspotter 能够从网站中提取电子邮件联系人、社交媒体链接、SEO 分析(SEO analytics)和其他公司信息。虽然这并没有告诉您该网站是如何制作的，但它可能对在线营销目的甚至求职有用。
也许，您对 Web 开发不太感兴趣，但您正在构建一个WordPress网站，并希望包含您在其他地方看到的功能。下载 WordPress Theme Detector Chrome 浏览器插件(Download the WordPress Theme Detector Chrome browser plugin)。
WordPress 主题检测器(WordPress Theme Detector)不仅会告诉您网站正在使用什么WordPress 主题(WordPress theme)，还会告诉您它正在使用哪些WordPress 插件(WordPress plugins)。它还向您展示了谁创建了主题或插件，并提供了一个链接，您可以从哪里获得它们。这使得将元素合并到您在其他网站上欣赏的WordPress网站变得如此容易。(WordPress)
了解网站如何运作
是的，深入互联网(Internet)上的任何网站并查看它的构成非常容易。尝试使用这些工具中的两个或更多，因为有些工具会收集到其他工具没有的东西。您在网站上看到的大部分内容实际上都是在您的计算机上呈现的。这就是使它易于查看的原因。这也是您需要使您的网站尽可能安全的(make your website as secure as possible)原因。享受你的深潜，让我们知道你发现或建造了什么。
How Websites Work: Learn What’s Under the Hood
Many 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.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 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 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.
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.
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.
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.
