不理智的
This article is part of a web dev series from Microsoft. Thank you for supporting the partners who make SitePoint possible.
本文是Microsoft的Web开发系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。
It seems like every other day the public is granted some new means of accessing the web. Some days it’s a new browser. Others it’s a new smartphone. Or a tablet. Or an e-reader. Or a video game console. Or a smartwatch. Or a TV. Or a heads-up display. Or a car. Or a refrigerator.
似乎每隔一天，公众就会获得一些新的网络访问方式。 有时它是一个新的浏览器 。 其他人则是新的智能手机 。 或平板电脑 。 或电子阅读器 。 或视频游戏机 。 或智能手表 。 或电视 。 或平视显示器 。 还是汽车 。 或冰箱 。
I worked on one project where the client provided me with a spreadsheet detailing 1,400 different user agents that accessed the login screen for the m-dot site. In two days!
我从事的一个项目中，客户为我提供了一个电子表格，其中详细列出了1400个不同的用户代理，这些代理访问了m点站点的登录屏幕。 在两天！
As further evidence, consider the enlightening details of this post from Jason Samuels of the National Council on Family relations, a non-profit organization:
作为进一步的证据，请考虑非营利组织全国家庭关系委员会的杰森·塞缪尔 ( Jason Samuels)的这篇文章的启发性细节 ：
In 2008, visits from “mobile” devices accounted for only about 0.1% of their traffic. In 2014, that number had skyrocketed to 14.4%. 2008年，来自“移动”设备的访问仅占其访问量的0.1％。 2014年，这一数字飙升至14.4％。 In 2008, they detected 71 different screen resolutions, which is already a lot to consider. By 2014, however, they were seeing 1,000 unique screen resolutions each and every quarter (with over 200 of those recording 10+ visits per quarter). 在2008年，他们检测到71种不同的屏幕分辨率，这已经是很多考虑因素。 但是，到2014年，他们每个季度都会看到1,000种独特的屏幕分辨率(其中200多个记录每个季度记录了10多次访问)。That last stat blows my mind every time I read it. You can’t design for 200 different screens, let alone 1,000. It’s a fool’s errand. And don’t even think of trying to test on that many devices.
每次阅读时，最后一个统计数据都会令我震惊。 您不能设计200个不同的屏幕，更不用说1,000个了。 这是一个傻瓜的差事。 而且甚至不用考虑尝试在那么多设备上进行测试。
And yet, here we are designing websites that can (and will) go anywhere. We need to thoroughly test because we can’t make any assumptions about the browsers and devices being used to access our content.
但是，我们在这里设计的网站可以(并且将会)到任何地方。 我们需要进行彻底的测试，因为我们无法对用于访问我们内容的浏览器和设备进行任何假设。
Testing can be tedious, time consuming, and costly. Surely there’s a way to make it easier. There sure is: Instead of getting hung up on creating one experience that needs to be nearly identical on every browser, we can be smarter about how we build things and treat experience as a continuum.
测试可能是乏味，耗时且昂贵的。 当然，有一种方法可以使它更容易。 可以肯定的是：我们不必为创建一种在每个浏览器上都几乎相同的体验而烦恼，而是可以更聪明地构建事物并将体验视为连续体。
We can build websites that are both nimble enough to work on low powered devices over slow networks and smart enough to take advantage of advanced features and sensors when opportunity knocks.
我们可以建立网站，既灵活，足以通过低速网络和智能足够低功率设备的工作采取的先进特性和传感器机会来临的时候优势。
Wha?! We can have our cake and eat it too? Yes. Yes we can.
ha ?! 我们也可以吃蛋糕吗？ 是。 我们可以。
When dealing with the insane proliferation of web-enabled devices and the great unknown of where our websites will go, it pays to take a step back and focus on what’s important. We need to ask ourselves two simple questions:
在处理启用Web的设备的疯狂增长以及我们网站的去向鲜为人知的时候，有必要退后一步，专注于重要的事情。 我们需要问自己两个简单的问题：
1.What is the purpose of this page, this form, this interface? 1.此页面，此表格，此界面的目的是什么？ 2.What is the simplest way to realize that purpose? 2.实现该目标的最简单方法是什么？Then we need to build that first. Typically we’re talking text, some basic HTML, actual links to other pages, and forms that submit to a back-end of some sort. This is our minimum viable product and it will work anywhere.
然后，我们需要建立一个第一 。 通常，我们在谈论文本，一些基本HTML，指向其他页面的实际链接以及提交给某种后端的表单。 这是我们的最低可行产品，并且可以在任何地方使用。
Then we can look for opportunities to enhance the experience, all while keeping that functional core at the center of the experience.
然后，我们可以寻找机会来增强体验，同时将功能核心放在体验的中心。
We can use CSS to add visual hierarchy to the page, provide some visual interest, and adjust the layout to create a good reading experience on a wide range of screen sizes. We should start from the narrowest screen size we can imagine and let the content guide our breakpoint decisions.
我们可以使用CSS为页面添加视觉层次结构，提供一些视觉趣味，并调整布局以在各种屏幕尺寸上创造良好的阅读体验。 我们应该从我们可以想象的最窄的屏幕尺寸开始， 让内容指导我们的断点决定 。
We’ll use JavaScript to give real-time feedback to our users. We’ll hijack forms and links to lazy load additional content or otherwise avoid full-page refreshes. Heck, we can even take over the entire page and convert it into a single page app.
我们将使用JavaScript向用户提供实时反馈。 我们将劫持表单和链接以延迟加载其他内容 ，否则将避免刷新整页。 哎呀，我们甚至可以接管整个页面并将其转换为一个页面应用程序 。
But we should never sacrifice the functional core.
但是我们绝不应该牺牲功能核心。
This approach to designing for the web is called progressive enhancement and it’s the number one tool for dealing with the one-two punch of older browsers and device proliferation.
这种用于Web的设计方法称为渐进增强 ，它是处理旧版浏览器的一两次打Kong和设备普及的第一工具。
What makes progressive enhancement so helpful when it comes to dealing with this swirling mass of devices and browsers is that the core experience will always be available. There is nothing precluding our users from accessing it, even on a crappy WAP browser or a text-based browser like Lynx or even some no so far-future talking computer that only “sees” the web as text.
在处理大量设备和浏览器漩涡时，逐步增强功能非常有用的原因在于， 始终可以获得核心体验。 即使在糟糕的WAP浏览器或基于文本的浏览器(如Lynx)上，甚至在没有这么远的 ，只能将文本“视为”网络的会说话的计算机上 ，都无法阻止我们的用户访问它。
In order to ensure we don’t accidentally deliver advanced features to less capable browsers like these, we just need to be smart about how we load stuff like CSS and JavaScript.
为了确保我们不会意外地将高级功能提供给功能不强的此类浏览器，我们只需要对如何加载CSS和JavaScript等内容有所了解。
Some basic CSS—think typography, color, etc.—will be usable by just about anyone, so we can put all that stuff in one CSS file (e.g. basic.css) and include it with a standard link. Then we can tuck all of our layout rules and other advanced CSS into a separate CSS file (e.g. advanced.css) that we link to with an associated media query.
几乎任何人都可以使用一些基本CSS(例如字体，颜色等)，因此我们可以将所有这些东西放在一个CSS文件中(例如basic.css )，并将其包含在标准link 。 然后，我们可以将所有布局规则和其他高级CSS放入单独CSS文件(例如， advanced.css )中，并通过关联的媒体查询链接到该文件。
<link rel="stylesheet" href="default.css" media="all"> <link rel="stylesheet" href="advanced.css" media="only screen">Any browsers that don’t understand media queries will ignore the second CSS file entirely and receive only the linear, mobile view. Easy peasy, and IE8 gets the mobile layout (a baseline level of support that is not likely to cause you any testing headaches).
任何不理解媒体查询的浏览器都将完全忽略第二个CSS文件，并且仅接收线性移动视图。 轻松自如，IE8获得了移动版式(基线支持水平不太可能引起您的测试麻烦)。
You can even take things a step further and use the @supports block within advanced.css to limit certain rule sets to only the browsers that support specific CSS features.
您甚至可以更进一步，并使用advanced.css中的 @supports 块将某些规则集限制为仅支持特定CSS功能的浏览器。
Of course, CSS support issues are nothing compared to JavaScript, so sometimes it’s best not to deliver certain bits of JavaScript-based functionality to browsers that can’t handle it. This is where feature (and object) detection becomes incredibly useful:
当然，与JavaScript相比，CSS支持问题无济于事，因此有时最好不要将某些基于JavaScript的功能交付给无法处理的浏览器。 这是功能(和对象)检测变得异常有用的地方：
if ( 'querySelector' in document ) { // We can use querySelector! }You can also use inverted conditional comments to prohibit older versions of IE from getting JavaScript in the first place (which means you don’t even need to worry about debugging JavaScript there). Here’s an example that hides main.js from IE8 and below, but makes it available to IE9 on up and to every other non-IE browser.
您还可以使用反向条件注释来禁止较早版本的IE首先获取JavaScript(这意味着您甚至不必担心在那里调试JavaScript)。 这是一个示例，它在IE8及以下版本中隐藏main.js，但可将其提供给IE9以及更高版本的浏览器，以及所有其他非IE浏览器。
<!--[if gt IE 8]><!--> <script src="main.js"></script> <!--<![endif]-->By being conservative in what we deliver to browsers we ensure the greatest level of support, but can still optimize for more advanced ones. This makes testing so much easier because we know older browsers will be okay with the basics and we aren’t trying to use JavaScript features unless we know they’re available.
通过保守我们提供给浏览器的内容，我们可以确保获得最大程度的支持，但仍可以针对更高级的浏览器进行优化 。 这使测试变得非常容易，因为我们知道较旧的浏览器可以使用这些基础知识，并且除非知道它们可用，否则我们不会尝试使用JavaScript功能。
Progressive enhancement helps us avoid a lot of rendering and scripting issues before we even get to the testing phase of a project, but eventually we do need to sit down and run our projects through their paces.
渐进式增强功能可以帮助我们在进入项目测试阶段之前避免很多渲染和脚本问题，但最终我们确实需要坐下来并按照他们的进度来运行我们的项目。
In order to keep testing manageable during development, it’s best to test in one browser we know to have good web standards support. It will provide a basic gut-check for our work. Once we are pretty confident things are working as they should be, we can begin more thorough testing on a variety of browsers and devices.
为了使测试在开发过程中易于管理，最好在已知具有良好Web标准支持的浏览器中进行测试。 它将为我们的工作提供基本的检查。 一旦我们对一切都可以正常运行充满信心，就可以开始在各种浏览器和设备上进行更彻底的测试。
I personally keep several versions of each major browser on my laptop at any given time. I work on a Mac, so I typically have a few versions of Chrome, Firefox, and Opera lying around. You can get older versions of these browsers here:
在任何给定时间，我个人都会在笔记本电脑上保留每个主要浏览器的多个版本。 我在Mac上工作，因此通常会有几个版本的Chrome，Firefox和Opera。 您可以在这里获取这些浏览器的旧版本：
Chromium Archive
Chrome档案
Firefox Archive
Firefox存档
Opera Archive
歌剧档案
It’s near-impossible to get older versions of Safari running on modern versions of OS X, so I typically just have the latest version locally.
要使Safari的旧版本运行在现代版本的OS X上几乎是不可能的，因此我通常只在本地拥有最新版本。
For testing on Windows versions of said browsers, I typically have anywhere from 3–5 virtual machines running various Windows versions with their associated browser version and (typically) a copy of Chrome, Firefox, and Opera for good measure. The MS Edge Dev site offers free Windows VMs for download. If you’re just looking to get a gut-check in the latest and greatest from Microsoft, there’s also the Remote.IE service, which allows you to connect to a virtualized version of the browser.
为了在上述浏览器的Windows版本上进行测试，我通常会使用3–5个运行各种Windows版本的虚拟机及其相关的浏览器版本，并(通常)使用Chrome，Firefox和Opera的副本作为衡量标准。 MS Edge Dev站点提供免费的Windows VM供下载 。 如果您只是想从Microsoft获得最新，最强大的功能 ，还有Remote.IE服务 ，该服务可让您连接到浏览器的虚拟版本。
If you develop on Windows or Linux, you’ll need access to a Mac or you’ll have to rely on virtualization to test on that platform. I’ll discuss virtualization in a moment.
如果您使用Windows或Linux进行开发，则需要访问Mac，或者必须依靠虚拟化才能在该平台上进行测试。 我将在稍后讨论虚拟化。
Once you’ve thoroughly tested in the various desktop browsers, it’s time to take the deep dive into the world of devices. If you’re unsure where to begin, take a look at your analytics; but take them with a grain of salt. Analytics can lead you to make false assumptions. For example, if you see a low percentage of Blackberry users, could that be because your site just doesn’t work well in Blackberry so they don’t stick around (or come back)? Beware the self-fulfilling prophecy.
在各种台式机浏览器中进行了全面测试之后，就该深入了解设备领域了。 如果不确定从哪里开始，请查看您的分析； 但是要带一点盐。 分析可能会导致您做出错误的假设。 例如，如果您看到Blackberry用户的比例较低，是否可能是因为您的网站在Blackberry中无法正常运行，所以他们不会停留(或回来)？ 当心自我实现的预言。
If you have the budget, by all means pick up some devices to have on hand for testing. You can use tools like Adobe’s Edge Inspect, Vanamco’s Ghostlab, or Viljami Salminen’s Remote Preview (or a combination of all of the above) to synchronize browsing on a handful of devices. Some of these tools also allow for remote inspection of the device to debug CSS and JavaScript. Weinre (which Adobe Edge Inspect uses) and Vorlon.js also provide remote inspection functionality.
如果您有预算，请务必拿起一些设备进行测试。 您可以使用Adobe的Edge Inspect ， Vanamco的Ghostlab或Viljami Salminen的Remote Preview (或以上所有方法的组合)之类的工具来同步少数设备上的浏览。 其中一些工具还允许远程检查设备以调试CSS和JavaScript。 Weinre (Adobe Edge Inspect使用)和Vorlon.js还提供了远程检查功能。
If you are lucky enough to have one nearby, you should stop by your local open device lab (ODL) to run your tests. ODLs are free community resources, typically offered by a web design studio or an individual who happens to be sitting on a ton of devices. Someone at the ODL should be able to help you pick out devices to test on and introduce you to the testing tools they have available in the lab.
如果您很幸运能在附近有一个实验室 ，则应在当地的开放设备实验室(ODL)停下来进行测试。 ODL是免费的社区资源，通常由Web设计工作室或恰好坐在大量设备上的个人提供。 ODL的某人应该能够帮助您挑选要测试的设备，并向您介绍它们在实验室中可用的测试工具。
If you don’t have an ODL nearby, you can also do some guerrilla-style testing in your local mobile phone or electronics store. Just make sure they have real devices… you won’t get far on the fake plastic ones.
如果附近没有ODL，也可以在本地手机或电子产品商店中进行游击式测试。 只要确保它们具有真实的设备……您就不会对假的塑料设备感到厌烦。
If none of these are options for you, there’s always virtualization. You can download and install emulators for a variety of mobile browsers and devices. Additionally, services like Browserstack and CrossBrowserTesting offer access to hundreds of virtual desktops and devices for a nominal fee.
如果这些都不是您的选择，那么总会有虚拟化。 您可以为各种移动浏览器和设备下载并安装模拟器 。 此外， Browserstack和CrossBrowserTesting之类的服务只需象征性的费用即可访问数百个虚拟桌面和设备。
Virtualization will never give you the same experience as holding a real device in your hand. The performance is rarely the same and you don’t get any sort of feel for how the device responds to your input. I once stumbled on an Android 2.3 bug wherein generated content was being re-generated and re-inserted every time the device was rotated. I doubt I would have discovered that using an emulator. That said, emulators can help you get a rough idea of whether your interface works or not.
虚拟化永远不会给您带来与手持真实设备相同的体验。 性能很少是相同的，并且您对设备如何响应您的输入没有任何感觉。 我曾经偶然发现一个Android 2.3错误，该错误在每次旋转设备时都会重新生成并重新插入生成的内容。 我怀疑我会发现使用模拟器。 也就是说，仿真器可以帮助您大致了解您的界面是否有效。
Regardless of the means by which you procure your testing devices, try to cover a good cross-section. Pick some low-end ones, a couple older high-end devices, and handful of the latest flagships, and a wide variety of screen sizes and resolutions. Make sure you have good coverage in terms of operating systems too—the latest iOS and Android versions are a given, but make sure you have a Windows device or two, a few Blackberry options, and some older Android and iOS versions in the mix. Then throw in an oddball or two to see if your interfaces hold up.
不论购买测试设备的方式如何，都应尝试覆盖良好的横截面。 选择一些低端设备，几个较旧的高端设备，少数几个最新旗舰产品以及各种屏幕尺寸和分辨率。 确保在操作系统方面也有很好的覆盖范围-提供了最新的iOS和Android版本，但请确保您具有一两个Windows设备，一些Blackberry选项以及一些较旧的Android和iOS版本。 然后扔一 两 怪 ，看看你的界面是否能承受 。
It’s important to bear in mind that we will never be able to give each user on each device exactly the same experience. We need to be okay with that—experience is a continuum. As long as our users can accomplish what they need to on our sites, they will be well-served.
重要的是要记住，我们将永远无法为每个设备上的每个用户提供完全相同的体验。 我们必须对此没事-经验是一个连续的过程。 只要我们的用户可以在我们的网站上完成他们需要做的事情，他们就会得到很好的服务。
If we really want to make things easy on ourselves (and our team), we should consider building a pattern library before we build a single page of our website.
如果我们真的想让我们自己(和我们的团队)感到轻松，那么在构建网站的单个页面之前，应该考虑构建模式库 。
Breaking our interfaces down into discrete, repeatable patterns (e.g. a label and form control, a tabbed interface, etc.) lets us look at each in isolation and test it that way too. Testing in isolation is far easier than trying to debug a page with a lot of moving parts.
将我们的界面分解为离散的，可重复的模式(例如，标签和表单控件，选项卡式界面等)，我们可以单独查看每个界面并进行测试。 与尝试调试包含许多活动部件的页面相比，隔离测试要容易得多。
Gathering our patterns into a live, web-based pattern library allows anyone on our team to collect the patterns they need to build a given interface as easily as they’d assemble a plate at a smörgåsbord. And if we really want to streamline the building and testing process, we can even make the patterns importable into the live site so everything stays in sync.
将我们的模式收集到基于Web的实时模式库中后，我们团队中的任何人都可以像在smörgåsbord上组装板一样轻松地收集构建给定界面所需的模式。 而且，如果我们真的想简化构建和测试过程，我们甚至可以将这些模式导入到实时站点中，以便所有内容保持同步。
With the constant onslaught of new devices, form factors, and considerations, it’s tempting to throw up our hands and find another line of work. The pace of advancement is so brisk, it’s just hard to keep up, let alone feel like we’re on top of where things are headed.
随着新设备，外形尺寸和注意事项的不断冲击，诱使我们动手寻找另一条工作线是很诱人的。 进步的步伐是如此之快，很难跟上，更别说感觉我们处在前进的道路上。
Thankfully, however, all is not lost. By taking a step back and focusing on what matters, embracing experience as a continuum, and being deliberate in how (and when) we deliver certain features and functionality to browsers, we’ll head most issues off at the pass.
幸运的是，一切并没有丢失。 通过退后一步并专注于重要的事情，以连续的方式接受经验，并仔细研究如何(以及何时)为浏览器提供某些功能，我们将一目了然地解决大多数问题。
This relieves some of the pressure (and frustration) from the testing process and frees us up to test on a wider variety of devices and browsers, which means we’ll be able to provide a solid experience for more users, no matter what marvel of technological wizardry they happen to be using at the time.
这减轻了测试过程中的一些压力(和挫败感)，使我们可以在各种设备和浏览器上进行测试，这意味着无论如何，我们都将能够为更多用户提供可靠的体验他们当时正在使用的技术巫术。
Everybody wins.
每个人都赢。
Microsoft has a bunch of free learning on many open source JavaScript topics and we’re on a mission to create a lot more with Microsoft Edge. Here are some to check-out:
微软在许多开源JavaScript主题上有大量免费学习知识，我们的使命是利用Microsoft Edge创造更多内容。 这里有一些要退房：
Microsoft Edge Web Summit 2015 (a complete series of what to expect with the new browser, new web platform features, and guest speakers from the community)
Microsoft Edge Web Summit 2015 (关于新浏览器，新的Web平台功能以及社区来宾演讲者的期望的完整系列)
Build of //BUILD/ and Windows 10 (including the new JavaScript engine for sites and apps)
// BUILD /和Windows 10的构建 (包括用于站点和应用程序的新JavaScript引擎)
Advancing JavaScript without Breaking the Web (Christian Heilmann’s recent keynote)
在不中断网络的情况下推进JavaScript (Christian Heilmann最近的主题演讲)
Hosted Web Apps and Web Platform Innovations (a deep-dive on topics like manifold.JS)
托管的Web应用程序和Web平台创新 (深入研究诸如歧管(JS)之类的主题)
Practical Performance Tips to Make your HTML/JavaScript Faster (a 7-part series from responsive design to casual games to performance optimization)
使您HTML / JavaScript更快的实用性能技巧 (从响应设计到休闲游戏到性能优化的7个系列文章)
The Modern Web Platform JumpStart (the fundamentals of HTML, CSS, and JS)
现代Web平台JumpStart (HTML，CSS和JS的基础知识)
And some free tools to get started: Visual Studio Code, Azure Trial, and cross-browser testing tools – all available for Mac, Linux, or Windows.
还有一些免费的入门工具： Visual Studio Code ， Azure试用版和跨浏览器测试工具 -所有这些工具都可用于Mac，Linux或Windows。
This article is part of the web dev tech series from Microsoft. We’re excited to share Microsoft Edge and the new EdgeHTML rendering engine with you. Get free virtual machines or test remotely on your Mac, iOS, Android, or Windows device at modern.IE.
本文是Microsoft的Web开发技术系列的一部分。 我们很高兴与您共享Microsoft Edge和新的EdgeHTML渲染引擎 。 获取免费的虚拟机或者在你的Mac，iOS设备，Android或Windows设备上远程测试modern.IE 。
翻译自: https://www.sitepoint.com/bringing-sanity-order-device-testing/
不理智的
相关资源：jdk-8u281-windows-x64.exe