12最佳谷歌设计& Development Tools

Marvelous Aham-Adi 经过 Marvelous Aham-Adi  |  8月28日,2020年

谷歌类似于冰山:我们可以在水上看到和使用的部分;水下的一部分,我们没有看到并对......

虽然我们许多人都担心谷歌的各个方面我们没有看到 - 威胁我们隐私,或垄断网络的部分 - 否则谷歌提供了一些惊人的产品和工具,其中许多自由,无论如何都是免费的单一登录。

今天我们将从谷歌看看12个工具,真正为桌面带来了一定的东西。

 

1.聚合物

聚合物 是Google的开源JavaScript库,用于使用Web组件构建Web应用程序。该平台附带了大量的库和工具,以帮助设计人员和开发人员通过利用HTTP / 2,Web组件和服务工作者等功能来解锁Web的潜力。 

聚合物的主要特征是网组件。使用Web组件,您可以将自定义元素与任何站点共享,与任何浏览器的内置元素无缝工作,有效地使用各种框架。像LiteLement这样的产品(用于创建快速,轻量级的Web组件的简单基类)和PWA启动器套件使聚合物易于使用。如果您愿意,您可以完全从Web组件中构建您的应用程序。

 

2.灯塔

谷歌 灯塔 是一个开源,自动化工具,用于提高网页的质量。该软件允许您审核Web页面以进行性能,SEO,可访问性等。您可以直接从命令行或作为节点模块使用ChromedevTools运行Lighthouse。 

要在Google Chrome中使用灯塔,只需转到要审核的URL(您可以审核Web上的任何URL),打开ChromedevTools,然后单击“审核”选项卡。运行审核后,Lighthouse将为您提供有关网页的深入报告。 

使用这些报告,您将看到您需要优化的网页的哪些部分。每份报告都有一个参考文件,解释了为什么审计很重要,也向您展示您可以采取的步骤来解决它。 

您还可以使用Lighthouse CL来防止您的网站上的回归。使用Lighthouse Viewer,您可以在线查看和共享报告。您还可以将报告分享为JSON或GitHub Gists。 

灯塔还配备了一个名为Stack Pack的功能,允许灯塔检测网站内置的平台。它还显示了特定的基于堆栈的建议。

 

3. Google Analytics.

谷歌分析 是分析服务的黄金标准。 Google Analytics可以免费安装在您的网站上,以少量的JavaScript免费,并允许您查看有关您网站访问者的各种细节,例如他们使用的浏览器,以及他们来自哪里。

通过使用Google Analytics,您可以根据科学做出关于您网站的决策,因此有些人有点相信您所做的决定将导致您期待的结果。

 

扑颤

是Google的UI工具包,用于从单个代码库构建Mobile,Web和Desktop的本身编译的应用程序。工具包是开源的,可以自由使用。扑腾的最佳部分是它与现有代码合作。 

该工具包具有允许完整自定义的分层体系结构,从而导致快速渲染和灵活的设计。它还配备了完全可自定义的小部件,允许您在几分钟内构建本机接口。使用这些窗口小部件,您将能够添加平台功能,例如滚动,导航,图标和字体,以在IOS和Android上提供完整的本机性能。

扑振也有一个调用的功能 热重载 这允许您轻松构建UI,添加新功能,并更快地修复错误。您还可以使用DART本机编译器编译到本机臂机代码的颤动代码。 

 

5. Google API Explorer

谷歌拥有一个巨大的API库,可供开发人员使用,但发现这些API可能很困难。 谷歌 API Explorer. 开发人员可以轻松找到任何API。在Google API Explorer网页上,您将看到整个API库的完整列表。您可以轻松滚动列表或使用搜索框通过API列表进行过滤。 

谷歌 API Explorer.的最佳部分是参考页面的每个链接都有更多关于如何使用API​​的详细信息。 API Explorer是尝试监视API中的方法的绝佳方式,而无需编写任何代码。

 

6.木偶

傀儡 是来自谷歌浏览器团队的项目。该平台使Web开发人员能够控制Chrome(或任何其他Chrome Devtools协议的浏览器)并执行公共动作,就像在真实浏览器中一样。 Puppeteer也是一个节点库,它提供了一个高级API,用于使用无头铬。它也是用于刮擦,测试和自动化网页的有用工具。 

以下是您可以使用Puppiteer执行的一些事情:生成页面的屏幕截图和PDF,UI测试,测试Chrome Extensions,自动化表单提交,生成预渲染内容,并爬网单页应用程序。 

 

7. Codelabs.

谷歌开发人员 代码labs. 是初学开发人员甚至高级开发人员的方便工具,他们想要提高他们的知识。 Codelabs提供了一个指导,教程,实践的编码体验。 CodeLabs的网站被分解为不同主题的若干教程课程。 

在Codelabs上的教程中,您可以了解如何从头开始构建应用程序。部分教程类别包括增强现实,Tensorflow,Analytics,虚拟分析,G套件,搜索,Google Compute引擎和IOS上的Google API。 

 

8.彩色工具

彩色工具 使网络设计师可以轻松创建,共享和应用于UI。它还测量在导出到调色板之前的任何颜色组合的可访问性级别。该工具配有6个用户界面,提供超过250种颜色可供选择。 

该工具也很容易使用。您需要做的就是选择颜色并将其应用于主要配色方案;切换到次级配色方案,并选择另一种颜色。您还可以切换到自定义以选择您自己的颜色。选择所有颜色后,请使用辅助功能功能检查全部是否好,然后将其导出到调色板之前。 

 

9.工作箱

工作箱 是一组JavaScript库和节点模块。 JavaScript库使其可以轻松地将离线支持添加到Web应用程序。节点模块可以轻松缓存资产并提供其他功能,以帮助用户构建渐进式Web应用程序。其中一些功能包括预缓存,运行时缓存,请求路由,后台同步,调试以及比SW-Precache和SW-Toolbox更大的灵活性。 

使用Workbox,您可以添加一个快速规则,使您可以缓存Google字体,图像,JavaScript和CSS文件。缓存这些文件将使您的网页运行得更快,并且还可以消耗更少的存储空间。您还可以使用CLI,节点模块或WebPack插件在Web应用程序中预先缓存您的文件。 

 

10. Pagespeed见解

Pagespeed见解 是来自Google开发人员的方便工具,它分析了网页的内容,然后生成有关如何更快地制作页面的建议。它介绍了桌面和移动设备上的网页的性能。在报告的顶部,Pagespeed Insights提供了一个总结页面性能的分数。 

 

11.谷歌上的放大器

放大器页面加载速度更快,并且看起来比移动设备上的标准HTML页面更好。 谷歌上的放大器 允许您通过Google增强您的放大器页面。它是一个Web组件框架,允许您创建用户的第一网站,广告,电子邮件和故事。 AMP的一个好处是它允许您的网页在所有设备和平台上立即加载,因此提高了用户的体验。 

 

12.窗户修整器

创建网站时,开发人员必须为响应设计测试它们是重要的– this is where 窗口调整器 进来。Window Resizer是一个Chrome扩展名,可以调整浏览器窗口的大小,以便在不同的屏幕分辨率上测试响应性设计。提供的常用屏幕大小是桌面,笔记本电脑和移动设备,但您还可以添加自定义屏幕尺寸。 

 

特色图像 通过拆卸.