بسیاری از فناوری ها وارد ساخت وب سایت می شوند. سیستم‌های مدیریت محتوا^{(Content management systems)} ، چارچوب‌ها^(frameworks) ، زبان‌های برنامه‌نویسی و برنامه‌نویسی مختلف^{(different scripting and programming languages)} ، سیستم‌های پرداخت^{(payment systems)} … همه چیز!

اگر کنجکاو هستید که وب‌سایت مورد علاقه‌تان چگونه کار می‌کند، یا می‌خواهید ببینید که آیا سایتی از چیزی کلی استفاده می‌کند یا خیر، این مقاله راه‌های مختلفی را به شما نشان می‌دهد تا به زیر کاپوت نگاه کنید و ببینید که چگونه ساخته شده است.

کد وب سایت را مشاهده کنید

اگر توسعه‌دهنده نیستید، یا تازه شروع به کار کرده‌اید، در آستانه یادگیری راز برنامه‌نویسی بهتر هستید. به کد دیگران نگاه کنید. ما به شما نشان داده‌ایم که چگونه از ابزارهای توسعه‌دهنده کروم^{(how to use Chrome’s Developer Tools)} برای انجام این کار استفاده کنید. 

ChromeDevTools به شما کمک می‌کند تا کدهای HTML^(HTML) ، جاوا اسکریپت^(JavaScript) و CSS یک سایت را مشاهده کنید، ببینید از چه منابعی ممکن است استفاده کنند، و همچنین نحوه بررسی عملکرد بارگیری سایت در مرورگر. همه مرورگرهای وب اصلی نسخه ای از ابزارهای توسعه دهنده را در دسترس دارند.

ساخته شده با^(BuiltWith)

BuiltWith.com یک منبع در سطح حرفه ای است که به اعماق سایت ها می رود تا تمام فناوری هایی را که استفاده می کنند مشاهده کند. در حال حاضر، آنها بیش از 673 میلیون وب سایت را پوشش می دهند. ایده اصلی این سایت کمک به ایجاد سرنخ برای افراد در فروش نرم افزار بود.

ویژگی‌های پیشرفته فقط از طریق اشتراک پولی در دسترس هستند، اما هر کسی می‌تواند به BuiltWith.com مراجعه کند، آدرس وب‌سایت، نام فناوری یا کلمه کلیدی را وارد کند و مشخصات فنی دقیقی دریافت کند. برای یک حساب کاربری رایگان ثبت نام^(Sign) کنید و می توانید پنج جستجوی دقیق در روز انجام دهید.

گزارش سایت نت کرافت^{(Netcraft Site Report)}

نت کرافت از سال 1995 منبعی برای توسعه دهندگان وب بوده است. تخصص آنها در بیش از 25 سال در ابزار رایگان گزارش سایت^{(Site Report)} Netcraft نشان داده شده است. این گزارش یک گزارش فناوری را با گزارش پس‌زمینه « مالک سایت^{(who owns the site)} » ترکیب می‌کند ، بنابراین یک نمای کلی از سایت دریافت می‌کنید. می‌دانید کجا میزبانی می‌شود، و مالک آن چه کسی است، به‌علاوه مقداری سابقه دامنه.

به نظر می رسد گزارش سایت Netcraft^{(Netcraft Site Report)} امکان جستجوی نامحدود را می دهد. با این حال، تنها زمانی از آن استفاده کنید که واقعاً به آن نیاز دارید. این یک منبع رایگان است و جامعه توسعه دهندگان مایلند که آن را به همین شکل ببینند.

اطلاعات سایت های W3Techs^{(W3Techs’ Sites Info)}

ابزار اطلاعات سایت های W3Techs کمی متفاوت از بقیه کار می کند. آنها پایگاه داده^(database) ای از اطلاعات را نگه می دارند، اما فقط در سایت هایی که قبلاً از طریق ابزار جستجو شده اند. اگر در حال بررسی سایتی هستید که قبلاً بررسی نشده است، فوراً سایت را بررسی می کند. 

گزارش ارائه شده عمیق تر از سایر خدمات ارائه شده است، اما همچنان روشنگر است. شما دریافت خواهید کرد که یک سایت از کدام CMS ، زبان های برنامه نویسی، وب سرور و ارائه دهنده میزبانی استفاده می کند. W3Techs همچنین افزونه‌های مرورگر را برای فایرفاکس^(Firefox) و کروم^(Chrome) ارائه می‌کند تا بتوانید سایت‌ها را تنها با یک کلیک یا یک ضربه بررسی کنید.

واپلایزر^(Wappalyzer)

اگر ترجیح می‌دهید یک افزونه مرورگر برای بررسی فناوری‌های سایت داشته باشید، Wappalyzer افزونه‌هایی برای Firefox ، Chrome و Edge دارد. پلاگین ها رایگان، آسان برای استفاده، و در طراحی آسان برای خواندن گذاشته شده است. با کلیک بر روی هر فناوری موجود در گزارش، به توضیحی در مورد آن خواهید رسید، که اگر چیزی را پیدا کند که قبلاً ندیده اید، عالی است. 

Wappalyzer یک ویژگی منحصر به فرد با قابلیت ایجاد هشدار برای یک وب سایت ارائه می دهد. آنها هر روز سایت را چک می کنند و اگر تغییری را تشخیص دهند به شما ایمیل می زنند. هشدار از شما می خواهد که یک حساب کاربری رایگان با Wappalyzer ایجاد کنید و 10 اعتبار در ماه هزینه کنید.

اما شما هر ماه 50 اعتبار رایگان دریافت می کنید و یک هشدار فقط 10 اعتبار برای هر 30 روز هزینه دارد. بنابراین اگر 5 سایت یا کمتر را زیر نظر دارید، Wappalyzer Alerts اساسا رایگان است.

جستجوگر وب^(Webspotter)

همه خدمات Webspotter به جز یک سرویس پولی هستند، اما اشکالی ندارد. افزونه رایگان Webspotter Chrome^{(Webspotter Chrome extension)} آنها را جبران می کند. پسوند Webspotter شبیه به Wappalyzer است، اما دارای چند ویژگی متفاوت است. در کنار هر فناوری فهرست شده، پیوندهایی به آمار مربوط به این فناوری، فهرستی از وب‌سایت‌هایی که از آن فناوری استفاده می‌کنند و وب‌سایت رسمی این فناوری وجود دارد. 

یکی از ویژگی‌های جذاب‌تر، توانایی Webspotter برای بیرون کشیدن مخاطبین ایمیل، پیوندهای رسانه‌های اجتماعی، تجزیه و تحلیل SEO^{(SEO analytics)} و سایر اطلاعات شرکت از یک وب‌سایت است. اگرچه این به شما در مورد نحوه ساخت سایت نمی گوید، اما می تواند برای اهداف بازاریابی آنلاین یا حتی جستجوی شغل مفید باشد.

آشکارساز تم وردپرس^{(WordPress Theme Detector)}

شاید، شما چندان علاقه ای به توسعه وب ندارید، اما در حال ایجاد یک سایت وردپرسی^(WordPress) هستید و دوست دارید ویژگی هایی را که در جاهای دیگر دیده اید در آن قرار دهید. افزونه وردپرس Theme Detector مرورگر کروم را دانلود کنید^{(Download the WordPress Theme Detector Chrome browser plugin)} . 

آشکارساز^{(WordPress Theme Detector)} قالب وردپرس نه تنها به شما می گوید که یک سایت از چه قالب وردپرسی^{(WordPress theme)} استفاده می کند، بلکه به شما می گوید از چه افزونه های وردپرس^{(WordPress plugins)} استفاده می کند. همچنین به شما نشان می دهد که چه کسی تم یا افزونه را ایجاد کرده است و پیوندی به جایی که می توانید آنها را دریافت کنید ارائه می دهد. این باعث می‌شود تا عناصری را که در سایت‌های دیگر تحسین کرده‌اید در سایت وردپرس خود بگنجانید.^(WordPress)

نحوه کار وب سایت ها را بیاموزید

بله، به راحتی می توان در هر وب سایتی در اینترنت^(Internet) فرو رفت و دید از چه چیزی ساخته شده است. سعی کنید از دو یا چند مورد از این ابزارها استفاده کنید، زیرا برخی چیزهایی را انتخاب می کنند که دیگران نمی کنند. بیشتر چیزهایی که در یک سایت می بینید در واقع در رایانه شما رندر شده است. این چیزی است که نگاه کردن به آن را آسان می کند. همچنین به همین دلیل است که شما باید وب سایت خود را تا حد امکان امن کنید^{(make your website as secure as possible)} . از غواصی عمیق خود لذت ببرید و به ما اطلاع دهید که چه چیزی پیدا می کنید یا می سازید.

How Websites Work: Learn What’s Under the Hood

Many technologies go into building wеbsites. 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

• بهترین سرویس تماس کنفرانس چیست – بهترین برنامه ها در مقایسه

• انتقال، حذف یا کپی خودکار فایل ها در ویندوز

• چگونه بررسی کنیم که دمای CPU شما خیلی زیاد است یا خیر

• 5 بهترین برنامه فیلتر نور آبی برای ویندوز، مک و لینوکس

• نحوه استفاده از Windows Package Manager برای نصب برنامه های ویندوز

• 5 بهترین حساب های ایمیل یکبار مصرف رایگان

• 7 بهترین ابزار حذف Bloatware برای ویندوز

• 5 ابزار برای تبدیل فایل های BIN به تصاویر ISO

• چگونه DVD و Blu-Ray خود را بدون دردسر با MakeMKV پاره کنید

• چگونه برنامه دسکتاپ سیگنال می تواند به محافظت از حریم خصوصی شما کمک کند

• بهترین ویرایشگرهای Markdown: همه پلتفرم ها و آنلاین

• Microsoft Power Automate و قالب های رایگان برای دانلود چیست؟

• نحوه مسدود کردن سایت ها با نرم افزار رایگان کنترل والدین

• 7 بهترین ابزار Snipping برای Chromebook

• 5 بهترین برنامه نرم افزاری برای مدیریت دو مانیتور

• HDG توضیح می دهد: Markdown چیست و چه اصولی باید بدانم؟

• 4 ابزار عالی برای ایجاد بسته های Windows Installer

• 10 بهترین برنامه افزودنی حریم خصوصی برای Chrome (2022)

• 5 بهترین افزونه حریم خصوصی فایرفاکس برای ایمنی آنلاین

• بهترین ابزارک های آب و هوا برای ویندوز 10/11