跳到主要内容

Google网络工具指南

Big G,又名Google,为开发人员提供了大量旨在简化网页设计的工具。在本文中,我们将介绍一些最好的Google工具,并向您展示如何在Web设计和开发工作流程中使用它们。

我们涵盖了一系列不同的网页设计工具在这里,我们将内容分成页面,以便更容易导航。使用上面的下拉菜单跳转到您感兴趣的部分。

只要网站不受限制,任何人都可以查看其内容。 Chrome的DevTools使这一点变得简单 - 在此页面上,我们将向您展示如何查看和更改HTML,CSS和JavaScript。上第2页,我们仔细研究如何使用Google的调试器快速轻松地修复编码错误。第3页将重点放在谷歌的设备模式上,您可以使用它来通过台式机测试您网页的移动版本。上第4页我们将介绍您需要注意的基础知识,以便开始在您的设计中实施Material Design原则。最后,第5页看看Progressive Web Apps,这是网页设计行业的最新成果。

查看和更改HTML,CSS和JS

只要网站的代码没有缩小,任何使用Chrome开发人员工具的人都可以查看。首先,检查Chrome的版本 - 以下步骤适用于在64位Ubuntu工作站上运行的版本70.0.3538.67。接下来,打开汉堡菜单,然后单击更多工具>开发人员工具。

启动开发人员工具,您应该看到类似于此的屏幕[单击右上角的图标进行放大]

浏览器通过打开屏幕左侧的窗格进行响应。它应该在第一步调整大小 - 默认情况下,浏览器不会分配足够的屏幕空间。完成后,屏幕看起来与上图中显示的类似。

默认情况下,开发人员工具启动时会加载控制台选项卡。它包含控制台日志记录功能调用发出的输出。渲染错误也会显示在那里 - 如果您发现红线,标记或页面代码中的某些内容就会出错。点击右侧的小“URL”会将您带到该行,这会导致消息显示出来。

检查标记

如果您的兴趣集中在标记上,请使用图中所示的Elements选项卡。它显示了浏览器当前呈现的标记。您可以以类似于树视图的方式展开和压缩它 - 隐藏不需要的元素以防止感觉过载。

Raison D'etre选项卡的显示是CSS结构。小部件从各种来源“收集”CSS,它们整齐地显示并且彼此相邻。在图中所示示例的情况下,我们看到样式是从'div'标记和页面的'main'标记提供的。

Chrome可让您即时编辑大多数属性。双击任何黑色文本将标签转换为编辑器,然后输入新需要的值并按Return键。渲染器获取这些更改并将其动态应用于DOM。在尝试优化颜色或放置问题时,这尤其有用;必须重新加载页面才能预览更改变得令人厌烦。

黄色背景表示窗口的内容可能会被过滤[单击右上角的图标进行放大]

最后,看一下窗格顶部的文本框。它使您可以过滤显示的标记项:例如,输入“mdc”将视图限制为从本文后面使用的Material Design库继承的所有样式。当过滤器处于活动状态时,黄色背景将以与上面所示类似的方式显示。

进行详细分析

在现代Web浏览器中,DOM不限于“静态”表示问题。它还管理事件流和位置。切换到“计算”选项卡以显示“维度”属性列表。当以精确的方式在屏幕上排列小部件时,这非常有用。

移至“事件侦听器”选项卡可提供事件流的概述。使用此功能可以快速清除与用户交互相关的问题:如果事件未触发,则通过检查事件处理程序连接开始。

最后,使用“属性”窗口可以查看存储在各个DOM节点中的属性。如果你花了很多时间寻找DOM操作代码,那么价值就很明显了。

下一页:如何使用Google的调试器



翻译字数超限