Web开发人员工作流工具:初学者指南
以下是所有web开发人员都应该了解的工具入门，从基本的Bash命令到用于调试web应用程序和自动化导航测试的web浏览器插件，再加上持续集成管道。
请记住，本文旨在涵盖大多数web开发人员都需要学习的工具，而不是一个全面的列表。所以，如果你最喜欢的工具不在这里，不要太生气!(例如，我故意省略了所见即所得网站建设者．)
命令行
的命令行是一个允许您通过控制台与操作系统交互的界面，它可以运行一个很长时间方便甚至自动化繁琐和常规任务的方法。
你不应该害怕弄脏你的手与控制台。你花在学习一些基本脚本上的时间肯定会有回报的。
Bash工具(Linux, macOS)
Bash的最受欢迎的shell。类unixLinux和macOS等操作系统。
您对Bash shell的掌握(或者至少是基本知识)可以拯救您很多的时间。像定位和重命名文件，查找和替换文本字符串这样的事情实际上只需要几秒钟定位而且grep与sed,分别。
通过阅读Bash快速入门指南．
PowerShell (Windows)
PowerShell是来自微软的“bash-like”任务自动化和配置管理框架。它带有一个类似于[命令提示符](https://en.wikipedia.org/wiki/Cmd.exe (CMD))的命令行，但它还包括模块一个合适的脚本语言．但是要记住脚本是PowerShell在没有什么比如用Bash编写脚本。除了少数例外，这些命令的名称完全不同，这意味着您需要分别学习这些命令。
PowerShell 7(正在开发中)是PowerShell的后续产品PowerShell核心它是PowerShell 5的后续版本。谁知道呢，微软的人可能会在第8或第9版的时候弄清楚命名的问题。♂️
Cygwin (Windows)
你错过了Windows上的狂欢?不要再想念它了!对于那些习惯了Bash shell的强大功能但经常在Windows环境中工作的人来说，还有另一种选择。
Cygwin是一个posix兼容的环境，本机运行在Microsoft Windows上，其中安装目录的行为类似于根目录，并遵循类似于类unix系统中的目录布局。
代码编辑器
你肯定知道什么是源代码编辑器是，但你可能不知道其中一些功率特性，这样的git集成。
有集成开发环境(ide)，例如NetBeans而且Eclipse-但它们有很多我们根本不关心的功能。
作为网页开发者，我们更倾向于跨平台工具．让我们来看看其中的一些。
原子
毫不奇怪，因为它是由GitHub开发的，原子拥有最好的嵌入式Git控件的任何文本编辑器，专门针对GitHub存储库。
但这还不是全部。“21世纪的可黑客文本编辑器”非常容易定制(参见文档)，以及一位富有的包而且主题生态系统围绕着它蓬勃发展。一定要看看必威滚而且论坛看看有什么烹饪，因为有很多定期更新。
崇高的文本
崇高的文本是这个列表中最古老的产品(从2008年开始)，也是唯一一个不免费的产品。它仍然非常受欢迎，并且是第一个在任何优秀的代码编辑器中引入许多我们今天认为是给定的功能的编辑器，例如“goto anything”、“goto definition”和“多重选择”等等。
它还有一个配套的Git客户端，界面非常流畅，崇高的合并，于2018年推出。
Visual Studio代码
Visual Studio代码不要与…混淆Visual Studio是另一个现在非常流行的代码编辑器，它包括强大的功能，如:
- 智能感知，它提供了基于变量类型、函数定义和导入模块的智能补全。
- 内嵌调试从编辑器内部分析编码问题。
- 版本控制内置Git命令(学习如何使用版本控制）.
- 扩展和自定义它们在不同的进程中运行，确保它们不会降低编辑器的速度(学习关于扩展的更多信息）.
- 云集成与微软Azure部署和托管站点，存储和查询基于关系和文档的数据，以及使用无服务器计算进行扩展。
阅读我们的Visual Studio Code高级用户指南成为一名VS Code专业人士，并深入阅读这本书Visual Studio Code: Web开发人员的端到端编辑和调试工具．
亚军
虽然不是很受欢迎，括号值得一提的是，因为它主要专注于web开发，有一个非常有趣的功能叫做实时预览，它可以让你的浏览器实时连接到在屏幕上立即可视化CSS和HTML的变化．
notepad++是来代替的吗Windows记事本它非常简洁，缺少我们提到的一些功能强大的特性，比如Git集成，但它仍然是一个功能强大、轻量级的代码编辑应用程序。
命令基于行的
至于基于命令行的编辑器，您有Emacs而且Vim…无休止的争论到底哪个更好！
浏览器工具-调试，调试，调试
的Web开发工具一些浏览器自带的插件并不是网站构建器或ide，因为它们既不能帮助直接创建网页，也不能代替代码编辑器。相反，它们帮助测试用户界面(UI)您正在进行的项目。
在过去，你需要大量的扩展来构建一个良好的调试环境，但现在大多数浏览器都有很棒的内置工具来帮助web开发人员。
你可以找到一些工具:
- 一个DOM inspector上直接编辑HTML和CSS代码文档对象模型(DOM),视图事件监听器，并设置DOM突变断点．
- 一个控制台查看和过滤日志消息，检查JavaScript对象和DOM节点，并在活动窗口或框架的上下文中运行JavaScript代码。
- 一个调试器通过代码控制执行流，并设置手表和断点。
- 一个网络监控检查来自网络和浏览器缓存(包括异步缓存)的请求和响应XMLHttpRequest(XHR)—所有这些对于识别瓶颈都非常有用。
- 一个可访问性检查访问页面的可访问性(a11y)树，允许您检查缺少什么或需要注意什么，以使您的网站对尽可能多的人可用。
- 性能测量来配置文件执行时间和系统资源所需的站点和行走JavaScript调用栈．
- 记忆的测量跟踪内存消耗并进行比较堆快照在代码执行的不同阶段。
- 一个存储管理器为了处理缓存的数据，cookie，网络存储，甚至IndexedDB结构化数据。
- 一个服务工作者经理处理和调试服务工作人员与更新，注销，和启动/停止个别工人。
- 一个模拟器测试不同的屏幕分辨率，甚至不同的位置坐标。
Chrome DevTools
谷歌Chrome附带一个全面的和令人难以置信的记录良好的集合，称为DevTools．
事实上，去谷歌是一个好主意面向Web开发人员的工具，因为你会发现很多有用的资源。
Firefox开发者工具
火狐首先介绍DOM inspector在版本3中，从那时起它的开发人员工具是最先进的一套，还有额外的好东西吗如点眼药器，采取截图,统治者，举几个例子。
同样,Mozilla开发者网络(MDN)是web开发人员的必备资源。
Safari开发工具
因为它缺乏特色，对网络开发者的支持也很差，苹果Safari是一种痛苦的工作，而且，就像以前的Internet Explorer一样，不需要处理它就很好了。但你必须这么做。
它确实可以发布Web开发工具它们远没有前面提到的那么全面，您将得到的所有文档都是某人在午餐休息时写的。(是的，就这些了。)
其他人
甚至微软的优势微软是臭名昭著的ie浏览器的继承者开发人员工具！
如果你喜欢老的歌剧,请检查这个堆栈交换的答案看看你如何打开它的开发工具。
学习Chrome和Firefox开发工具浏览器Devtool秘密．
JavaScript工具
自从node . js(在web浏览器之外执行JavaScript代码的运行时环境)，JavaScript不仅被用于增强用户界面，还被用于编写命令行工具和用于服务器端脚本程序，有效地建立了“JavaScript无处不在”的范式。
因此，围绕它形成了一个完整的生态系统，这里有一些你需要知道的工具。
npm
的节点包管理器(npm)声称是“世界上最大的软件注册表”，它是一个必不可少的工具这是目前分发JavaScript代码的主要方式．
正如其网站上列出的，你可以使用npm:
- 为你的应用程序调整代码包，或者按原样合并包。
- 下载可以立即使用的独立工具。
- 运行包而不下载使用npx．
- 在任何地方与任何npm用户共享代码。
- 将代码限制给特定的开发人员。
- 创建组织来协调包维护、编码和开发人员。
- 使用Orgs组建虚拟团队。
- 管理多个版本的代码和代码依赖项。
- 当底层代码更新时，可以轻松地更新应用程序。
- 发现解决相同谜题的多种方法。
- 寻找其他正在处理类似问题和项目的开发人员。
npm本质上有三个组件:
欲了解更多信息，请阅读npm的初学者指南，节点包管理器．
webpack
webpack是另一个级别的打包软件，收集所有应用程序的前端资产，如HTML, CSS和图像到静态资产，也称为“包”。这些包可以用于生产按需编码通过代码随地吐痰．(读使用代码分割减少JavaScript有效负载看看这意味着什么。)
你可以使用webpack:
- 包ES模块，CommonJS,AMD模块(甚至组合)。
- 创建在运行时异步加载的单个bundle或多个块(以减少初始加载时间)。
- 在编译期间解析依赖项，减少运行时大小。
- 使用加载器在编译时(例如TypeScript转换为JavaScript, Handlebars字符串转换为编译函数，图像转换为Base64，等等)。
- 您的应用程序需要使用high模块化插件系统。
请查看Webpack初学者指南入门指南。
聚合物和Web组件
2011年首次推出时，Web组件被认为是网络的下一个大事件。虽然围绕它已经有了一些发展，但它的普及速度比预期的要慢得多。然而，创建新的HTML元素和封装它们可以在以后使用，并分布在不同的站点以防止功能的重写，这仍然是相当合理的。
由谷歌开发，聚合物是一个使用web组件构建web应用程序的库，它在公司范围内有相当多的追随者，如谷歌本身，Netflix, Electronic Arts和IBM。此外，谷歌实现了它的许多功能材料设计这使得它成为一个非常有吸引力的工具来实现精心制作的网站。
了解更多关于聚合物和Web组件的信息:
代码管理
一个分布式版本、修订或源代码控制系统(DVCS)是一种管理方式代码库通过软件提交．换句话说，它是一种以整洁、安全和有效的方式跟踪软件开发变更的标准。(参见“以正确的方式向代码库提交更改”。)
有许多版本控制系统，例如BitKeeper，颠覆，水银(我个人的最爱)，Azure DevOps(镇上新来的孩子)。但只有一个人是国王……
Git
由Linus Torvalds(也是Linux的创造者)创建，Git很快成为了事实上的DVCS的标准(部分归功于GitHub)。这是真正的分布式的，因为每台计算机或节点上的每个Git目录都是一个成熟的存储库，具有完整的历史记录和完整的版本跟踪能力，独立于任何一个被视为中央服务器的节点。
在全面掌握DVCS(尤其是Git)之前，您需要熟悉许多概念，例如分支和合并，分布，拉但是你会发现基本的(你大部分时间会用到的)是很容易学的。
您可以在不到一个周末的时间内建立对Git的坚实理解入门Git．
其他工具
硒
自动化浏览器测试非常重要硒不仅掌握了浏览器测试，甚至还将其提升到另一个水平。
- 硒WebDriver本地驱动浏览器，就像真正的用户在本地或远程机器上一样。
- Selenium IDE是Chrome和Firefox的扩展，可以很容易地在浏览器中记录和回放测试。
- 硒网格通过在多台机器上同时运行测试，将WebDriver提升到另一个层次，减少了在多个浏览器和操作系统上测试所需的时间。
学习如何使用Selenium执行端到端测试在Python应用程序上。
也有傀儡师，一个Node.js库，由谷歌提供了一个API来控制无头镀铬或镀铬DevTools协议．坦率地说，Selenium是道路更高级的工具-或者真的，一个生态系统-而不是Puppeteer，你也可以用它来与Chrome DevTools协议(见Chrome DevTools和Selenium 4）.
Docker和软件容器
我们无法解释很多码头工人在这里，我们要公正地对待它，但有一件事是肯定的:软件容器可以戏剧性的改进交付和部署工作流程。
要深入了解它，请阅读学习Docker -第二版．
CI / CD管道
持续集成(CI)与持续交付(CD)在所谓的CI/CD管道持续部署．但这一切意味着什么呢?
来自维基百科，简而言之:
- CI确保在主线上检入的软件始终处于可以部署给用户的状态。
- CD使部署过程完全自动化。
换句话说，持续交付是一种实践(而不是一种技术)，通过自动化测试和部署到云端，平滑地简化软件开发，非常符合DevOps文化。
所有的部署过程都可以完全自动化，从使用Selenium检查工作流错误，到编译和构建软件，从GitHub提取最新的检查版本，或修补数据库，甚至重新启动缓存。不管需要做什么，你只要把它放到管道里就行了。
有关DevOps的更多信息，请查看SitePoint的“必威西盟体育网页登录DevOps实例”文章。
GitLab CI / CD
GitLab是一个类似于GitHub的服务。但与托管Git存储库并提供一些DevOps工具的GitHub不同的是，GitLab是本质上是一个DevOps生命周期工具(而且是市场上最好的工具Forrester的一份报告),也托管Git存储库。也就是说，在GitLab中几乎没有任何GitHub的功能缺失(相反的情况更正确)。
该服务基于使用的基于消费的构建分钟模型:
| 计划 | 构建分钟 | 用户/月 |
|---|---|---|
| 免费的 | 2000年 | 0美元 |
| 青铜 | 2000年 | 9美元 |
| 银 | 10000年 | 19美元 |
| 黄金 | 50000年 | 99美元 |
专注于复杂的工具链，速度而且安全我们不能在这里涵盖所有的GitLab CI/CD特性，但是可以查看这些资源:
GitHub的行为
GitHub作为使用Git的软件项目的领先托管提供商，它的CI/CD解决方案似乎姗姗来迟GitHub的行为,这去年8月引入了对公共存储库的CI/CD支持(竞争对手多年来一直在这么做)。
在任何情况下，服务是生产准备相当大动作列表你可以开始集成到你的管道中。
| 计划 | 构建分钟 | 月 |
|---|---|---|
| 免费的 | 2000年 | 0美元 |
| 箴 | 3000年 | 7美元 |
| 团队 | 10000年 | 9美元/用户 |
| 企业 | 50000年 | 联系销售 |
构建时间似乎非常慷慨，但是在并发性方面有一些限制，这可能会对总运行时间产生负面影响，因此一定要检查使用限制．
更多信息:
Bitbucket都管道
Bitbucket管道和部署工作起来就像微风一样Jira(一种非常流行的工具敏捷开发团队)和Bitbucket都．这并不奇怪，因为他们都是Atlassian，就像Trello．
虽然Bitbucket Pipelines似乎提供了更少的时间，但请记住，并发性没有额外的费用:
| 计划 | 构建分钟 | 用户/月 |
|---|---|---|
| 免费的 | 50 | 0美元 |
| 标准 | 2500年 | 3美元 |
| 溢价 | 3500年 | 6美元 |
更多信息:
您可以学习如何为示例Python web应用程序设置这些CI系统使用本指南．
收卷
就像这篇文章一样，许多工具被省略了——有些是有意识的，有些是因为我承认甚至不知道它们!
Web开发与其他学科(如移动和桌面软件开发)的结合越来越紧密，新的工具、方法和开发实践不断涌现。别误会，我不是在抱怨。我庆祝它，因为这一切都是为了更好。但它确实以疯狂的方式扩展了可能的路径，你只能期待它在未来会变得更有竞争力。
就像我常说的:如果你想保持价值，保持好奇！
