在研究或探索其他网络产品时，当看到一些好的设计时，我总是很好奇他背后实作的技术、或是使用了什么我没看过的第三方服务。
过去我们可能会在网站上点右键、打开开发者工具、浏览 HTML code 和研究 header 里面藏了些什么东西，对于没有技术背景的人来说实在是很让人头痛。在这边就分享一些每个人都能轻松上手的网络技术分析工具、以及几种实用的使用情境！
这篇文章分三个部分：
1. 网站分析工具们的介绍
2. 给不同职能、角色的使用情境
3. 介绍各种网站技术与名词解释
有图有连结有排版好读版请见 medium：
http://a0.pise.pw/QAJGQ
▍网站分析工具介绍
我最常使用的网站分析工具是 Wappalyzer，他提供 Chrome、Firefox 浏览器插件，当使用者在浏览特定网站时，这个插件会透过侦测网站的 HTML、scripts、cookies、headers 来了解该网站背后使用的技术与工具，在浏览器上点选这个插件就可以得到如下图的简要分析结果。
也因为如此，非网页架构的软件、非浏览器运作的手机应用程式（App）就不在此工具服务的范畴之内。
这边的技术或工具不只有程式语言、框架等等，包含行销团队常用的数据分析工具、内容管理系统（CMS）、电子商务或购物车工具都会一次呈现出来。
除了一目了然看到所有背后的技术与工具外，点选特定的分类（例如：Web frameworks）会带你回网站并列出这个分类下常用的技术、工具，按照市场份额（marketshare）来排序；点选技术或工具本身（例如：Ruby on Raills）会带你回到网站并列出使用这个技术或工具的前 10 大流量的网站。
不过这个流量是根据追踪插件的流量来计算的，所以不完全准确，而这也是他用“比例”来显示的原因，它所提供的仅是一个相对数据，仅供参考。
这类型的服务不只有 Wappalyzer 有提供，我使用它是因为它是我第一个接触的这类工具，长久以来习惯了也喜欢它的接口和体验。
其他类似工具包含：功能与接口都很全面的 SimilarTech、一样用插件提供服务的 WhatRuns、接口看起来非常阳春老牌的 BuiltWith 与 W3Techs、反其道而行着重从技术找网站的 snov — techcheck 等工具。
以 SimilarTech 来说，查询特定网站背后的技术时，甚至可以看到最近网站的变更，虽然我是觉得研究网站或竞争品牌是不用这么像跟踪狂啦…
如果看完这篇文章觉得这类型的工具对你有帮助，不妨去试试看以上几种类型找出最适合你的吧！
▍使用情境
以下常见的场景可以运用这个工具来提升我们的工作品质。
身为产品团队的一员
任何会去研究其他网络产品的团队成员都能透过这个工具看见更深入一层的资讯。请注意，产品的官方网站 Landing Page 和实际产品 Core Product 的内涵很多时候是大不相同的，点进部落格、FAQ 页面也有机会发现截然不同的面貌。
产品经理可以用它来了解特定网站背后的写法、串接的第三方工具来进行竞品分析，或单纯为自己的产品找寻灵感。技术与开发团队在实作新产品前，也可以参考其他类似产品使用的语言与架构。
其他需要跟主产品串接、或会为自己团队需要而题需求的团队伙伴也能用上，例如行销人员可以用它来发现一些其他网站使用的行销工具、内容管理系统（CMS）；客服人员也可以研究其他网站使用的用户沟通工具，或是一些能够增加客户信任感的串接元件。
在这个网络产品从四面八方横空出世的年代，并不是产品中的每一个零件都一定得自己写，把全身上下家当都放在自家 server 的时代已经过去了，可以好好参考其他网站是如何利用第三方工具来解决问题，并聪明地将内部资源运用在提升核心功能与优势的品质上，专业的东西就让专业的来。
如果是寻找更偏行销、客户服务的第三方工具，或是单纯想逛逛找些灵感，我也很推荐 SimilarTech — Web Technologies 的页面。
身为商业团队的一员
这里的商业团队指的是要在外打江山、开拓新客户的部门。
如果你本身就是一个被列在这些分析网站上的“技术/工具”之一，以电子商务的开店平台为例，在 Ecommerce 分类中就可以很轻易地看到所有场上的竞争品牌，马上就可以看看自己过去的竞品分析与市场分析是否有遗漏任何的重要玩家。
而在点进每个工具后，可以看到目前在使用它的前十大网站。
这十个网站对你来说可能不是什么大新闻，但厉害的是它可以让你得到有使用这个工具的大名单。当然，名单是从这个浏览器插件有侦测到的为准，所以还是很难一网打尽所有的网站。
点选“Get the full dataset”后，你会被带到一个需求页面，可以找到使用特定工具/技术的网站（也就是你的潜在客户啦），甚至还可以用一些简单的 Filters 来筛选出更精确的网站名单，包含网站使用的语言、国家（用 TLD 判断）、想要筛选出的名单数量。名单的内容也非常简单，就是网站连结、网站语言（如果它有侦测到）、被 Wapplizer 侦测到的网站浏览次数。
阿你可能会想说为什么要筛选？当然是因为这个服务要钱啦＄＄＄费用是按照名单数量来计算的，看看这精美的价格，Shopify 全部共 225,666 笔名单要价 410 美元，如果只要前 200 笔资料的话费用是 70 美元，所以各位想要挖角竞争品牌客户名单的团队们可以征酌一下啦！
身为求职者
如果你是擅长特定程式语言、框架、工具的软件工程师，在求职的前可以先看看想要应征的网站使用的程式语言或框架，或是在最一开始用上述的方式捞出一批值得投递履历的公司名单。
如果你是产品经理，在面试新工作的时候除了彻底研究该产品的市场、使用情境、功能、商业模式等等，稍微了解背后的架构也可能会带来出其不意地发现。
身为团队招募者
从另一个角度来看，若是很积极的在招募擅长特定程式语言的工程师的招募团队，也可以去捞目前有在使用这些语言的产品团队名单，然后直接去 LinkedIn 上搜寻这些公司的工程师并试图挖角到自己的团队内部。
这里也想提提作为创业者或是开发新产品的团队，选择语言或框架的时候，除了语言本身能不能快速且有效的打造产品来作为选择的判断依据外，未来能不能招募到擅长使用该语言的工程师也很重要。
身为网络产业新手
而如果你是还没打定主意要深耕哪一种程式语言的软件工程师，也许这些分析网站上的排名可以给你一些想法，或是先偷偷去看看你钟意的产品团队在用哪种语言开发。当然每个时代的潮流都会变、语言与工具会推陈出新、在不同国家与产业也会有非常大的差异，我在这边就不加入论战。
这个工具还有一个很好用的地方，就是能让新手一窥网络产品背后的架构，可以说是一本百科全书的目录了。
以上分享～对入门词汇有兴趣的朋友欢迎再到文章内文浏览～～～