如果您是移动Web开发人员，请参阅以下列出的一些经过实践检验的工具，您可能应该在这些工具中使用这些工具。
如今移动是一个如此负载的术语。
例如，当您听到“移动”这个词时，您首先想到的是什么？
你想到了智能手机，不是吗？
有些人会想到在Android或iOS上运行的本机应用程序，如Twitter或Home Depot。有人认为应用程序是一个网站。
在我看来，如果有人建立一个“移动网站”，它被认为是“响应”，无论你在哪个设备上查看，网站看起来都很棒。
但是，在构建新网站时，您使用哪些工具来帮助您的移动旅程？
将HTML，CSS和JavaScript打到页面上就不那么容易了，而且你已经完成了。在设计用于移动响应的网站时，有许多因素和考虑因素。
移动趋势继续
最近网站的持续趋势是以移动优先为重点，并使其在众多设备上运行。
桌面。大桌面。笔记本电脑。片。智能手机。为Pete着想的电视！
开发人员和设计人员并不专注于构建网站，而是专注于这些多个设备的网站。
然而，它并不像10年前那么难。这些工具还不够成熟，并且在浏览器不一致方面存在一些缺点。
快进到今天。移动开发现在成为开发人员和设计人员将其他技术集成到网站中的主流话题，以便在他们当时持有的任何设备上为其受众提供最大的体验。
今天，我们将向您展示10个工具的集合，用于在移动设备上构建和测试响应式网站。
1.引导程序（或等效的移动响应CSS库）
我们来谈谈房间里那只明显的大象，让它走开，不是吗？
创建响应式网站的最简单方法是了解断点如何在您喜欢的每个库中工作。
Bootstrap就是这样一个库。
Bootstrap是它的第4个版本，因此它非常成熟并提供额外的JavaScript组件，使您的Web应用程序对读者更具功能性。
您甚至正在阅读使用Bootstrap 100％的站点（如果是RSS'd ... DanylkoWeb）。
现在，如果Bootstrap不能与你的web项目一起工作（我无法想象为什么它不会），一些替代的移动响应式CSS库包括Zurb的Foundation和Skeleton，它们也能很好地工作。
但是我使用Bootstrap的原因有很多：
- 经过验证的成熟图书馆。
- 也适用于第三方库。
- 它很受那些无法设计的开发人员的欢迎。
- 适用于任何类型的设备都很棒（嗯......除了智能手表）。
旁注：我将在未来专门建立一个使用Bootstrap建立网站的帖子。
2. DevTools
另一头大象。
如您所见，有可能在浏览器中显示网站，该浏览器有DevTools（Firefox / Chrome / Edge / Safari / Opera）。
“Fabulous Five”浏览器现在具有类似的功能，所以一旦你理解了它的工作方式，那就是跟踪其他浏览器的DevTools中该功能的位置。
例如，所有这些都有熟悉的F12来打开DevTools面板。
大多数DevTools具有以下基本功能。
- 元素 - 如何通过指向HTML来查找HTML中难以捉摸的元素。
- 源代码（JavaScript） - 在浏览器中调试JavaScript！绝对必须！
- 样式 - 为什么CSS样式不适用于大型桌面并适用于移动设备？
- 网络 - 将内容下载到浏览器需要多长时间？
- 控制台 - 执行JavaScript语法或检查错误消息
- 性能 - 渲染HTML所需的速度有多快，因此您的显示无抖动。
另一个重要的工具是设备视图。有些浏览器还不支持它，但这非常有用。
它有什么作用？在浏览器中启用此选项会使网站呈现，就像您在其他设备上查看该网站一样。
在开发移动Web应用程序时绝对需要这些工具，如果您以前没有使用它们，那么您就错过了。
第一步是通过F12进入网站。
3. Blisk
说到Device View，Blisk团队认为查看移动响应式网站的最佳方式是向浏览器引擎添加工具。有什么更好的地方可以使用渲染工具来协助响应式网站？
Blisk是我最近在四个你从未听说过的浏览器中发现和提到的新工具，它们不属于Fabulous Five（你知道......可能会坚持）。
Blisk在DevTools上进行扩展，您可以收取许多设备配置文件以帮助您进行移动开发。它们提供了近30种设备配置文件，您可以在Blisk浏览器中使用它们。
但是Blisk提供的不仅仅是配置文件。
- 并排查看。
- 滚动同步。
- 自动刷新。
- 截图。
- 屏幕录像机。
此浏览器中的工具数量是Web开发人员在编写响应式Web应用程序时所需要的。
4. ECMAScript兼容性表
当使用JavaScript / ES5 / ES6时，您无法知道是否支持箭头语法或所有浏览器都支持RegExp“y”和“u”标志。
我有这个网站的书签，以协助PWA。
无论您当前使用何种浏览器，第一列都会告诉您支持的内容，您可以使用和不可以使用的内容，并将其与列表中的其他浏览器进行比较。
对于使用响应式移动网站的JavaScript重度开发人员而言，这是一个很好的参考。
5. CanIUse.com
随着JavaScript继续为智能手机带来近乎原生的体验，一些功能随之而来。
CanIUse.com允许您搜索特定技术（相机，本地存储等），CSS术语（CSS网格，CSS计算（）等）和JavaScript术语（模块，箭头语法等）以确定您是否可以在您的移动应用程序中使用它。
例如，如果您前往站点和“我可以使用”标签的右侧，请键入“媒体捕获”，这将告诉您哪些浏览器能够从摄像头，麦克风或文件上载中捕获媒体。
在编写具有硬件兼容性的移动响应应用程序时，了解这一前提将会有很大帮助。
6. Bootsnipp
还记得当我说Bootstrap有大量的追随者吗？Bootsnipp证明了这一点。
Bootsnipp是一个包含Bootstrap片段的站点，可以在您的Bootstrap构建的移动网站中获取和使用。
它提供了许多不同的类别来翻找，一旦找到你喜欢的设计，你就可以检查HTML，CSS和/或JavaScript，并学习如何在你自己的网站上实现它。
还有其他类似于Bootsnipp的网站，但它们似乎拥有最多的Bootstrap代码段。
7.通过Google测试我的网站
自从Google的Mobilegeddon以来，人们一直想知道如何测试他们的网站，以便他们在移动设备上看起来很棒。
通过所有更改，为什么不让Google检查您的网站并告诉您它有什么问题？谷歌救援。
帮助优化您的网站的工具之一是Think With Google 测试我的网站。
此工具通过运行诊断来检查您的站点：
- 检查HTML / CSS。
- 运行JavaScript。
- 使用标准3G连接检查速度。
- 检测图像压缩。
- 移动可用性。
- 与您所在行业的其他网站进行比较。
- 检查页面加载速度。
完成后，它会提供您可以在您的网站上实施的顶级修补程序的免费报告，以使其更快，更便于移动用户使用。
一个绝对伟大的工具。
8.Lighthouse
说到Google，他们还创建了一个开源自动化工具来提高网页质量（而不是测试我的网站不够好）。
如果您使用的是谷歌浏览器，则已安装该工具。导航到要评估的页面，按F12，然后单击“审核”选项卡以开始使用。
如果您没有谷歌浏览器（您有什么问题？），您可以从命令行或节点模块运行它。该网站介绍了如何执行这些选项。
运行灯塔几分钟后，您会收到一份针对您网站的自定义报告。
检查结果并开始采取行动，从谷歌获得100分的高分。
9.你的编辑
我知道这是一个警察，但你会惊讶于你的IDE开始朝着移动的心态努力。
- Visual Studio代码 - IDE 使用Electron使用HTML，CSS和JavaScript 构建，以创建包含HTML，CSS和JavaScript的网站。你想用IDE获得多少响应？
- Visual Studio - 完整的Microsoft IDE，包括用于本机移动开发工作的Xamarin，用于构建SPA和PWA的脚手架，以及在创建新的ASP.NET Core项目时使用Bootstrap构建的响应式网站。
- WebStorm - Jetbrains在WebStorm中包含了一个基于REST的客户端进行测试，它还有很多插件可以与Angular，Aurelia，Meteor，Ember，React以及移动开发等等一起使用。
开发公司认识到移动网站的重要性，并继续在代码编辑器中构建新功能，以便更轻松地创建移动网站。
10. Viewport Resizer
虽然我有一段时间没有使用它，因为Google Chrome的设备工具栏和Blisk的设备配置文件占据了它的位置，我一直很喜欢Viewport Resizer。
单击并将书签拖动到书签工具栏。访问要测试的站点，然后单击书签。
Viewport Resizer在顶部显示一个栏，您可以单击该设备以查看该站点是否响应。
还是一个很棒的工具。
11.Web API测试人员
正如Marc Andreessen在2011年提到的，软件正在蚕食世界，但最近，它更像是网络API正在吞噬世界。
首先，它是SOAP。
现在，基于REST的API是新的“热门”，因为我们需要从我们的PWA，SPA或jQuery应用程序中调用Web API（嗯...我可以在这句话中添加更多的首字母缩略词吗？）
通常，后端团队构建API，然后通知API的前端团队，以便他们可以连接到它并测试它以正确构建UI。
因此开发人员要求使用适当的工具来测试API。
野外用于测试API的主要工具是：
- SOAP UI：完全成熟的IDE，完全用于构建基于SOAP和REST的请求。有一个开源和付费版本的工具。
- Postman IDE：另一个构建基于SOAP和REST的请求的优秀IDE。此外，该工具的开源和付费版本。
- WebStorm：正如我上面提到的，JetBrains最近在他们的WebStorm Web开发工具中添加了一个新的REST客户端，因此您不必离开IDE来测试Web API。
就个人而言，我在工作中使用SOAP UI，在家中使用WebStorm，但我确信每个人都有自己的偏好。
12.W3C mobileOK Checker
起初，我使用的是W3C Mobile Checker，但它已被禁用（Wah-Wah！）。
所以我开始使用W3C mobileOK Checker。
插入您的网址，mobileOK Checker将报告您网站上的所有问题。
但是，要做好准备。它不像谷歌或其他网站调整引擎那么宽容。这是确保您的网站与移动设备兼容并且您遵循实施网络的组织的标准的网站。
结论
虽然我甚至没有接近那里的移动工具数量，但我肯定会错过一些。
随着智能手机用户数量迅速扩展到全球，移动工具变得越来越重要。
每个人都在使用他们的手机上网。
有些人甚至没有在他们家中使用路由器或互联网服务的电脑或笔记本电脑。他们只有手机以及无限制的数据计划才能访问互联网。
在构建移动网站时使用哪种移动工具？我是否想念一个每个人都使用的非常大的工具但是我？在下面发表您的评论，让我们讨论一下移动工具。