跳到主要内容

如何剖析别人的网站

Ricardo Quintas explains how to get under the hood of other websites

Ricardo Quintas解释了如何深入了解其他网站

试图了解网站的构建方式往往是一项艰巨的任务。毕竟,您正在查看最终产品:内置版本。您正在处理根据您正在使用的特定代理或设备动态加载的缩小和连接代码,这不是一件容易理解的事情。

使用这些出色的WordPress教程构建您自己的网站

此外,您有超过数千行(有时是不必要的)代码,其中一些由开发人员创建,其中一些是自动生成的。如果您想分析网站的特定技术方面并从中学习,这会让生活变得困难。

那么可以对网站进行反向工程吗?如果是这样,有没有办法让这个解剖过程更容易?幸运的是,第一个问题的答案是:是的。至于第二......好吧,这就是本文的用武之地。

我们将拿起一个网站并深入了解,了解正在发生的事情以及正在使用的技术。这里的想法不是复制代码,而是分析网站的内部工作原理,以便您可以从中学习,并希望成为更好的开发人员。

出于本文的目的,我选择了重点关注Foodsense,因为它是一个相对简单的网站。一旦掌握了此处列出的工具和技术,您就可以将它们应用于任何类型的站点,无论它有多复杂。

01.打开结构

跳到代码中是很诱人的,但在此之前,让我们尝试了解网站的整体结构以及它通常如何表现。我经常在这个过程中使用Chrome,因为它有很多有用的扩展。

为了更好地了解网站的结构,我建议使用名为的Chrome扩展程序即时线框。这为您提供了站点的X射线视图,如果您想了解调整浏览器窗口大小时发生的响应技巧类型,这将非常有用。

但是我们可以比设备模式更深入。只需打开DevTools并单击Little Toggle Device Mode图标。这将显示断点的确切位置。如果使用此工具调整网站大小,则可以确认其断点大约为475px,775px,975px和1,175px。

Instant Wireframe gives you an X-ray view of a site

Instant Wireframe为您提供站点的X射线视图

当然,我们只是通过Chrome在桌面上运行来检查网站。如果我们在不同的浏览器或不同的设备上运行它,我们怎么能检查它是否会有不同的行为?

Chrome也可以为您提供帮助:只需进入设备模式,然后从屏幕顶部的下拉菜单中选择特定设备即可。在那之后,您所要做的就是刷新页面 - 尝试使用Twitter或LinkedIn等网站,您将看到我的意思。通过使用这些工具,您可以确认是否正在处理简单的响应式网站,或者您是否有更复杂的事情。

最后,在调整网站大小时,您还可以了解有关响应式图像的大量信息。例如,如果您访问akqa.com/services并调整浏览器大小,您将看到图像的交换方式,具体取决于网站的断点。

02.打开代码

我们已经学到了很多,但我们还没有看过代码。如果您在计算机上本地保存页面,您将看到CSS和JavaScript代码经常被压缩,使其难以理解。您可以使用在线工具Unminify解开它。

如果您使用Sublime Text作为代码编辑器,那么也有一些很好的插件可以帮助您。对于CSS,我使用CSS Unminifier,我也用缩小解开或美化CSS和JavaScript代码。

CSS Unminifier does just what it says

CSS Unminifier正如它所说的那样

请注意,许多网站将其源代码缩小为单个文件,因此即使您取消代码,它仍将存在于单个文件中。您可以尝试手动分离代码的不同部分,也可以使用下一个工具来帮助您。

03.揭开堆栈

如果我们需要找出用于构建网站的堆栈怎么办?为此,有一个非常有用的Chrome扩展名称Wappalyzer。它返回用于构建站点的技术的摘要。

例如,我知道Foodsense使用jQuery 1.6.1,Google Analytics,Typekit字体,Apache Web服务器,ExpressionEngine(CMS),CodeIgniter PHP框架 - 当然还有PHP本身。 Wappalyzer告诉我们很多,但不是一切。

在Chrome DevTools中查看“来源”选项卡可提供更多信息。例如,Foodsense使用jQuery Cycle插件作为主图像轮播。

Remove unwanted CSS with CSS Remove and Combine

使用CSS删除和组合删除不需要的CSS

在查看网页的源代码时,您经常遇到的另一个问题是,有太多的内容可以轻松理解。例如,许多网站使用Bootstrap等框架,但只使用框架代码的10%。

要删除未使用的代码,请尝试UnCSS或Chrome扩展程序CSS删除和组合删除并结合。两者都可以清除不必要的CSS,使您更容易调查应用于特定页面的样式表技巧的类型。

亲自尝试一下

了解网站的工作方式既是技术,也是艺术。分析网站时,最好将注意力集中在特定元素或窗口小部件上,并尝试了解其工作原理,而不是尝试立即吸收整个网站。

Get your hands dirty and have a play around

弄脏你的手,玩个游戏

即使本文中介绍的工具可以帮助您完成这一过程,但没有真正的替代方法可以帮助您解决问题。

里卡多昆塔斯

Ricardo Quintas是一名自由软件工程师。本文最初发表于网络杂志

像这样?阅读这些!



翻译字数超限