工具和测试

一旦你开始习惯使用核心 Web 技术(例如 HTML、CSS 和 JavaScript)进行编程,并且开始获得更多经验、阅读更多资源并学习更多提示和技巧,你将开始遇到所有这些 各种工具,从 JavaScript 框架到测试和自动化工具等等。随着你的 Web 项目变得更大、更复杂,你将需要开始利用其中一些工具,制定可靠的工具链来为你的开发流程提供超能力。

¥Once you've started to become comfortable programming with core web technologies (like HTML, CSS, and JavaScript), and you start to get more experience, read more resources, and learn more tips and tricks, you'll start to come across all kind of tools, from JavaScript frameworks, to testing and automation tools, and more besides. As your web projects become larger and more complex, you'll want to start taking advantage of some of these tools, working out a reliable toolchain to give your development process superpowers.

最重要的是,我们仍然需要将跨浏览器支持放在首位,并确保我们的代码遵循最佳实践,使我们的项目能够在用户用来浏览 Web 的不同浏览器和设备上运行 ,并且可供禁用使用。

¥On top of that, we still need to keep cross-browser support in the forefront of our minds, and make sure that our code follows best practices that allow our projects to work across different browsers and devices that our users are using to browse the Web, and be usable by people with disabilities.

确定你应该使用哪些工具可能是一个困难的过程,因此我们编写了这组文章来告知你可用的工具类型、它们可以为你做什么以及如何利用当前行业最喜欢的工具 。

¥Working out what tools you should be using can be a difficult process, so we have written this set of articles to inform you of what types of tool are available, what they can do for you, and how to make use of the current industry favorites.

注意:我们在本主题中引用了许多工具,并不是因为我们认可它们或认为它们是最好的,而是因为我们知道它们有效并且拥有良好的行业支持。在大多数情况下,还有其他可用的工具,旧的工具会过时,而新的工具无疑会出现。

¥Note: We have referenced a number of tools in this topic, not because we endorse them or think they are the best, but because we know they work and have good industry support. In most cases there are other tools available, old ones will go out of fashion, and new ones will no doubt appear.

先决条件

¥Prerequisites

在尝试使用此处详细介绍的许多工具之前,你确实应该首先学习核心 HTMLCSSJavaScript 语言的基础知识。例如,在开始调试复杂 Web 代码中的问题、有效使用 JavaScript 框架或编写测试并使用测试运行器对代码运行测试之前,你需要了解这些语言的基础知识。

¥You should really learn the basics of the core HTML, CSS, and JavaScript languages first before attempting to use many of the tools detailed here. For example, you'll need to know the fundamentals of these languages before you start debugging problems in complex web code, making effective use of JavaScript frameworks, or writing tests and running them against your code using test runners.

此外,你应该从本主题中的第一个模块开始,该模块提供了对一般区域的有用概述。

¥In addition, you should start with the first module in this topic, which gives a useful overview of the general area.

模块

¥Modules

了解客户端 Web 开发工具

客户端工具可能令人生畏,但本系列文章旨在说明一些最常见的客户端工具类型的用途,解释可以链接在一起的工具,如何使用包管理器安装它们,以及使用 命令行。最后,我们提供了一个完整的工具链示例,向你展示如何提高工作效率。

了解客户端 JavaScript 框架

JavaScript 框架是现代前端 Web 开发的重要组成部分,为开发者提供了久经考验的工具来构建可扩展的交互式 Web 应用。许多现代公司使用框架作为其工具的标准部分,因此现在许多前端开发工作都需要框架经验。本模块为你提供一些有关客户端框架如何工作以及它们如何适合你的工具集的基本背景知识,然后再继续学习涵盖当今一些最流行的框架的教程系列。

Git 和 GitHub

所有开发者都将使用某种版本控制系统(VCS),该工具允许他们与其他开发者在项目上进行协作,而不会有覆盖彼此工作的危险,并且在出现问题时回滚到代码库的先前版本 后来发现。最流行的 VCS(至少在 Web 开发者中)是 Git,以及 GitHub,后者是一个为你的存储库提供托管服务以及用于使用它们的多种工具的网站。本模块旨在教你需要了解的关于它们的知识。

跨浏览器测试

该模块专门关注跨不同浏览器测试 Web 项目的字段。在这里,我们着眼于确定你的目标受众(例如,你最需要担心哪些用户、浏览器和设备?)、如何进行测试、不同类型的代码将面临的主要问题以及如何修复/ 缓解这些问题,哪些工具在帮助你测试和解决问题方面最有用,以及如何使用自动化来加速测试。