เทคโนโลยีจำนวนมากเข้าสู่การสร้างเว็บไซต์ ระบบ การจัดการเนื้อหา^{(Content management systems)}เฟรมเวิ^(frameworks)ร์กภาษาสคริปต์และภาษาโปรแกรมต่างๆ^{(different scripting and programming languages)} ระบบ การชำระเงิน^{(payment systems)} ... ทุกประเภท!

หากคุณสงสัยว่าเว็บไซต์โปรดของคุณทำงานอย่างไร หรือต้องการดูว่าเว็บไซต์กำลังใช้สิ่งคร่าวๆ หรือไม่ บทความนี้จะแสดงให้คุณเห็นหลายวิธีในการมองใต้ประทุนและดูว่าเว็บไซต์สร้างขึ้นอย่างไร

ดูรหัสของเว็บไซต์

หากคุณไม่ใช่นักพัฒนาหรือเพิ่งเริ่มต้น คุณกำลังเรียนรู้เคล็ดลับในการเขียนโปรแกรมให้ดีขึ้น ดูรหัสของคนอื่น เราได้แสดงให้คุณเห็นถึงวิธีการใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome^{(how to use Chrome’s Developer Tools)}เพื่อดำเนินการดังกล่าว 

ChromeDevToolsจะช่วยคุณดูโค้ด HTML^(HTML) , JavaScriptและCSS ของไซต์ ค้นหาแหล่งที่มาที่อาจใช้ ตลอดจนวิธีตรวจสอบประสิทธิภาพการโหลดของไซต์ในเบราว์เซอร์ เว็บเบราว์เซอร์หลักๆ ทั้งหมดมีเครื่องมือสำหรับนักพัฒนาเวอร์ชันบางเวอร์ชัน

สร้างด้วย^(BuiltWith)

BuiltWith.comเป็นแหล่งข้อมูลระดับมืออาชีพที่เจาะลึกเข้าไปในไซต์เพื่อดูเทคโนโลยีทั้งหมดที่พวกเขาใช้ ปัจจุบันครอบคลุมกว่า 673 ล้านเว็บไซต์และเพิ่มขึ้นเรื่อยๆ แนวคิดหลักเบื้องหลังไซต์คือการช่วยสร้างโอกาสในการขายให้กับผู้คนในการขายซอฟต์แวร์

คุณลักษณะขั้นสูงมีให้เฉพาะผ่านการสมัครแบบชำระเงิน แต่ทุกคนสามารถไปที่BuiltWith.comป้อนที่อยู่เว็บไซต์ ชื่อเทคโนโลยี หรือคำหลัก และรับโปรไฟล์เทคโนโลยีโดยละเอียด ลงชื่อ^(Sign)สมัครใช้บัญชีฟรีและค้นหารายละเอียดได้ห้ารายการต่อวัน

รายงานไซต์ Netcraft^{(Netcraft Site Report)}

Netcraft เป็นแหล่งข้อมูลสำหรับนักพัฒนาเว็บมาตั้งแต่ปี 1995 ความเชี่ยวชาญของพวกเขากว่า 25 ปีแสดงให้เห็นในเครื่องมือรายงานเว็บไซต์ ฟรีของ Netcraft ^{(Site Report)}โดยจะรวมรายงานเทคโนโลยีเข้ากับรายงานเบื้องหลัง " ใครเป็นเจ้าของไซต์^{(who owns the site)} " เพื่อให้คุณเข้าใจภาพรวมของไซต์อย่างถี่ถ้วน คุณจะรู้ว่าโฮสต์อยู่ที่ไหน และใครเป็นเจ้าของ รวมถึงประวัติโดเมนบางส่วน

Netcraft Site Reportอนุญาตให้ค้นหาได้ไม่จำกัด ยังคงใช้เฉพาะเมื่อคุณต้องการจริงๆ เป็นทรัพยากรฟรีและชุมชนนักพัฒนาต้องการเห็นเป็นอย่างนั้น

ข้อมูลไซต์ของ W3Techs^{(W3Techs’ Sites Info)}

เครื่องมือข้อมูลไซต์ของ W3Techs ทำงานแตกต่างจากเครื่องมืออื่นๆ เล็กน้อย พวกเขาเก็บฐานข้อมูล^(database)ของข้อมูลไว้ แต่เฉพาะในไซต์ที่มีการค้นหาผ่านเครื่องมือแล้วเท่านั้น หากคุณกำลังตรวจสอบเว็บไซต์ที่ยังไม่เคยตรวจสอบมาก่อน เว็บไซต์จะรวบรวมข้อมูลเว็บไซต์ทันที 

รายงานที่ให้ไว้มีข้อมูลเชิงลึกน้อยกว่าบริการอื่นๆ แต่ยังให้ข้อมูลเชิงลึก คุณจะได้รับCMSภาษาโปรแกรม เว็บเซิร์ฟเวอร์ และผู้ให้บริการโฮสต์ที่ไซต์ใช้ W3Techsยังมีส่วนขยายเบราว์เซอร์สำหรับFirefoxและChromeเพื่อให้คุณสามารถตรวจสอบเว็บไซต์ได้ด้วยการคลิกหรือแตะเพียงครั้งเดียว

Wappalyzer

หากคุณต้องการมีปลั๊กอินของเบราว์เซอร์เพื่อตรวจสอบเทคโนโลยีของไซต์Wappalyzer มี^(Wappalyzer)ปลั๊กอินสำหรับFirefox , ChromeและEdge ปลั๊กอินฟรี ใช้งานง่าย และมีการจัดวางในรูปแบบที่อ่านง่าย การคลิกที่เทคโนโลยีใดๆ ในรายงานจะนำคุณไปสู่คำอธิบาย ซึ่งดีมากหากพบสิ่งที่คุณไม่เคยเห็นมาก่อน 

Wappalyzerนำเสนอคุณลักษณะเฉพาะพร้อมความสามารถในการสร้างการแจ้งเตือนสำหรับเว็บไซต์ พวกเขาตรวจสอบเว็บไซต์ทุกวันและส่งอีเมลถึงคุณหากตรวจพบการเปลี่ยนแปลง การแจ้งเตือนจะทำให้คุณต้องสร้างบัญชีฟรีด้วยWappalyzerและมีค่าใช้จ่าย 10 เครดิตต่อเดือน

แต่คุณจะได้รับ 50 เครดิตฟรีทุกเดือน และการแจ้งเตือนมีค่าใช้จ่ายเพียง 10 เครดิตต่อทุกๆ 30 วัน ดังนั้นการแจ้งเตือนของ Wappalyzer นั้นฟรีโดยพื้นฐาน หากคุณกำลังตรวจสอบไซต์ 5 แห่งหรือน้อยกว่า

เว็บสปอตเตอร์^(Webspotter)

ทั้งหมดยกเว้นบริการเดียวของWebspotterเป็นบริการแบบชำระเงิน แต่ก็ไม่เป็นไร ส่วนขยาย Webspotter Chrome^{(Webspotter Chrome extension)}ฟรีของพวกเขาทำขึ้นเพื่อสิ่งนั้น ส่วน ขยาย Webspotterนั้นคล้ายกับWappalyzerแต่มีคุณสมบัติที่แตกต่างกันเล็กน้อย ถัดจากแต่ละเทคโนโลยีที่แสดง มีลิงก์ไปยังสถิติเกี่ยวกับเทคโนโลยี รายชื่อเว็บไซต์ที่ใช้เทคโนโลยีนั้น และเว็บไซต์ทางการสำหรับเทคโนโลยีนั้น 

คุณลักษณะที่น่าสนใจยิ่งกว่านั้นคือความสามารถของ Webspotter ในการดึงรายชื่อติดต่อทางอีเมล ลิงก์โซเชียลมีเดียการวิเคราะห์ SEO^{(SEO analytics)}และข้อมูลบริษัทอื่นๆ ออกจากเว็บไซต์ แม้ว่าจะไม่ได้บอกคุณเกี่ยวกับวิธีการสร้างเว็บไซต์ แต่ก็อาจมีประโยชน์สำหรับวัตถุประสงค์ทางการตลาดออนไลน์หรือแม้แต่การหางาน

WordPress Theme Detector

บางทีคุณอาจไม่ได้สนใจในการพัฒนาเว็บไซต์มากนัก แต่คุณกำลังรวบรวม เว็บไซต์ WordPressและต้องการรวมคุณสมบัติที่คุณเคยเห็นที่อื่น ดาวน์โหลดปลั๊กอิน WordPress Theme Detector ของเบ รา  ว์เซอร์ Chrome^{(Download the WordPress Theme Detector Chrome browser plugin)}

WordPress Theme Detectorไม่เพียงแต่บอกคุณว่า ไซต์ใช้ ธีม WordPress^{(WordPress theme)} อะไร แต่ยังบอกคุณด้วยว่าใช้ปลั๊กอิน WordPress อะไร ^{(WordPress plugins)}นอกจากนี้ยังแสดงให้คุณเห็นว่าใครเป็นคนสร้างธีมหรือปลั๊กอินและให้ลิงก์ไปยังที่ที่คุณสามารถหาได้ ทำให้ง่ายต่อการรวมองค์ประกอบต่างๆ ลงใน ไซต์ WordPress ของคุณ ซึ่งคุณชื่นชมในไซต์อื่นๆ

เรียนรู้วิธีการทำงานของเว็บไซต์

ใช่ มันง่ายมากที่จะเจาะลึกเข้าไปในเว็บไซต์ใด ๆ บนอินเทอร์เน็ต^(Internet)และดูว่ามันทำมาจากอะไร ลองใช้เครื่องมือเหล่านี้ตั้งแต่สองอย่างขึ้นไป เนื่องจากบางเครื่องมืออาจหยิบของที่เครื่องมืออื่นๆ ไม่ใช้ได้ สิ่งที่คุณเห็นส่วนใหญ่ในไซต์แสดงผลบนคอมพิวเตอร์ของคุณจริงๆ นั่นคือสิ่งที่ทำให้ง่ายต่อการดู นอกจากนี้ยังเป็นเหตุผลที่คุณต้องการทำให้เว็บไซต์ของคุณมีความปลอดภัยมาก^{(make your website as secure as possible)}ที่สุด เพลิดเพลินไปกับการดำน้ำลึกของคุณและแจ้งให้เราทราบสิ่งที่คุณพบหรือสร้าง

How Websites Work: Learn What’s Under the Hood

Many technologies go intо bυilding 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

• บริการการประชุมทางโทรศัพท์ที่ดีที่สุดคืออะไร – แอพที่ดีที่สุดเปรียบเทียบ

• ย้าย ลบ หรือคัดลอกไฟล์โดยอัตโนมัติใน Windows

• วิธีตรวจสอบว่าอุณหภูมิ CPU ของคุณสูงเกินไปหรือไม่

• แอพกรองแสงสีน้ำเงินที่ดีที่สุด 5 อันดับสำหรับ Windows, Mac และ Linux

• วิธีใช้ Windows Package Manager เพื่อติดตั้งโปรแกรม Windows

• 5 สุดยอดโปรแกรมซอฟต์แวร์เพื่อจัดการจอภาพคู่

• ป้อนอัตโนมัติของ Google Chrome: คู่มือฉบับสมบูรณ์

• HDG อธิบาย: Markdown คืออะไรและอะไรคือพื้นฐานที่ฉันควรรู้

• การทดสอบ Dead Pixel เพื่อแก้ไขพิกเซลที่ค้างบนหน้าจอของคุณ

• วิธีกำจัดภาพถ่ายดิจิทัลที่ซ้ำกันบนคอมพิวเตอร์ Windows ของคุณ

• สิ่งที่ต้องพิจารณาก่อนสร้าง Wiki ของคุณเอง

• 11 ซอฟต์แวร์สกรีนช็อตฟรีที่ดีที่สุดสำหรับ Windows

• 7 เครื่องมือกำจัด Bloatware ที่ดีที่สุดสำหรับ Windows

• 5 เครื่องมือในการแปลงไฟล์ BIN เป็นอิมเมจ ISO

• 4 เครื่องมือที่ยอดเยี่ยมในการสร้างแพ็คเกจตัวติดตั้ง Windows

• ตัวแก้ไขสคริปต์ของ Google Apps: ทุกสิ่งที่คุณจำเป็นต้องรู้เพื่อเริ่มต้น

• วิธีการฉีกดีวีดีและบลูเรย์ของคุณได้อย่างง่ายดายด้วย MakeMKV

• ส่วนขยายความปลอดภัยออนไลน์ของ Avast: คุ้มค่าหรือไม่

• 4 แอพซอฟต์แวร์การส่งต่อพอร์ตที่ดีที่สุดและวิธีใช้งาน

• 5 เครื่องมือสแกน IP ที่ดีที่สุดสำหรับ Windows, Mac, iOS และ Android