绝地救生error_30种面向前端开发人员的救生工具

太过爱你忘了你带给我的痛 2022-12-03 08:56 139阅读 0赞

绝地救生error

**As the functionalities of web apps keep getting ever more sophisticated and complex, web developers need flexible tools to keep up with rising user expectations. The good news is, the web development ecosystem gives us plenty of choice, with both well-established companies and the open-source community racing to build more powerful libraries, frameworks and apps to help developers do their job and increase productivity and efficiency.**

**随着Web应用程序功能的日益复杂和复杂，Web开发人员需要灵活的工具来满足不断增长的用户期望。** **好消息是，Web开发生态系统为我们提供了很多选择，老牌公司和开源社区都在竞相构建功能更强大的库，框架和应用程序，以帮助开发人员完成工作并提高生产力和效率。**

In this post, I’ve rounded up 30 top tools for front-end web developers ranging from code editors and code playgrounds to CSS generators, JS libraries, and more.

在本文中，我为前端Web开发人员总结了30种顶级工具，从代码编辑器和代码操场到CSS生成器，JS库等等。

Let’s dive right in!

让我们潜入吧！

## 代码编辑器 **(**Code Editors**)** ##

Front-end developers spend hours writing or editing code. Therefore, it’s only natural that their closest friend on the job is the code editor. In fact, getting to know their code editor of choice and all its capabilities and shortcuts gives any dev a great advantage in terms of productivity.

前端开发人员花费数小时编写或编辑代码。 因此，很自然，他们在工作中最亲密的朋友是代码编辑器。 实际上，了解他们选择的代码编辑器及其所有功能和快捷方式将使任何开发人员在生产率方面都具有巨大优势。

### [1. Visual Studio代码][1. Visual Studio] **(**[1. Visual Studio Code][1. Visual Studio]**)** ###

Visual Studio Code (VS Code) by Microsoft is a full-blown, free and open-source cross-platform integrated development environment (IDE) — that is, a complex piece of software that allows developers to create, test and deploy an entire project.

Microsoft的Visual Studio Code(VS Code)是成熟的，免费的开放源代码跨平台集成开发环境(IDE)，即，允许开发人员创建，测试和部署整个项目的复杂软件。

Here are some of VS Code’s most popular features:

以下是VS Code最受欢迎的一些功能：

*  IntelliSense, offering syntax highlighting and smart completions based on variable types, function definitions and imported modules
    
    IntelliSense，基于变量类型，函数定义和导入的模块提供语法突出显示和智能补全
 *  debugging capabilities
    
    调试能力
 *  built-in Git commands
    
    内置的Git命令
 *  flexibility and extensibility: you can easily add extensions relative to new languages, themes, etc.
    
    灵活性和可扩展性：您可以轻松添加相对于新语言，主题等的扩展。
 *  easy deployment capabilities
    
    易于部署的功能

You can download VS Code for Windows, MacOS, and Linux.

您可以下载Windows，MacOS和Linux的VS Code。

### [2.原子][2.] **(**[2. Atom][2.]**)** ###

Atom is a free, open-source and powerful cross-platform code editor that allows you to:

Atom是一个免费，开源且功能强大的跨平台代码编辑器，它使您能够：

*  collaborate with other developers using Teletype for Atom
    
    使用Teletype for Atom与其他开发人员合作
 *  work with Git and GitHub with GitHub for Atom
    
    与Git和GitHub和GitHub一起使用Atom
 *  edit code on different platforms
    
    在不同平台上编辑代码
 *  speed up coding with smart auto-completion
    
    通过智能自动完成功能加快编码速度
 *  search for, install and even create your own packages
    
    搜索，安装甚至创建自己的软件包
 *  browse project files
    
    浏览项目文件
 *  split the interface into multiple panes
    
    将界面分为多个窗格
 *  find and replace in a file or in multiple projects
    
    在文件或多个项目中查找和替换
 *  add new themes and customize the editor’s appearance and behavior by tweaking its code.
    
    添加新主题并通过调整代码来自定义编辑器的外观和行为。

### [3.崇高的文字][3.] **(**[3. Sublime Text][3.]**)** ###

Sublime Text introduces itself as “a sophisticated text editor for code, markup and prose”.

Sublime Text本身就是“用于代码，标记和散文的复杂文本编辑器”。

It’s a paid, cross-platform code editing app with tons of features. These include:

这是一款付费的，跨平台的代码编辑应用程序，具有大量功能。 这些包括：

*  *Goto Anything* functionality: shortcuts that allow developers to search for bits of code in files and open files in projects
    
    *Goto Anything*功能：允许开发人员在文件中搜索部分代码并在项目中打开文件的快捷方式
 *  multiple selections
    
    多项选择
 *  powerful API and package ecosystem to extend the built-in functionality
    
    强大的API和软件包生态系统，以扩展内置功能
 *  split editing
    
    分割编辑
 *  easy customization
    
    轻松定制
 *  fast project switching
    
    快速项目切换
 *  high performance
    
    高性能
 *  and more
    
    和更多

## 包装经理 **(**Package Managers**)** ##

Package managers are collections of tools for consistently automating processes like installing, upgrading, configuring and removing programs. Typing `npm install` or yarn install in a command-line interface has become one of the most ordinary parts of a developer’s day-to-day job.

程序包管理器是工具的集合，用于一致地自动化安装，升级，配置和删除程序等过程。 在命令行界面中键入`npm install`或yarn install已成为开发人员日常工作中最普通的部分之一。

### [4. NPM][] **(**[4. NPM][]**)** ###

What is npm? Well, as it says on the company’s website, it’s many things. In particular:

什么是npm？ 嗯，正如公司网站上所说的，这是很多事情。 特别是：

*  it’s the package manager for Node.js that helps JS devs to share packaged modules of code
    
    它是Node.js的软件包管理器，可以帮助JS开发人员共享打包的代码模块
 *  the npm registry is a public collection of packages of open-source code for Node.js, front-end web apps, and more
    
    npm注册表是Node.js，前端Web应用程序等的开源代码包的公共集合。
 *  npm is also the command-line client developers use to install and publish those packages
    
    npm也是开发人员用来安装和发布这些软件包的命令行客户端
 *  npm, Inc. is the company responsible for hosting and maintaining all of the above
    
    npm，Inc.是负责托管和维护以上所有内容的公司

### [5.纱线][5.] **(**[5. Yarn][5.]**)** ###

Yarn is a package manager for installing and sharing code and also a project manager. It’s extensible via plugins, stable, very well documented, free and open source.

Yarn是用于安装和共享代码的程序包管理器，也是项目经理。 它可以通过插件进行扩展，这些插件稳定，文档详尽，免费且开源。

## 捆绑包 **(**Bundlers**)** ##

Module bundlers are used to bundle several modules into one or more optimized bundles for the browser.

模块捆绑器用于将多个模块捆绑为一个或多个针对浏览器的优化捆绑。

### [6. Webpack][] **(**[6. Webpack][]**)** ###

Here’s all the goodness you’ll find in webpack, as it’s detailed in the software’s website:

这是您在webpack中可以找到的所有优点，有关详细信息，请参见该软件的网站：

> At its core, **webpack** is a *static module bundler* for modern JavaScript applications. When webpack processes your application, it internally builds a [dependency graph][] which maps every module your project needs and generates one or more *bundles*. … Since version 4.0.0, **webpack does not require a configuration file** to bundle your project. Nevertheless, it is [incredibly configurable][] to better fit your needs.
> 
> **webpack的**核心是用于现代JavaScript应用程序的*静态模块捆绑*器。 当webpack处理您的应用程序时，它会在内部构建一个[依赖关系图][dependency graph] ，该图映射您项目所需的每个模块并生成一个或多个*捆绑包* 。 …从4.0.0版本开始， **webpack不需要配置文件**来捆绑您的项目。 但是，它可以进行[令人难以置信的配置，][incredibly configurable]以更好地满足您的需求。

### [7.包裹][7.] **(**[7. Parcel][7.]**)** ###

Parcel is a “blazing fast, zero configuration web application bundler”.

Parcel是“快速，零配置的Web应用程序捆绑包”。

Parcel

包

*  is fast
    
    快
 *  bundles all the project’s assets
    
    捆绑所有项目资产
 *  has zero-config code splitting
    
    具有零配置代码拆分
 *  and more.
    
    和更多。

## CSS生成器 **(**CSS Generators**)** ##

Have you ever tried to memorize how to declare CSS properties for gradients, text shadows, Flexbox or Grid, to mention just a few? Not easy. Unless you use some CSS features and their properties over and over again, it’s hard to remember them all. But even those who master CSS sometimes need a refresher on some properties, especially if they haven’t used them in a while.

您是否曾经尝试记住如何声明渐变，文本阴影，Flexbox或GridCSS属性，仅举几例？ 不容易。 除非您反复使用某些CSS功能及其属性，否则很难记住所有这些功能。 但是，即使是精通CSS的人有时也需要对某些属性进行复习，特别是如果他们有一段时间没有使用它们了。

If you need some quick help with the latest and greatest CSS, here are CSS generators to the rescue. Enter the values, preview the result, grab the generated code and run.

如果您需要有关最新最好CSS的快速帮助，请使用此处CSS生成器。 输入值，预览结果，获取生成的代码并运行。

### [8. CSS3生成器][8. CSS3] **(**[8. CSS3 Generator][8. CSS3]**)** ###

The CSS3 Generator is a free online app that lets you quickly write code for a number of modern CSS features like Flexbox, gradients, transitions and transforms, and many more.

CSS3 Generator是一个免费的在线应用程序，可让您快速为许多现代CSS功能(例如Flexbox，渐变，过渡和转换等)编写代码。

Enter the required CSS values, preview the result in real time, copy and paste the generated code. Also, this app shows a list of browsers and their versions where your CSS code is supported.

输入所需CSS值，实时预览结果，复制并粘贴生成的代码。 此外，该应用程序还会显示支持CSS代码的浏览器及其版本的列表。

### [9.终极CSS生成器][9._CSS] **(**[9. The Ultimate CSS Generator][9._CSS]**)** ###

The Ultimate CSS Generator is a free online app that lets you generate code for CSS animation, backgrounds, gradients, borders, filters, and more.

Ultimate CSS Generator是一个免费的在线应用程序，可让您生成CSS动画，背景，渐变，边框，滤镜等的代码。

The interface is user-friendly, the information about browser support for the CSS feature you’re interested in is clear and easy to spot, and the generated code is clean and accurate.

界面友好易用，您感兴趣CSS功能的浏览器支持信息清晰易懂，并且生成的代码简洁准确。

### [10. CSS网格布局生成器，作者：Dmitrii Bykov][10. CSS_Dmitrii Bykov] **(**[10. The CSS Grid Layout Generator by Dmitrii Bykov][10. CSS_Dmitrii Bykov]**)** ###

CSS Grid is awesome, and creating your grid in code gives you full control over the final result. However, it’s helpful to have a visual representation of the grid while you’re coding. Although some major browsers have implemented great tools to let you visualize your grid, some devs could do with some additional help. Here’s where a CSS Grid generator might come in handy.

CSS Grid非常棒，用代码创建网格可以使您完全控制最终结果。 但是，在编码时以可视化方式呈现网格是有帮助的。 尽管一些主要的浏览器已经实现了很棒的工具来使您可视化网格，但是一些开发人员可以在其他帮助下完成工作。 这是CSS Grid生成器可能派上用场的地方。

The CSS Grid Layout Generator by Dmitrii Bykov is free, accessible online, and extremely flexible. I took it for a spin and found that it gives me a lot of control both at the level of the grid container and that of the grid item while providing me with nice preview capabilities and clean code.

Dmitrii Bykov编写CSS Grid Layout Generator是免费的，可以在线访问，并且非常灵活。 我试了一下，发现它在网格容器级别和网格项目级别上为我提供了很多控制，同时为我提供了不错的预览功能和简洁的代码。

If you need help, click on the *How to Use* button and watch the presentation video offered by the app’s author.

如果需要帮助，请单击“ *如何使用”*按钮，然后观看应用程序作者提供的演示视频。

To know more about which CSS Grid generators are available, I put some of the best ones through their paces on SitePoint in my article “[5 Super CSS Grid Generators for Your Layouts][]”.

要了解有关哪些CSS网格生成器可用的更多信息，我在我的文章“ [5种用于布局的超级CSS网格生成器][5 Super CSS Grid Generators for Your Layouts] ”中介绍了一些最好的[CSS网格生成器][5 Super CSS Grid Generators for Your Layouts] 。

## 库和框架 **(**Libraries and Frameworks**)** ##

The demands on today’s web apps place great importance on speed in loading and updating page content. As powerful as modern JavaScript is, when packaged into a library or a framework, it becomes a fantastic tool for writing elegant and maintainable code and cutting back on repetitive and time-consuming typing efforts.

当今Web应用程序的需求非常重视加载和更新页面内容的速度。 与现代JavaScript一样强大，将其打包到库或框架中后，它成为编写优雅且可维护的代码并减少重复且耗时的键入工作的绝佳工具。

### [11.React][] **(**[11. React][11.React]**)** ###

React is a free JavaScript library for building user interfaces created by Facebook developers. It’s super popular and has a well-established company and strong community behind it. Its features include:

React是一个免费JavaScript库，用于构建由Facebook开发人员创建的用户界面。 它非常受欢迎，并且拥有完善的公司和强大的社区。 其功能包括：

*  being declarative, which makes building user interfaces easy to code, update and debug
    
    具有声明性，这使得构建用户界面易于编码，更新和调试
 *  being component-based
    
    基于组件
 *  being agnostic about the technology stack used to build the project
    
    对用于构建项目的技术堆栈不了解

### [12. Vue][] **(**[12. Vue][]**)** ###

Vue is a “progressive JavaScript framework” created by Evan You and maintained by an international team of developers. It’s free to use and released under the MIT license.

Vue是由Evan You创建并由国际开发人员团队维护的“渐进式JavaScript框架”。 它是免费使用的，并根据MIT许可发布。

Vue is:

Vue是：

*  Approachable: if you know the core languages of the web — that is, HTML, CSS and JavaScript — you can learn Vue quickly and start integrating the framework into any web project in no time.
    
    平易近人：如果您了解Web的核心语言(即HTML，CSS和JavaScript)，则可以快速学习Vue并立即开始将框架集成到任何Web项目中。
 *  Versatile: you can easily integrate Vue into a web project as little or as much as you need. You can start by applying Vue to the UI and progressively scale up to its full-blown framework capabilities.
    
    多功能：您可以根据需要轻松地将Vue集成到Web项目中。 您可以先将Vue应用于UI，然后逐步扩展到其成熟的框架功能。
 *  Small and highly performant.
    
    小型且高性能。

### [13.角度][13.] **(**[13. Angular][13.]**)** ###

Created by Google, Angular is the most mature of all the frameworks listed here. It’s free and open source, it’s got the backing of a giant company and the support of a strong community.

Angular由Google创建，是此处列出的所有框架中最成熟的框架。 它是免费和开源的，得到了一家大型公司的支持和强大社区的支持。

Advantages of using Angular include:

使用Angular的优势包括：

*  being cross-platform: web, mobile web, native mobile and native desktop
    
    跨平台：网络，移动网络，本机移动和本机桌面
 *  speed and performance
    
    速度和性能
 *  powerful tooling
    
    强大的工具
 *  the productivity and scalable infrastructure that supports Google’s largest applications
    
    支持Google最大的应用程序的生产力和可扩展的基础架构

## 静态网站生成器 **(**Static Site Generators**)** ##

Static site generators represent a

静态网站生成器代表

> … compromise between using a hand-coded static site and a full CMS, while retaining the benefits of both. In essence, you generate a static HTML-only website using CMS-like concepts such as templates. The content can be extracted from a database but, more typically, Markdown files are used. — [Craig Buckler, “7 Reasons to Use a Static Site Generator][Craig Buckler_ _7 Reasons to Use a Static Site Generator]”
> 
> …在使用手动编码的静态站点和完整的CMS之间进行折衷，同时保留两者的优点。 本质上，您使用类似于CMS的概念(例如模板)生成仅静态HTML的网站。 可以从数据库中提取内容，但是更典型地，使用Markdown文件。 — [Craig Buckler，“使用静态网站生成器的7个理由][Craig Buckler_ _7 Reasons to Use a Static Site Generator] ”

Here are the top two static site generators listed on the [StaticGen][] website.

这是[StaticGen][]网站上列出的前两个静态网站生成器。

### [14. Next.js][] **(**[14. Next.js][]**)** ###

Next is a free and open-source framework for statically exported React apps. Features include:

接下来是一个免费的开源框架，用于静态导出的React应用程序。 功能包括：

*  pre-rendering (Next supports server-side rendering)
    
    预渲染(下一步支持服务器端渲染)
 *  zero configuration
    
    零配置
 *  extensibility
    
    可扩展性
 *  CSS-in-JS
    
    CSS-in-JS
 *  awesome documentation
    
    很棒的文档
 *  and more.
    
    和更多。

### [15.盖茨比][15.] **(**[15. Gatsby][15.]**)** ###

> Gatsby is a free and open source framework based on React that helps developers build blazing fast **websites** and **apps**.
> 
> Gatsby是一个基于React的免费开源框架，可帮助开发人员构建快速的**网站**和**应用程序** 。

Gatsby provides tons of features like:

盖茨比提供了大量功能，例如：

*  the power of React, webpack, modern JavaScript and CSS
    
    React，webpack，现代JavaScript和CSS的强大功能
 *  a rich data plugin ecosystem
    
    丰富的数据插件生态系统
 *  progressive web apps generation
    
    渐进式Web应用程序生成
 *  super easy deployment
    
    超级容易的部署
 *  starters, or pre-packaged Gatsby sites tailored to different use cases
    
    初学者或针对不同用例量身定制的预包装盖茨比网站
 *  and more.
    
    和更多。

## SVG优化器 **(**SVG Optimizers**)** ##

Performance is crucial on the Web: visitors get impatient as they wait for content to load and search engines tend to penalize slow and sluggish websites.

网络上的性能至关重要：访问者在等待内容加载时会不耐烦，搜索引擎往往会惩罚速度缓慢且缓慢的网站。

Optimizing graphics is a necessary step towards building blazing-fast websites and apps, and SVG graphics are no exception. To make sure the SVG code is clean and uncluttered, using an SVG optimizer has become an essential step in the workflow of a front-end developer.

优化图形是构建快速网站和应用程序的必要步骤，SVG图形也不例外。 为确保SVG代码干净整洁，使用SVG优化器已成为前端开发人员工作流程中必不可少的步骤。

Below are two SVG optimizers that do a fantastic job and are widely used by professional devs.

以下是两个出色的SVG优化器，它们被专业开发人员广泛使用。

### [16. SVGOMG，杰克·阿奇博尔德(Jake Archibald)][16. SVGOMG_Jake Archibald] **(**[16. SVGOMG by Jake Archibald][16. SVGOMG_Jake Archibald]**)** ###

SVGOMG is a free online app that lets you apply a number of optimization options to your SVG code and preview the end result. It’s easy to use and it also works offline. Check out this [article by Sara Soueidan][] to learn more.

SVGOMG是免费的在线应用程序，可让您将许多优化选项应用于SVG代码并预览最终结果。 它易于使用，也可以脱机工作。 查阅[Sara Soueidan的][article by Sara Soueidan]这篇[文章][article by Sara Soueidan]以了解更多信息。

### [17. Peter Collingridge的SVG Optimizer][17. Peter Collingridge_SVG Optimizer] **(**[17. SVG Optimizer by Peter Collingridge][17. Peter Collingridge_SVG Optimizer]**)** ###

This is another fantastic, free, online SVG optimization tool you can use to trim your SVG code. It’s intuitive and a breeze to use. For more details on how to get the best out of it, head over to “[The Designer’s Guide to Working with SVG – Pt 1][The Designer_s Guide to Working with SVG _ Pt 1]” by Alex Walker.

这是另一个很棒的免费在线SVG优化工具，可用于修剪SVG代码。 它直观且易于使用。 有关如何最好地利用它的更多详细信息，请转至Alex Walker的“ [SVG设计师指南– Pt 1][The Designer_s Guide to Working with SVG _ Pt 1] ”。

## 动画库 **(**Animation Libraries**)** ##

Animation is present everywhere on the Web, be it in the form of subtle micro effects or the story-telling movement of big chunks of content that gradually unfolds on the screen.

动画以微妙的微特效果或大块内容的讲故事动作(逐渐在屏幕上呈现)的形式出现在Web上的任何地方。

While modern CSS and JavaScript include the features you need to create some cool web animations, the libraries listed below certainly let you do the job much quicker with some amazing results.

虽然现代CSS和JavaScript包含创建一些不错的Web动画所需的功能，但是下面列出的库无疑可以使您更快地完成工作，并获得惊人的结果。

### [18. AnimateCSS][] **(**[18. AnimateCSS][]**)** ###

> **Animate.css** is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
> 
> **Animate.css**是一个可在您的Web项目中使用的即用型跨浏览器动画库。 非常适合强调，主页，滑块和引导注意的提示。

As its name suggests, the library is in pure CSS. Among the pre-packaged effects, you’ll find: attention seekers like bouncing and flashing effects, back entrances and exits, fading in and fading out, and tons more.

顾名思义，该库使用纯CSS。 在预包装的效果中，您会发现：吸引注意力的对象，如弹跳和闪烁效果，后入口和出口，淡入和淡出以及更多。

Features include:

功能包括：

*  quick installation with npm, Yarn or CDN
    
    使用npm，Yarn或CDN快速安装
 *  ease of use
    
    使用方便
 *  option of using CSS custom properties (CSS variables) to customize the animation duration, delay and interactions
    
    使用CSS自定义属性(CSS变量)自定义动画持续时间，延迟和交互的选项
 *  utility classes for delays, speed variations and repetitions
    
    实用程序类，用于延迟，速度变化和重复

### [19. GreenSock(GSAP)][19. GreenSock_GSAP] **(**[19. GreenSock (GSAP)][19. GreenSock_GSAP]**)** ###

GSAP (GreenSock Animation Platform) offers “ultra high-performance, professional-grade animation for the modern web”.

GSAP(GreenSock动画平台)提供“针对现代网络的超高性能，专业级动画”。

Its highly intuitive JavaScript-powered syntax lets you build amazing animations in no time. There’s no limit to what you can animate with GSAP, from DOM elements and JavaScript objects to SVGs, canvas, and WebGL immersive experiences. Furthermore, GSAP is cross-browser and backward-compatible, and offers fantastic documentation and a supportive community.

其高度直观JavaScript驱动的语法使您可以立即构建出色的动画。 从DOM元素和JavaScript对象到SVG，画布和WebGL身临其境的体验，可以使用GSAP进行动画制作的对象没有任何限制。 此外，GSAP是跨浏览器的，并且向后兼容，并且提供了出色的文档和支持社区。

### [20. Anime.js][] **(**[20. Anime.js][]**)** ###

> *Anime.js* (`/ˈæn.ə.meɪ/`) is a lightweight JavaScript animation library with a simple yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.
> 
> *Anime.js* ( `/ˈæn.ə.meɪ/` )是一个轻量级JavaScript动画库，具有简单而强大的API。 它与CSS属性，SVG，DOM属性和JavaScript对象一起使用。

Anime was created by [Julian Garnier][] and is entirely free and open source. Thanks to its intuitive syntax and fantastic docs, you can be up and running with Anime.js in no time.

动漫由[朱利安·加尼尔][Julian Garnier] ( [Julian Garnier][] )创建，完全免费且开源。 凭借其直观的语法和出色的文档，您可以立即使用Anime.js并开始运行。

## 浏览器工具 **(**Browser tools**)** ##

Front-end developers’ best friends, built-in developer tools offered by major browsers are an integral part of day-to-day web programming tasks. They allow developers to understand code written by others, to test changes to the code in real time, and to debug chunks of front-end code, as well as making performance checks and much more.

前端开发人员最好的朋友，主要浏览器提供的内置开发人员工具，是日常Web编程任务中不可或缺的一部分。 它们使开发人员可以理解他人编写的代码，实时测试代码更改，调试前端代码块，以及进行性能检查等等。

These tools keep getting more and more sophisticated and helpful, so much so that I can’t think of ever being able to do without them.

这些工具变得越来越复杂和有用，以至于我无法想到没有它们就无法做到。

Below are developer tools made available by two major browsers, Mozilla Firefox and Google Chrome.

以下是两个主要浏览器Mozilla Firefox和Google Chrome提供的开发人员工具。

### [21. Firefox开发人员工具][21. Firefox] **(**[21. Firefox Developer Tools][21. Firefox]**)** ###

Firefox Developer Tools are some amazing tools built into the Firefox browser that allow developers to examine, edit and debug HTML, CSS and JavaScript code.

Firefox开发人员工具是Firefox浏览器中内置的一些了不起的工具，使开发人员可以检查，编辑和调试HTML，CSS和JavaScript代码。

For a detailed guide on what they are and how to use them, don’t miss this [dedicated reference][] on MDN.

有关它们是什么以及如何使用它们的详细指南，请不要错过MDN上的[专用参考][dedicated reference] 。

### [22. Chrome DevTools][] **(**[22. Chrome DevTools][]**)** ###

For those who mainly use Chrome as their browser of choice, the Chrome DevTools are an essential part of their workflow.

对于那些主要使用Chrome作为首选浏览器的用户，Chrome DevTools是其工作流程的重要组成部分。

> Chrome DevTools is a set of web developer tools built directly into the [Google Chrome][] browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster.
> 
> Chrome DevTools是一组直接内置在[Google Chrome][]浏览器中的网络开发人员工具。 DevTools可以帮助您即时编辑页面并快速诊断问题，最终可以帮助您更快地构建更好的网站。

## 跨浏览器测试 **(**Cross-browser testing**)** ##

Developers have no control over which kind of device their websites or apps are going to be accessed from. In 2019, [over half of the web traffic came from mobile devices][]. On the whole, screen sizes vary from desktop and tablet to smartphone and wearable technology.

开发人员无法控制要从哪种设备访问其网站或应用程序。 在2019年， [超过一半的网络流量来自移动设备][over half of the web traffic came from mobile devices] 。 总体而言，屏幕尺寸从台式机和平板电脑到智能手机和可穿戴技术不等。

As front-end developers, making sure the web page remains usable at any screen size constitutes a core component of our job. While nothing compares to testing websites and apps directly on different browsers and platforms, covering all the bases this way is not an option available to most of us. The services and apps listed below can help.

作为前端开发人员，确保网页在任何屏幕尺寸下都可以使用是我们工作的核心组成部分。 虽然没有什么比直接在不同的浏览器和平台上测试网站和应用程序更适合的方法了，但对于我们大多数人而言，以这种方式涵盖所有基础并不是一个选择。 下面列出的服务和应用程序可以提供帮助。

### [23.犬][23.] **(**[23. Caniuse][23.]**)** ###

I don’t know about you, but when I need to get current information about browser support for any HTML, CSS, SVG, and JavaScript feature — however new or obscure it might be — caniuse is my first go-to website.

我不了解您，但是当我需要获取有关任何HTML，CSS，SVG和JavaScript功能对浏览器支持的最新信息时(无论它是多么新颖或晦涩)，caniuse是我的第一个访问网站。

You’ll get up-to-date statistical results, both at the global and country-specific level, as well as information about specific issues, resources, etc.

您将获得全球和特定国家/地区级别的最新统计结果，以及有关特定问题，资源等的信息。

### [24.我有回应吗？][24.] **(**[24. Am I Responsive?][24.]**)** ###

This is a free online app that lets you quickly check how your website looks at different screen sizes.

这是一个免费的在线应用程序，可让您快速检查网站在不同屏幕尺寸下的外观。

Here’s a list of the features:

以下是功能列表：

*  You can use the app from its website by entering the URL of the site you intend to test in a textbox or from anywhere by using the Am I Responsive bookmarklet on your browser.
    
    您可以通过在文本框中输入要测试的站点的URL，或在任何地方使用浏览器上的Am I Responsive小书签来使用该应用程序的网站。
 *  `http://localhost/` works.
    
    `http://localhost/`可以。
 *  You can click and scroll inside each device on which your website is displayed for testing.
    
    您可以在显示您的网站的每个设备上单击并滚动以进行测试。

### [25.响应式网页设计检查器][25.] **(**[25. Responsive Web Design Checker][25.]**)** ###

Responsive Web Design Checker is another free online app to test how your website looks not only on different screen sizes, but also on a wide range of devices. These include various kinds of desktops and notebooks, tablets like Apple iPad Retina and Amazon Kindle Fire, and smartphones like Apple iPhone 6/7 Plus, Samsung Galaxy, and plenty more.

响应式Web设计检查器是另一个免费的在线应用程序，可以测试您的网站在不同屏幕尺寸以及各种设备上的外观。 这些产品包括各种台式机和笔记本电脑，Apple iPad Retina和Amazon Kindle Fire等平板电脑，以及Apple iPhone 6/7 Plus，三星Galaxy等智能手机。

### [26. BrowserStack][] **(**[26. BrowserStack][]**)** ###

BrowserStack is a popular, paid service that lets you test your website or app on 2000+ real devices and browsers. It works out of the box and is totally secure.

BrowserStack是一项受欢迎的付费服务，可让您在2000多种真实设备和浏览器上测试您的网站或应用程序。 它开箱即用，完全安全。

## 代码协作和游乐场 **(**Code collaboration and Playgrounds**)** ##

If you imagine coders as being individuals who spend their days typing away in splendid isolation for hours, forget it. At least, this is part of the story. The most common scenario involves teams of developers and non developers working on the same project. Therefore, being able to collaborate on projects and share code is of paramount importance to the success of most web projects.

如果您将编码员想象成一个人，他们每天花几个小时在出色的隔离环境中打字，那就算了。 至少，这是故事的一部分。 最常见的情况是涉及同一项目的开发人员团队和非开发人员团队。 因此，能够在项目上进行协作并共享代码对于大多数Web项目的成功至关重要。

Below are some great tools that let you quickly share code, prototype and test project ideas.

以下是一些很棒的工具，可让您快速共享代码，原型和测试项目构想。

### [27. GitHub][] **(**[27. GitHub][]**)** ###

The \#1 go-to place for team collaboration and code sharing cannot be but the super popular and established GitHub.

团队协作和代码共享的第一要务就是超级流行和成熟的GitHub。

Here’s how GitHub introduces itself:

GitHub自我介绍的方法如下：

> GitHub is a development platform inspired by the way you work. From [open source][] to [business][], you can host and review code, manage projects, and build software alongside 50 million developers.
> 
> GitHub是一个受您工作方式启发的开发平台。 从[开源][open source]到[企业][business] ，您可以与5千万开发人员一起托管和审查代码，管理项目并构建软件。

### [28. CodePen][] **(**[28. CodePen][]**)** ###

CodePen has been around for years and is loved and widely used by the front-end developer community. Created by Chris Coyier and Alex Vazquez, it’s amazing for trying out concepts, prototyping, learning to code, and code sharing. It’s [defined by its team][] as follows:

CodePen已经存在了很多年，并且受到前端开发人员社区的喜爱和广泛使用。 由Chris Coyier和Alex Vazquez创建，它非常适合尝试概念，原型设计，学习代码和代码共享。 它[由其团队定义][defined by its team]如下：

> **CodePen is a social development environment**. At its heart, it allows you to write code in the browser, and see the results of it as you build. A useful and liberating online code editor for developers of any skill, and particularly empowering for people learning to code. We focus primarily on front-end languages like HTML, CSS, JavaScript, and preprocessing syntaxes that turn into those things.
> 
> **CodePen是一个社会发展环境** 。 从本质上讲，它允许您在浏览器中编写代码，并在构建时查看其结果。 一个有用且自由的在线代码编辑器，适合任何技能的开发人员，尤其是增强了学习代码的人员的能力。 我们主要关注于前端语言，例如HTML，CSS，JavaScript和可转化为这些内容的预处理语法。

### [29. JSFiddle][] **(**[29. JSFiddle][]**)** ###

Founded by Oskar Krawczyk and Piotr Zalewa, JSFiddle is an [online IDE][] service and online community for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets, known as “fiddles”. It allows for simulated [AJAX][] calls. In 2019, JSFiddle was ranked the second most popular online IDE by the [Popularity of Programming Language][] (PYPL) index based on the number of times it was searched, directly behind [Cloud9 IDE][], worldwide and in the USA.

JSFiddle由Oskar Krawczyk和Piotr Zalewa创立，是一个[在线IDE][online IDE]服务和在线社区，用于测试和展示用户创建的以及协作HTML，CSS和JavaScript代码段，即“小提琴”。 它允许模拟[AJAX][]调用。 在2019年，JSFiddle根据被搜索的次数(根据[编程语言][Popularity of Programming Language]的[流行度][Popularity of Programming Language] (PYPL)索引)被评为第二大最受欢迎的在线IDE，在全球和美国紧随[Cloud9 IDE之后][Cloud9 IDE] 。

### [30.独奏][30.] **(**[30. SoloLearn][30.]**)** ###

SoloLearn is a great online playground that lets you test HTML, CSS and JavaScript code. It also offers basic coding courses for free and a forum where developers and learners discuss various code-related topics.

SoloLearn是一个很棒的在线游乐场，可让您测试HTML，CSS和JavaScript代码。 它还免费提供了基础编码课程，并提供了一个论坛，供开发人员和学习者讨论各种与代码相关的主题。

## 结论 **(**Conclusion**)** ##

There are thousands of web development tools available to front-end devs. What’s important is that you understand entirely what each tool does so that you can make the best choice specific to your project’s needs. Front-end web development keeps growing and evolving, so it’s crucial to stay on top of the new shiny tools out there as some will save you hours of development, and more importantly, contribute to a better user experience.

前端开发人员可以使用数千种Web开发工具。 重要的是要完全了解每种工具的作用，以便可以针对项目需求做出最佳选择。 前端Web开发不断发展和发展，因此，掌握最新的闪亮工具至关重要，因为其中一些工具可以节省您的开发时间，更重要的是，可以改善用户体验。

> 翻译自: [https://www.sitepoint.com/life-saving-tools-for-front-end-developers/][https_www.sitepoint.com_life-saving-tools-for-front-end-developers]

绝地救生error

[1. Visual Studio]: https://code.visualstudio.com/
[2.]: https://atom.io/
[3.]: https://www.sublimetext.com/
[4. NPM]: https://www.npmjs.com/
[5.]: https://yarnpkg.com/
[6. Webpack]: https://webpack.js.org/
[dependency graph]: https://webpack.js.org/concepts/dependency-graph/
[incredibly configurable]: https://webpack.js.org/configuration
[7.]: https://parceljs.org/
[8. CSS3]: https://css3generator.com/
[9._CSS]: https://webcode.tools/css-generator
[10. CSS_Dmitrii Bykov]: https://css-grid-layout-generator.pw/
[5 Super CSS Grid Generators for Your Layouts]: https://www.sitepoint.com/css-grid-generators/
[11.React]: https://reactjs.org/
[12. Vue]: https://vuejs.org/
[13.]: https://angular.io/
[Craig Buckler_ _7 Reasons to Use a Static Site Generator]: https://www.sitepoint.com/7-reasons-use-static-site-generator/
[StaticGen]: https://www.staticgen.com/
[14. Next.js]: https://nextjs.org/
[15.]: https://www.gatsbyjs.org/
[16. SVGOMG_Jake Archibald]: https://jakearchibald.github.io/svgomg/
[article by Sara Soueidan]: https://www.sarasoueidan.com/blog/svgo-tools/
[17. Peter Collingridge_SVG Optimizer]: https://petercollingridge.appspot.com/svg-optimiser
[The Designer_s Guide to Working with SVG _ Pt 1]: https://www.sitepoint.com/designers-guide-working-with-svg/
[18. AnimateCSS]: https://animate.style/
[19. GreenSock_GSAP]: https://greensock.com/
[20. Anime.js]: https://animejs.com/
[Julian Garnier]: http://juliangarnier.com
[21. Firefox]: http://firefox-dev.tools/
[dedicated reference]: https://developer.mozilla.org/en-US/docs/Tools
[22. Chrome DevTools]: https://developers.google.com/web/tools/chrome-devtools
[Google Chrome]: https://www.google.com/chrome/
[over half of the web traffic came from mobile devices]: https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/
[23.]: https://caniuse.com/
[24.]: http://ami.responsivedesign.is/
[25.]: https://responsivedesignchecker.com/
[26. BrowserStack]: https://www.browserstack.com/
[27. GitHub]: https://github.com/
[open source]: https://github.com/open-source
[business]: https://github.com/business
[28. CodePen]: https://codepen.io/
[defined by its team]: https://codepen.io/about/
[29. JSFiddle]: https://jsfiddle.net/
[online IDE]: https://en.wikipedia.org/wiki/Online_IDE
[AJAX]: https://en.wikipedia.org/wiki/AJAX
[Popularity of Programming Language]: https://en.wikipedia.org/w/index.php?title=Popularity_of_Programming_Language&action=edit&redlink=1
[Cloud9 IDE]: https://en.wikipedia.org/wiki/Cloud9_IDE
[30.]: https://www.sololearn.com/
[https_www.sitepoint.com_life-saving-tools-for-front-end-developers]: https://www.sitepoint.com/life-saving-tools-for-front-end-developers/