CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>测试的策略 - 学习 Web 开发 | MDN</title><link rel="alternate" title="Strategien zur Durchführung von Tests" href="https://developer.mozilla.org/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies" hrefLang="de"/><link rel="alternate" title="Strategies for carrying out testing" href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies" hrefLang="en"/><link rel="alternate" title="Stratégies pour mener à bien vos tests" href="https://developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies" hrefLang="fr"/><link rel="alternate" title="テスト実行のための戦略" href="https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies" hrefLang="ja"/><link rel="alternate" title="测试的策略" href="https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies" hrefLang="zh"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="本文解释如何进行跨浏览器测试：如何选择要测试的浏览器和设备、如何实际测试这些浏览器和设备，以及如何借助用户群体进行测试。"/><meta property="og:url" content="https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies"/><meta property="og:title" content="测试的策略 - 学习 Web 开发 | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="zh_CN"/><meta property="og:description" content="本文解释如何进行跨浏览器测试：如何选择要测试的浏览器和设备、如何实际测试这些浏览器和设备，以及如何借助用户群体进行测试。"/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.1b60bff1.js"></script><link href="/static/css/main.959b5ea9.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-learn document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/zh-CN/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container "><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/zh-CN/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/zh-CN/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/zh-CN/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/zh-CN/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/zh-CN/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/zh-CN/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/zh-CN/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class="apis-link-container desktop-only "><a href="/zh-CN/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container active"><button type="button" id="guides-button" class="top-level-entry menu-toggle" aria-controls="guides-menu" aria-expanded="false">Guides</button><a href="/zh-CN/docs/Learn" class="top-level-entry">Guides</a><ul id="guides-menu" class="submenu guides hidden inline-submenu-lg" aria-labelledby="guides-button"><li class="apis-link-container mobile-only "><a href="/zh-CN/docs/Learn" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/zh-CN/docs/Learn" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/zh-CN/docs/Learn/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/zh-CN/docs/Learn/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/zh-CN/docs/Learn/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/zh-CN/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/zh-CN/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/zh-CN/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/zh-CN/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/zh-CN/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/zh-CN/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/zh-CN/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fzh-CN%2Fdocs%2FLearn%2FTools_and_testing%2FCross_browser_testing%2FTesting_strategies" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fzh-CN%2Fdocs%2FLearn%2FTools_and_testing%2FCross_browser_testing%2FTesting_strategies" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Learn" class="breadcrumb" property="item" typeof="WebPage"><span property="name">学习 Web 开发</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Learn/Tools_and_testing" class="breadcrumb" property="item" typeof="WebPage"><span property="name">工具和测试</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing" class="breadcrumb" property="item" typeof="WebPage"><span property="name">跨浏览器测试</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">测试的策略</span></a><meta property="position" content="4"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>中文 (简体)</span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="de" href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies" class="button submenu-item"><span>Deutsch</span><span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></a></li><li class=" "><a data-locale="en-US" href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies" class="button submenu-item"><span>日本語</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="container"><div class="notecard localized-content-note"><p><a href="/zh-CN/docs/MDN/Community/Contributing/Translated_content#活跃语言">此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。</a></p></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar" data-macro="LearnSidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">在本文中</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#选择要测试的浏览器和设备">选择要测试的浏览器和设备</a></li><li class="document-toc-item "><a class="document-toc-link" href="#你将要测试什么？">你将要测试什么？</a></li><li class="document-toc-item "><a class="document-toc-link" href="#建立测试实验环境">建立测试实验环境</a></li><li class="document-toc-item "><a class="document-toc-link" href="#用户测试">用户测试</a></li><li class="document-toc-item "><a class="document-toc-link" href="#总结">总结</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/zh-CN/docs/Learn/Getting_started_with_the_web">新手请从这开始！</a></li><li><details><summary>Web 入门</summary><ol><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web">Web 入门</a></li><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基础软件</a></li><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">你的网站会是什么样子？</a></li><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a></li><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML 基础</a></li><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS 基础</a></li><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 基础</a></li><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Publishing_your_website">发布你的网站</a></li><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/How_the_Web_works">万维网是如何工作的</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/HTML">HTML——构建 Web</a></li><li><details><summary>HTML 介绍</summary><ol><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML 简介</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started">开始学习 HTML</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">“头”里有什么——HTML 元信息</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML 文本处理基础</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">创建超链接</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">文本格式进阶</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">文档与网站架构</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTML 调试</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">标记信件</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">构建网页内容</a></li></ol></details></li><li><details><summary>多媒体与嵌入</summary><ol><li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding">多媒体与嵌入</a></li><li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML 中的图片</a></li><li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">视频和音频内容</a></li><li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">从 object 到 iframe——其他嵌入技术</a></li><li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">向 web 中添加矢量图形</a></li><li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">响应式图片</a></li><li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla 欢迎页面</a></li></ol></details></li><li><details><summary>HTML 表格</summary><ol><li><a href="/zh-CN/docs/Learn/HTML/Tables">HTML 表格</a></li><li><a href="/zh-CN/docs/Learn/HTML/Tables/Basics">HTML 表格基础</a></li><li><a href="/zh-CN/docs/Learn/HTML/Tables/Advanced">HTML 表格进阶特性和无障碍</a></li><li><a href="/zh-CN/docs/Learn/HTML/Tables/Structuring_planet_data">作业：构建行星数据</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/CSS">CSS——设计 Web</a></li><li><details><summary>CSS 第一步</summary><ol><li><a href="/zh-CN/docs/Learn/CSS/First_steps">CSS 入门概述</a></li><li><a href="/zh-CN/docs/Learn/CSS/First_steps/What_is_CSS">什么是 CSS?</a></li><li><a href="/zh-CN/docs/Learn/CSS/First_steps/Getting_started">让我们开始 CSS 的学习之旅</a></li><li><a href="/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS 的组成</a></li><li><a href="/zh-CN/docs/Learn/CSS/First_steps/How_CSS_works">CSS 如何运行</a></li><li><a href="/zh-CN/docs/Learn/CSS/First_steps/Styling_a_biography_page">运用你的新知识</a></li></ol></details></li><li><details><summary>CSS 基础</summary><ol><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks">CSS 构建</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS 选择器</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">类型、类和 ID 选择器</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠、优先级与继承</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_layers">层叠层</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同方向的文本</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">CSS 值和单位</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在 CSS 中调整大小</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">高级区块效果</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试 CSS</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织 CSS</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension">基本的 CSS 理解</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper">创建精美的信纸</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/A_cool_looking_box">一个漂亮的盒子</a></li></ol></details></li><li><details><summary>样式化文本</summary><ol><li><a href="/zh-CN/docs/Learn/CSS/Styling_text">为文本添加样式（样式化文本）</a></li><li><a href="/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals">基本文本和字体样式</a></li><li><a href="/zh-CN/docs/Learn/CSS/Styling_text/Styling_lists">为列表添加样式</a></li><li><a href="/zh-CN/docs/Learn/CSS/Styling_text/Styling_links">样式化链接</a></li><li><a href="/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts">Web 字体</a></li><li><a href="/zh-CN/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">作业：排版社区大学首页</a></li></ol></details></li><li><details><summary>CSS 排版</summary><ol><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout">CSS 布局</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction">介绍 CSS 布局</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow">常规流布局</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox">弹性盒子</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Grids">网格</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Floats">浮动</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Positioning">定位</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">多列布局</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design">响应式设计</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries">媒体查询入门指南</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">传统的布局方法</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">支持旧浏览器</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">作业：基本布局理解</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/JavaScript">JavaScript——用户端动态脚本</a></li><li><details><summary>JavaScript 第一步</summary><ol><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps">JavaScript 第一步</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript">什么是 JavaScript？</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript 初体验</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/What_went_wrong">查找并解决 JavaScript 代码的错误</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Variables">如何存储你需要的信息——变量</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Math">JavaScript 中的基础数学 — 数字和操作符</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Strings">文本处理——JavaScript 中的字符串</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods">有用的字符串方法</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Arrays">数组</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Silly_story_generator">笑话生成器</a></li></ol></details></li><li><details><summary>JavaScript 基础</summary><ol><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks">创建 JavaScript 代码块</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/conditionals">在代码中做决定——条件语句</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/Looping_code">循环吧，代码</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/Functions">函数——可复用的代码块</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">创建你自己的函数</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/Return_values">函数返回值</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/Events">事件介绍</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/Event_bubbling">事件冒泡</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/Image_gallery">图片库</a></li></ol></details></li><li><details><summary>JavaScript 对象介绍</summary><ol><li><a href="/zh-CN/docs/Learn/JavaScript/Objects">JavaScript 对象入门</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Objects/Basics">JavaScript 对象基础</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Objects/Object_prototypes">对象原型</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Objects/Object-oriented_programming">面向对象编程基本概念</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Objects/Classes_in_JavaScript">JavaScript 中的类</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Objects/JSON">使用 JSON</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Objects/Object_building_practice">实践对象构造</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">为“弹球”示例添加新功能</a></li></ol></details></li><li><details><summary>异步 JavaScript</summary><ol><li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous">异步 JavaScript</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing">异步 JavaScript 简介</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Promises">如何使用 Promise</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API">如何实现基于 Promise 的 API</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing_workers">workers 简介</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Sequencing_animations">序列动画</a></li></ol></details></li><li><details><summary>客户端 Web API</summary><ol><li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs">客户端 Web API</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API 简介</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">操作文档</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">从服务器获取数据</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">第三方 API</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">绘图</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">视频和音频 API</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">客户端存储</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/Forms">Web 表单——与用户数据打交道</a></li><li><details><summary>Web 表单核心</summary><ol><li><a href="/zh-CN/docs/Learn/Forms">Web 表单构建块</a></li><li><a href="/zh-CN/docs/Learn/Forms/Your_first_form">创建我的第一个表单</a></li><li><a href="/zh-CN/docs/Learn/Forms/How_to_structure_a_web_form">如何构建 HTML 表单</a></li><li><a href="/zh-CN/docs/Learn/Forms/Basic_native_form_controls">原生表单部件</a></li><li><a href="/zh-CN/docs/Learn/Forms/HTML5_input_types">HTML5 的输入（input）类型</a></li><li><a href="/zh-CN/docs/Learn/Forms/Other_form_controls">其他表单控件</a></li><li><a href="/zh-CN/docs/Learn/Forms/Styling_web_forms">样式化 Web 表单</a></li><li><a href="/zh-CN/docs/Learn/Forms/Advanced_form_styling">表单样式化进阶</a></li><li><a href="/zh-CN/docs/Learn/Forms/UI_pseudo-classes">UI 伪类</a></li><li><a href="/zh-CN/docs/Learn/Forms/Form_validation">表单数据校验</a></li><li><a href="/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data">发送表单数据</a></li></ol></details></li><li><details><summary>Web 表单进阶</summary><ol><li><a href="/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls">如何构建自定义表单控件</a></li><li><a href="/zh-CN/docs/Learn/Forms/Sending_forms_through_JavaScript">使用 JavaScript 发送表单</a></li><li><a href="/zh-CN/docs/Learn/Forms/Property_compatibility_table_for_form_controls">表单控件兼容性列表</a></li><li><a href="/zh-CN/docs/Learn/Forms/HTML_forms_in_legacy_browsers">旧式浏览器中的 HTML 表单</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/Accessibility">无障碍——使每个人都能使用 Web</a></li><li><details><summary>无障碍指南</summary><ol><li><a href="/zh-CN/docs/Learn/Accessibility">无障碍</a></li><li><a href="/zh-CN/docs/Learn/Accessibility/What_is_accessibility">什么是无障碍？</a></li><li><a href="/zh-CN/docs/Learn/Accessibility/HTML">HTML：无障碍的良好基础</a></li><li><a href="/zh-CN/docs/Learn/Accessibility/CSS_and_JavaScript">CSS 和 JavaScript 无障碍最佳实践</a></li><li><a href="/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA 基础</a></li><li><a href="/zh-CN/docs/Learn/Accessibility/Multimedia">多媒体无障碍</a></li><li><a href="/zh-CN/docs/Learn/Accessibility/Mobile">移动端无障碍</a></li><li><a href="/zh-CN/docs/Learn/Accessibility/Accessibility_troubleshooting">测验：无障碍疑难解答</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/Performance">性能——使网站快速响应</a></li><li><details><summary>性能指南</summary><ol><li><a href="/zh-CN/docs/Learn/Performance">Web 性能</a></li><li><a href="/zh-CN/docs/Learn/Performance/why_web_performance">Web 性能的重要性</a></li><li><a href="/zh-CN/docs/Learn/Performance/What_is_web_performance">什么是 web 性能？</a></li><li><a href="/zh-CN/docs/Learn/Performance/Perceived_performance">感知性能</a></li><li><a href="/zh-CN/docs/Learn/Performance/Measuring_performance">测量性能</a></li><li><a href="/zh-CN/docs/Learn/Performance/Multimedia">多媒体：图片</a></li><li><a href="/zh-CN/docs/Learn/Performance/video">多媒体：视频</a></li><li><a href="/zh-CN/docs/Learn/Performance/JavaScript">JavaScript 性能优化</a></li><li><a href="/zh-CN/docs/Learn/Performance/HTML">HTML 性能优化</a></li><li><a href="/zh-CN/docs/Learn/Performance/CSS">CSS 性能优化</a></li><li><a href="/zh-CN/docs/Learn/Performance/business_case_for_performance">web 性能的商业案例</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/MathML">MathML——使用 MathML 语言撰写数学表达式</a></li><li><details><summary>MathML 第一步</summary><ol><li><a href="/zh-CN/docs/Learn/MathML/First_steps">MathML 入门概述</a></li><li><a href="/zh-CN/docs/Learn/MathML/First_steps/Getting_started">MathML 使用入门</a></li><li><a href="/zh-CN/docs/Learn/MathML/First_steps/Text_containers">MathML 文本容器</a></li><li><a href="/zh-CN/docs/Learn/MathML/First_steps/Fractions_and_roots">MathML 分数和根号</a></li><li><a href="/zh-CN/docs/Learn/MathML/First_steps/Scripts">MathML 附加符号</a></li><li><a href="/zh-CN/docs/Learn/MathML/First_steps/Tables">MathML 表格</a></li><li><a href="/zh-CN/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas">三个著名的数学公式</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/../Games">游戏——开发 Web 游戏</a></li><li><details><summary>指南和基础教程</summary><ol><li><a href="/zh-CN/docs/Games/Introduction">Web 游戏开发简介</a></li><li><a href="/zh-CN/docs/Games/Techniques">游戏开发技术</a></li><li><a href="/zh-CN/docs/Games/Tutorials">教程</a></li><li><a href="/zh-CN/docs/Games/Publishing_games">发布游戏</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/Tools_and_testing">工具与测试</a></li><li><details><summary>客户端 web 开发工具</summary><ol><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools">理解客户端 web 开发工具</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">客户端工具概述</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">命令行速成课</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">软件包管理基础</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">介绍完整的工具链</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">部署我们的应用</a></li></ol></details></li><li><details><summary>客户端框架介绍</summary><ol><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">客户端框架介绍</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">框架的主要特性</a></li></ol></details></li><li><details><summary>React</summary><ol><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">React 入门</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">开始我们的 React 待办清单</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">组件化我们的 React App</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li></ol></details></li><li><details><summary>Ember</summary><ol><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li></ol></details></li><li><details><summary>Vue</summary><ol><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">开始使用 Vue</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">创建第一个 Vue 组件</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">渲染 Vue 组件列表</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">使用 Vue event、method 和 model 添加一个新的 todo 表单</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">使用 CSS 为 Vue 组件添加样式</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Vue 中的计算属性</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue 中的条件渲染：编辑现有的待办事项</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">使用 Vue 模板引用进行焦点管理</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue 资源</a></li></ol></details></li><li><details><summary>Svelte</summary><ol><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Svelte 入门</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">开始编写我们的 Svelte 待办事项列表应用程序</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Svelte 中的动态行为：变量和属性</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">将我们的 Svelte 应用组件化</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Svelte 进阶：响应式、生命周期以及无障碍</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">使用 Svelte store</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">Svelte 对 TypeScript 的支持</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">部署以及下一步</a></li></ol></details></li><li><details><summary>Angular</summary><ol><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started">Angular 入门</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning">Beginning our Angular todo list app</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">Styling our Angular app</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component">Creating an item component</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering">Filtering our to-do items</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building">Building Angular applications and further resources</a></li></ol></details></li><li><details><summary>Git 和 GitHub</summary><ol><li><a href="/zh-CN/docs/Learn/Tools_and_testing/GitHub">Git 和 GitHub</a></li></ol></details></li><li><details open=""><summary>跨浏览器测试</summary><ol><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing">跨浏览器测试</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">跨浏览器测试介绍</a></li><li><em><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies" aria-current="page">测试的策略</a></em></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">处理常见的 HTML 和 CSS 问题</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">处理常见的 JavaScript 问题</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">解决常见的无障碍问题</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">实现特性检测</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">自动化测试简介</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">搭建自己的自动化测试环境</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/Server-side">服务端网页编程</a></li><li><details><summary>第一步</summary><ol><li><a href="/zh-CN/docs/Learn/Server-side/First_steps">服务端网站编程的第一步</a></li><li><a href="/zh-CN/docs/Learn/Server-side/First_steps/Introduction">服务端编程介绍</a></li><li><a href="/zh-CN/docs/Learn/Server-side/First_steps/Client-Server_overview">客户端服务端交互概述</a></li><li><a href="/zh-CN/docs/Learn/Server-side/First_steps/Web_frameworks">服务端 web 框架</a></li><li><a href="/zh-CN/docs/Learn/Server-side/First_steps/Website_security">站点安全</a></li></ol></details></li><li><details><summary>Django Web 框架（Python）</summary><ol><li><a href="/zh-CN/docs/Learn/Server-side/Django">Django Web 框架 (python)</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Introduction">Django 介绍</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/development_environment">设置 Django 开发环境</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: 创建网站的地基</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: 使用模型</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django 管理员站点</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Home_page">Django 教程 5：主页构建</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Generic_views">Django 教程 6: 通用列表和详细信息视图</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Sessions">Django 教程 7: 会话框架</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Authentication">Django 教程 8：用户授权与许可</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Forms">Django 教程 9: 使用表单</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Testing">Django 教程 10: 测试 Django 网页应用</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Deployment">Django 教程 11：部署 Django 到生产环境</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/web_application_security">Django Web 应用安全</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/django_assessment_blog">评估：DIY Django 微博客</a></li></ol></details></li><li><details><summary>Express Web 框架（Node.js/JavaScript）</summary><ol><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs">Express Web 框架（Node.js/JavaScript）</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node 入门</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/development_environment">设置 Node 开发环境</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express 教程：本地图书馆网站</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express 教程 2：创建站点框架</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/mongoose">Express 教程 3：使用数据库 (Mongoose)</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/routes">Express 教程 4：路由和控制器</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express 教程 5: 呈现图书馆数据</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/forms">Express 教程 6: 使用表单</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/deployment">Express 教程 7: 部署到生产环境</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/Common_questions">更多资源</a></li><li><details><summary>常见问题</summary><ol><li><a href="/zh-CN/docs/Learn/Common_questions">常见问题</a></li><li><a href="/zh-CN/docs/Learn/HTML/Howto">使用 HTML 解决常见问题</a></li><li><a href="/zh-CN/docs/Learn/CSS/Howto">解决常见的 CSS 问题</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Howto">解决 JavaSctript 代码的常见问题</a></li><li><a href="/zh-CN/docs/Learn/Common_questions/Web_mechanics">Web 机制</a></li><li><a href="/zh-CN/docs/Learn/Common_questions/Tools_and_setup">工具和安装</a></li><li><a href="/zh-CN/docs/Learn/Common_questions/Design_and_accessibility">设计与无障碍</a></li></ol></details></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">在本文中</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#选择要测试的浏览器和设备">选择要测试的浏览器和设备</a></li><li class="document-toc-item "><a class="document-toc-link" href="#你将要测试什么？">你将要测试什么？</a></li><li class="document-toc-item "><a class="document-toc-link" href="#建立测试实验环境">建立测试实验环境</a></li><li class="document-toc-item "><a class="document-toc-link" href="#用户测试">用户测试</a></li><li class="document-toc-item "><a class="document-toc-link" href="#总结">总结</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="zh-CN"><header><h1>测试的策略</h1></header><div class="section-content"><ul class="prev-next"> <li><a class="button secondary" href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction"><span class="button-wrap"> 上一页 </span></a></li> <li><a class="button secondary" href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing"><span class="button-wrap"> 概述：跨浏览器测试</span></a></li> <li><a class="button secondary" href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS"><span class="button-wrap"> 下一页 </span></a></li> </ul> <p>本文解释如何进行跨浏览器测试：如何选择要测试的浏览器和设备、如何实际测试这些浏览器和设备，以及如何借助用户群体进行测试。</p> <figure class="table-container"><table> <tbody> <tr> <th scope="row">准备：</th> <td> 熟练掌握 <a href="/zh-CN/docs/Learn/HTML">HTML</a>、<a href="/zh-CN/docs/Learn/CSS">CSS</a> 和 <a href="/zh-CN/docs/Learn/JavaScript">JavaScript</a> 语言; 了解<a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">跨浏览器测试的核心概念</a>。 </td> </tr> <tr> <th scope="row">目标：</th> <td>了解跨浏览器测试所涉及的高级概念。</td> </tr> </tbody> </table></figure></div><section aria-labelledby="选择要测试的浏览器和设备"><h2 id="选择要测试的浏览器和设备"><a href="#选择要测试的浏览器和设备">选择要测试的浏览器和设备</a></h2><div class="section-content"><p>由于不可能测试每一种浏览器与设备的组合，只需确保你的网站能在最关键的浏览器和设备上正常运行。在实际操作中，“关键”通常指的是“目标用户群经常使用的”。</p> <p>你可以根据计划提供的支持级别对浏览器和设备进行分类。例如：</p> <ol> <li>A 级：常用/现代浏览器——已确认支持所有功能。进行全面测试并提供完整支持。</li> <li>B 级：较旧版本/功能有限的浏览器——已知存在功能缺失。进行测试，并提供基础体验，确保能够访问所有核心内容和服务。</li> <li>C 级：不常见/未知浏览器——不进行测试，但假定它们是功能齐全的。网站应提供完整内容，至少通过我们的防御性编码能够使用备选方案。</li> </ol> <p>在后续章节中，我们将依照此格式逐步构建支持图表。</p> <div class="notecard note"> <p><strong>备注：</strong>雅虎通过他们的<a href="https://github.com/yui/yui3/wiki/Graded-Browser-Support" class="external" target="_blank">分级浏览器支持</a>方法，最先使这一方法流行起来。</p> </div></div></section><section aria-labelledby="预测你的目标受众最常使用的浏览器"><h3 id="预测你的目标受众最常使用的浏览器"><a href="#预测你的目标受众最常使用的浏览器">预测你的目标受众最常使用的浏览器</a></h3><div class="section-content"><p>通常，这需要基于用户统计数据进行合理猜测。例如，假设你的用户位于北美和西欧：</p> <p>在线搜索结果显示，北美和西欧大多数人使用 Windows 或 Mac 桌面/笔记本电脑，主要浏览器是 Chrome、Firefox、Safari 和 Edge。你可能只需要测试这些浏览器的最新版本，因为这些浏览器会定期更新。这些浏览器都应该放在 A 级别的分类中。</p> <p>在这个统计数据中，大多数人也使用 iOS 或 Android 手机，所以你可能需要测试最新版本的 iOS Safari、旧版 Android 原生浏览器的最后几个版本，以及 iOS 和 Android 上的 Chrome 和 Firefox。最好在手机和平板电脑上都进行测试，以确保响应式设计正常工作。</p> <p>Opera Mini <a href="https://dev.opera.com/articles/opera-mini-and-javascript/" class="external" target="_blank">在运行复杂 JavaScript 方面性能不太好</a>，因此我们也应将其放入 B 级别。</p> <p>因此，我们基于预计用户会使用的浏览器来确定选择测试哪些浏览器。通过这种方法，我们得到了以下支持图表：</p> <ol> <li>A 级：Windows/Mac 上的 Chrome 和 Firefox、Mac 上的 Safari、Windows 上的 Edge、iPhone/iPad 上的 iOS Safari、手机/平板上的 Android 原生浏览器（最新两个版本）、手机/平板上的 Android 版 Chrome 和 Firefox（最新两个版本）</li> <li>B 级：Opera Mini</li> <li>C 级：无</li> </ol> <p>如果你的目标受众主要位于其他地方，那么常用的浏览器和操作系统可能与上述不同。</p> <div class="notecard note"> <p><strong>备注：</strong>“公司 CEO 使用的是黑莓手机，所以我们最好确保网站在该手机上显示良好”也是需要考虑的因素。</p> </div></div></section><section aria-labelledby="浏览器份额统计"><h3 id="浏览器份额统计"><a href="#浏览器份额统计">浏览器份额统计</a></h3><div class="section-content"><p>有些网站会显示特定地区中流行的浏览器。例如，<a href="https://gs.statcounter.com/" class="external" target="_blank">Statcounter</a> 可以提供北美地区的趋势概览。</p></div></section><section aria-labelledby="使用分析工具"><h3 id="使用分析工具"><a href="#使用分析工具">使用分析工具</a></h3><div class="section-content"><p>使用像 <a href="https://www.google.com/analytics/" class="external" target="_blank">Google Analytics</a> 这样的分析网站来获取更准确的数据。它能够为你提供诸如人们在用什么浏览器来浏览你的网站这样的精准的统计数据。当然，这需要你已经有一个网站在使用它，所以它不太适合新上线的网站。</p> <p>你还可以考虑使用开源且注重隐私的分析平台，如 <a href="https://www.openwebanalytics.com/" class="external" target="_blank">Open Web Analytics</a> 和 <a href="https://matomo.org" class="external" target="_blank">Matomo</a>。它们要求你自行托管分析平台。</p> <h4 id="配置_google_analytics">配置 Google Analytics</h4> <ol> <li>首先，你需要一个谷歌帐户。使用此帐户登录 <a href="https://marketingplatform.google.com/about/analytics/" class="external" target="_blank">Google Analytics</a>。</li> <li>选择 <a href="https://analytics.google.com/analytics/web/" class="external" target="_blank">Google Analytics</a>（web）选项，然后点击<em>注册</em>按钮。</li> <li>在注册页面中输入你的网站/应用详细信息。配置过程相当直观；最重要的字段是网站 URL，你需要确保它填写正确。这应当是你的网站/应用的根 URL。</li> <li>填写完所有内容后，按<em>获取跟踪 ID</em>按钮，然后接受显示的服务条款。</li> <li>下一页会为你提供一些代码段和其他说明。对于基本网站，你需要做的是复制<em>网站跟踪</em>代码块，并将其粘贴到你要在网站上使用 Google Analytics 跟踪的所有页面。你可以将跟踪代码放在关闭标记 <code></body></code> 的下方，也可以放在其他适当位置，以防止其与应用程序代码混淆。</li> <li>将更改上传到开发服务器，或其他任何用到你的代码的位置。</li> </ol> <p>就是这样！现在，你的网站应该可以开始报告分析数据了。</p> <h4 id="学习分析数据">学习分析数据</h4> <p>现在你可以回到 <a href="https://analytics.google.com/analytics/web" class="external" target="_blank">Analytics Web</a> 首页，并开始查看你收集到的关于网站的数据（当然，你需要留出一些时间来收集一些实际的数据）。</p> <p>默认情况下，你应该看到类似下面这样的报告标签页：</p> <p> <img src="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies/analytics-reporting.png" alt="Google Analytics 在其主报告仪表板中如何收集数据" width="700" height="386" loading="lazy"> </p> <p>借助 Google Analytics，你可以查看大量的数据（不同类别的自定义报告等等），我们暂时不讨论这些。<a href="https://support.google.com/analytics/answer/9306384?visit_id=637855964517698041-2103767437&rd=1" class="external" target="_blank">开始使用 Analytics</a> 为初学者提供了一些关于报告的指导，这些指导很有用。</p> <p>你可以通过从左侧菜单选择<em>用户 > 技术 > 浏览器和操作系统</em>来查看用户使用的浏览器和操作系统。</p> <div class="notecard note"> <p><strong>备注：</strong>在使用 Google Analytics 时，你需要注意可能存在的误导性偏见，例如，“我们没有 Firefox 移动版用户”可能导致你不再支持 Firefox 移动版。但是，你之所以没有任何 Firefox 移动版用户，可能恰恰就是因为你的网站在 Firefox 移动版上受支持不佳。</p> </div></div></section><section aria-labelledby="其他注意事项"><h3 id="其他注意事项"><a href="#其他注意事项">其他注意事项</a></h3><div class="section-content"><p>你应该将无障碍性作为 A 级测试要求（我们将在我们的<a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">处理常见无障碍性问题</a>文章中详细介绍你应该测试的内容）。</p> <p>此外，你还应注意特定情况下的需求。例如，如果你的产品面向的市场以手机为主要上网手段，那么你可能需要优先支持移动浏览器。</p></div></section><section aria-labelledby="最终的支持图表"><h3 id="最终的支持图表"><a href="#最终的支持图表">最终的支持图表</a></h3><div class="section-content"><p>因此，我们的最终版支持图表如下所示：</p> <ol> <li>A 级：Windows/Mac 的 Chrome 和 Firefox、Mac 的 Safari、Edge（最新两个版本）、iPhone/iPad 的 iOS Safari、手机/平板的 Android 原生浏览器（最新两个版本）、手机/平板的 Android 版 Chrome 和 Firefox（最新两个版本）。通过常见的无障碍测试。</li> <li>B 级：Opera Mini。</li> <li>C 级：Opera 以及其他小众的现代浏览器。</li> </ol></div></section><section aria-labelledby="你将要测试什么？"><h2 id="你将要测试什么？"><a href="#你将要测试什么？">你将要测试什么？</a></h2><div class="section-content"><p>当你向代码库中添加新代码并需要进行测试时，在开始测试之前，你应该列出一份测试需求清单。这样做是为了确保只有满足这些需求后，才能接受新添加的代码。这些需求可能是视觉上的，也可能是功能上的——它们共同构成了网站功能的可用性。</p> <p>考虑以下示例（参见<a href="https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/strategies/hidden-info-panel.html" class="external" target="_blank">源代码</a>，以及<a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/strategies/hidden-info-panel.html" class="external" target="_blank">在线运行的示例</a>）：</p> <p> <img src="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies/sliding-box-demo.png" alt="如何准备一个测试场景，使其涵盖设计和用户需求" width="700" height="455" loading="lazy"> </p> <p>该特性的测试标准可以写成如下所示：</p> <p>A 级和 B 级：</p> <ul> <li>按钮应该能够由用户通过主要控制机制激活，无论是鼠标、键盘还是触摸。</li> <li>切换按钮应该使信息框出现/消失。</li> <li>文本应该可读。</li> <li>使用屏幕阅读器的视力受损用户应该能够访问文本。</li> </ul> <p>A 级：</p> <ul> <li>信息框在出现/消失时应该具有平滑的动画效果。</li> <li>应该有渐变和文字阴影，以增强信息框的外观。</li> </ul> <p>你可能会注意到，根据示例中的文本，它在 IE8 中无法工作——根据我们的支持图表，这是一个问题，如果浏览器不支持 CSS 过渡效果（请参见课程后面的“实施特性检测”部分），你可能需要通过使用特性检测库以不同的方式实现功能。</p> <p>你可能还会注意到，只使用键盘无法使用该按钮——这也需要解决。也许我们可以使用一些 JavaScript 来实现键盘控制切换，或者完全使用其他方法？</p> <p>这些测试标准很有用，因为：</p> <ul> <li>它们在执行测试时为你提供了一组步骤。</li> <li>它们可以很容易地转化为用户组在进行测试时需要遵循的指示（例如，“尝试使用鼠标和键盘激活按钮…”）——请参见下面的<a href="#%E7%94%A8%E6%88%B7%E6%B5%8B%E8%AF%95">用户测试</a>部分。</li> <li>它们还可以为编写自动化测试提供基础。如果你知道要测试什么以及成功条件是什么，编写此类测试就会更容易（请参见本系列中的 <a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment#selenium">Selenium</a> 部分）。</li> </ul></div></section><section aria-labelledby="建立测试实验环境"><h2 id="建立测试实验环境"><a href="#建立测试实验环境">建立测试实验环境</a></h2><div class="section-content"><p>执行浏览器测试的一个选项是自己进行测试。为此，你可能需要使用物理设备和模拟环境的组合（使用模拟器或虚拟机）。</p></div></section><section aria-labelledby="物理设备"><h3 id="物理设备"><a href="#物理设备">物理设备</a></h3><div class="section-content"><p>通常情况下，最好使用真实设备来运行你想要测试的浏览器，这样可以获取最准确的行为和整体用户体验。要想搭建一个合理的低级别设备实验环境，你可能需要以下设备：</p> <ul> <li>安装了你需要测试的浏览器的 Mac 设备，浏览器包括 Firefox、Chrome、Opera 和 Safari。</li> <li>安装了你需要测试的浏览器的 Windows PC，浏览器包括 Edge（或 IE）、Chrome、Firefox 和 Opera。</li> <li>配置较高的 Android 手机和平板，安装了你需要测试的浏览器，包括 Chrome、Firefox 和 Opera Mini Android 版，以及原始的 Android 原生浏览器。</li> <li>配置较高的 iOS 手机和平板，安装了你需要测试的浏览器，包括 iOS Safari 和 Chrome、Firefox、Opera Mini iOS 版。</li> </ul> <p>如果可能的话，以下也是不错的选择：</p> <ul> <li>可用的 Linux PC，以便测试特定于 Linux 版本的浏览器的 bug。Linux 用户通常使用 Firefox、Opera 和 Chrome。如果只有一台机器可用，你可以考虑创建分别在不同分区上运行 Linux 和 Windows 的双启动机器。Ubuntu 的安装程序可以很容易地设置这个；参考 <a href="https://help.ubuntu.com/community/WindowsDualBoot" class="external" target="_blank">Windows 双启动</a>获取帮助。</li> <li>一些低配置的移动设备，这样你就可以测试在性能较弱的处理器上一些特性（比如动画效果）的表现。</li> </ul> <p>你的主要工作机也可以安装其他工具，用于特定目的，比如无障碍审计工具、屏幕阅读器和模拟器/虚拟机。</p> <p>一些大公司拥有设备实验环境，储备了各种不同的设备，使开发人员能够在特定的浏览器/设备组合中查找错误。较小的公司和个人通常无法承担如此复杂的实验环境成本，因此他们通常通过较小的实验环境、模拟器、虚拟机和商业测试应用来解决问题。</p> <p>下面我们将介绍其他选项。</p> <div class="notecard note"> <p><strong>备注：</strong>已经有一些人在努力创建公共可使用的设备实验环境——参见 <a href="https://www.smashingmagazine.com/2016/11/worlds-best-open-device-labs/" class="external" target="_blank">Open Device Labs</a>。</p> </div> <div class="notecard note"> <p><strong>备注：</strong>我们还需要考虑无障碍性——你可以在计算机上安装一些有用的工具来进行无障碍性测试，但我们将在本课程后面的“处理常见无障碍性问题”文章中进行介绍。</p> </div></div></section><section aria-labelledby="模拟器"><h3 id="模拟器"><a href="#模拟器">模拟器</a></h3><div class="section-content"><p>模拟器基本上是在计算机内部运行的程序，用于模拟某种设备或特定的设备环境，使你能够更方便地进行一些测试，而无需寻找特定的硬件/软件组合进行测试。</p> <p>模拟器可以简单地用于测试设备条件。例如，如果你想快速测试响应式设计中的宽度/高度媒体查询，可以使用 Firefox 的<a href="https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/index.html" class="external" target="_blank">响应式设计模式</a>。Safari 也有类似的模式，可以通过转到“Safari > 首选项”并勾选“显示开发菜单”，然后选择“开发 > 进入响应式设计模式”来启用。Chrome 也有类似的功能：设备模式（参见<a href="https://developer.chrome.google.cn/docs/devtools/device-mode" class="external" target="_blank">使用设备模式模拟移动设备</a>）。</p> <p>然而，通常情况下，你需要安装某种模拟器。你可能需要测试的常见设备/浏览器如下：</p> <ul> <li>用于开发 Android 应用程序的官方 <a href="https://developer.android.com/studio/" class="external" target="_blank">Android Studio IDE</a> 对于只需要在 Google Chrome 或旧版 Android 浏览器上测试网站的人来说有点过于笨重，但它带有一个强大的<a href="https://developer.android.com/studio/run/emulator.html" class="external" target="_blank">模拟器</a>。如果你想要更轻量级的选项，可以考虑在 Windows 和 Mac 上运行的 <a href="https://www.andyroid.net/" class="external" target="_blank">Andy</a>。</li> <li>Apple 提供了一个名为 <a href="https://help.apple.com/simulator/mac/current/" class="external" target="_blank">Simulator</a> 的应用程序，它在 <a href="https://developer.apple.com/xcode/" class="external" target="_blank">XCode</a> 开发环境之上运行，并模拟 iPad/iPhone/Apple Watch/Apple TV。原生的 iOS Safari 浏览器包括在内。不幸的是，它只能在 Mac 上运行。</li> </ul> <p>你还可以找到其他移动设备环境的模拟器，例如：</p> <ul> <li>如果你想要测试 Opera Mini，可以单独模拟 <a href="https://dev.opera.com/articles/installing-opera-mini-on-your-computer/" class="external" target="_blank">Opera Mini</a>。</li> </ul> <div class="notecard note"> <p><strong>备注：</strong>许多模拟器实际上需要使用虚拟机（参见下文）；当出现这种情况时，通常会提供说明，并且/或者虚拟机的使用已纳入模拟器的安装程序中。</p> </div></div></section><section aria-labelledby="虚拟机"><h3 id="虚拟机"><a href="#虚拟机">虚拟机</a></h3><div class="section-content"><p>虚拟机是一种在台式计算机上运行的软件应用，它允许用户模拟整个操作系统。每个操作系统都在其自己的虚拟硬盘上运行（这通常由主机机器硬盘上的一个大型文件来表示），实现了隔离。市面上有多种流行的虚拟机应用程序，包括 <a href="https://www.parallels.com/" class="external" target="_blank">Parallels</a>、<a href="https://www.vmware.com/" class="external" target="_blank">VMWare</a> 和 <a href="https://www.virtualbox.org/wiki/Downloads" class="external" target="_blank">Virtual Box</a>。我们更倾向于推荐后者，因为它是免费的。</p> <div class="notecard note"> <p><strong>备注：</strong>运行虚拟机仿真需要大量的硬盘空间；每个模拟的操作系统可能会占用大量内存。你可以选择每次安装所需的硬盘空间；大约 10GB 的空间应该足够了，但有一些建议是使用多达 50GB 或更多的空间，以确保操作系统的可靠运行。大多数虚拟机应用程序都提供了创建<strong>动态分配</strong>的硬盘的功能，它会根据需要自动增长和收缩，这是一个很好的选择。</p> </div> <p>要使用 Virtual Box，你需要：</p> <ol> <li> <p>获取要模拟的操作系统的安装程序光盘或映像（例如 ISO 文件）。Virtual Box 无法提供这些；因为大多数操作系统（如 Windows 操作系统）都是商业产品，不能自由分发。</p> </li> <li> <p><a href="https://www.virtualbox.org/wiki/Downloads" class="external" target="_blank">下载适合你操作系统的安装程序</a>并进行安装。</p> </li> <li> <p>打开应用程序；你将看到以下界面： <img src="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies/virtualbox.png" alt="应用程序窗口的左侧面板列出了 Windows 操作系统和 Opera TV 模拟器。右侧面板包括几个子面板，包括常规信息、系统、显示、设置、音频、网络和预览" width="700" height="512" loading="lazy"> </p> </li> <li> <p>要创建新的虚拟机，请点击左上角的“新建”按钮。</p> </li> <li> <p>按照说明填写适当的对话框。你需要：</p> <ol> <li>为新虚拟机提供名称</li> <li>选择要安装在虚拟机里面的操作系统和版本</li> <li>设置要分配的内存大小（我们建议设置为 2048MB 或 2GB）</li> <li>创建一个虚拟硬盘（在包含“立即创建虚拟硬盘”、“VDI（虚拟磁盘映像）”和“动态分配”选项的对话框中选择默认选项）。</li> <li>选择虚拟硬盘的文件位置和大小（选择一个合理的名称和位置，并指定大约 50GB 的大小，或者根据你的需求选择大小）。</li> </ol> </li> </ol> <p>现在，新的虚拟机应该会出现在 Virtual Box 主用户界面窗口的左侧菜单中。此时，你可以双击打开它，它将开始启动虚拟机，但操作系统尚未安装。此时，你需要在对话框内指向安装程序镜像/光盘，然后它将按照步骤运行安装操作系统的过程，就像在物理机器上一样。</p> <p> <img src="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies/virtualbox-installer.png" alt="如何为特定操作系统安装 Virtual Box" width="600" height="507" loading="lazy"> </p> <div class="notecard warning"> <p><strong>警告：</strong>请确保此时你有要安装在虚拟机上的操作系统映像，并立即进行安装。如果你在此时取消该过程，可能会导致虚拟机无法使用，并需要删除并重新创建它。这并不会导致严重问题，但会很麻烦。</p> </div> <p>完成该过程后，你将在主机计算机上的窗口中运行一个带有操作系统的虚拟机。</p> <p> <img src="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies/virtualbox-running.png" alt="在 macOS 上的 Virtual Box 中托管并运行的 Windows XP 截图" width="700" height="579" loading="lazy"> </p> <p>你需要像对待实际安装的操作系统一样对待这个虚拟操作系统安装——例如，除了安装你想要测试的浏览器之外，还要安装一个防病毒程序来保护它免受病毒的侵害。</p> <p>拥有多个虚拟机非常有用，特别是用于 Windows IE/Edge 测试——在 Windows 上，无法同时安装多个版本的默认浏览器，因此你可能需要建立一个虚拟机库，以根据需要处理不同的测试，例如：</p> <ul> <li>Windows 10 + Edge 14</li> <li>Windows 10 + Edge 13</li> </ul> <div class="notecard note"> <p><strong>备注：</strong>虚拟机的另一个优势在于虚拟磁盘映像的相对独立性。如果你在团队中工作，你可以创建一个虚拟磁盘映像，复制并将其分发给团队其他成员。只需确保你拥有合法许可，以运行所有这些包含版权的 Windows 或其他产品的副本。</p> </div></div></section><section aria-labelledby="自动化和商业应用"><h3 id="自动化和商业应用"><a href="#自动化和商业应用">自动化和商业应用</a></h3><div class="section-content"><p>正如上一章所述，通过使用某种自动化系统，在浏览器测试的过程中你可以减少很多痛苦。你可以配置自己的测试自动化系统（<a href="http://www.seleniumhq.org/" class="external" target="_blank">Selenium</a> 是首选的流行应用程序），它确实需要一些设置，但是当它开始起作用时你会受益匪浅。</p> <p>如果你愿意在测试中投入一些资金，也可以使用一些商业工具，如 <a href="https://saucelabs.com/" class="external" target="_blank">Sauce Labs</a>、<a href="https://www.browserstack.com/" class="external" target="_blank">Browser Stack</a> 和 <a href="https://www.lambdatest.com/" class="external" target="_blank">LambdaTest</a>，它们可以为你完成此类工作，而无需担心配置问题。</p> <p>另一种选择是使用无代码测试自动化工具，如 <a href="https://endtest.io" class="external" target="_blank">Endtest</a>。</p> <p>我们将在后续文章中了解如何使用此类工具。</p></div></section><section aria-labelledby="用户测试"><h2 id="用户测试"><a href="#用户测试">用户测试</a></h2><div class="section-content"><p>我们在本文末尾谈论一下用户测试——如果你有一个有意愿的用户组测试你的新功能，这可能是一个很好的选择。请记住，这可以像你希望的那样廉价又有效——用户组可以是一群朋友、一群同事，也可以是一群无报酬或有报酬的志愿者，这取决于你是否有资金用于测试。</p> <p>通常，你可以让用户在某种开发服务器上查看包含新功能的页面或视图，这样你就不用在完成之前放置最终站点或更改。你应该让他们遵守一些步骤并报告他们得到的结果。提供一组步骤（有时称为脚本）会非常有用，这样你就可以获得与你尝试测试的内容相关的更可靠的结果。我们在上面的<a href="#%E4%BD%A0%E5%B0%86%E8%A6%81%E6%B5%8B%E8%AF%95%E4%BB%80%E4%B9%88%EF%BC%9F">你将要测试什么</a>部分中提到了这一点——很容易将其中详述的测试标准转换为要遵循的步骤。例如，以下内容适用于有视力的用户：</p> <ul> <li>在台式计算机上使用鼠标单击几次问号按钮。刷新浏览器窗口。</li> <li>使用台式计算机上的键盘选择并激活几次问号按钮。</li> <li>在触摸屏设备上点击几次问号按钮。</li> <li>切换按钮应使信息框显示/消失。在上述三种情况中，是否都这样？</li> <li>文字可读吗？</li> <li>信息框在出现/消失时是否能够流畅地生成动画？</li> </ul> <p>运行测试时，最好还是：</p> <ul> <li>尽可能设置单独的浏览器配置文件，禁用浏览器扩展和其他类似功能，并在该配置文件中运行测试（例如，请参阅<a href="https://support.mozilla.org/zh-CN/kb/profile-manager-create-remove-switch-firefox-profiles" class="external" target="_blank">使用配置文件管理器创建和删除 Firefox 配置文件</a> 和<a href="https://support.google.com/chrome/answer/2364824" class="external" target="_blank">与他人共享 Chrome 浏览器或添加角色</a>）。</li> <li>如果可以，运行测试时使用浏览器的隐私（private）模式（例如，Firefox 中的<a href="https://support.mozilla.org/zh-CN/kb/private-browsing-use-firefox-without-history" class="external" target="_blank">隐私浏览</a>，Chrome 中的<a href="https://support.google.com/chrome/answer/95464" class="external" target="_blank">隐私模式</a>），进而不会保存 cookie 和临时文件等内容。</li> </ul> <p>这些步骤旨在确保你正在测试的浏览器尽可能“干净”，即没有安装任何可能影响测试结果的内容。</p> <div class="notecard note"> <p><strong>备注：</strong>如果你有可用的硬件，另一个有用的低功耗选项是在低端手机/其他设备上测试你的网站——随着网站变得更大并且具有更多特性，网站放慢速度的可能性更高，因此你需要开始更多考虑性能。尝试在低端设备上运行你的功能，也会使更高端设备上网站的体验更好。</p> </div> <div class="notecard note"> <p><strong>备注：</strong>某些服务器端开发环境提供了一些有用的机制，可仅向部分用户推出网站变更，从而提供了一种有用的机制，可以在不需要单独的开发服务器的情况下让一部分用户测试特性。示例：<a href="https://github.com/jsocol/django-waffle" class="external" target="_blank">Django Waffle Flags</a>。</p> </div></div></section><section aria-labelledby="总结"><h2 id="总结"><a href="#总结">总结</a></h2><div class="section-content"><p>阅读本文后，你现在应该了解如何识别目标受众/目标浏览器列表，然后基于该列表有效地执行跨浏览器测试。</p> <p>接下来，我们将把注意力转向测试可能发现的实际代码问题，从 HTML 和 CSS 开始。</p><ul class="prev-next"> <li><a class="button secondary" href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction"><span class="button-wrap"> 上一页 </span></a></li> <li><a class="button secondary" href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing"><span class="button-wrap"> 概述：跨浏览器测试</span></a></li> <li><a class="button secondary" href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS"><span class="button-wrap"> 下一页 </span></a></li> </ul></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>Help improve MDN</h2><fieldset class="feedback"><label>Was this page helpful to you?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Yes</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>No</span></button></div></fieldset><a class="contribute" href="https://github.com/mdn/translated-content/blob/main/CONTRIBUTING.md" title="This will take you to our contribution guidelines on GitHub." target="_blank" rel="noopener noreferrer">Learn how to contribute</a>.<p class="last-modified-date">This page was last modified on <time dateTime="2024-09-23T13:12:14.000Z">2024年9月23日</time> by <a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies/contributors.txt" rel="nofollow">MDN contributors</a>.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/translated-content/blob/main/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md?plain=1" title="Folder: zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies (Opens in a new tab)" target="_blank" rel="noopener noreferrer">View this page on GitHub</a> • <a href="https://github.com/mdn/translated-content/issues/new?template=page-report-zh-cn.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FLearn%2FTools_and_testing%2FCross_browser_testing%2FTesting_strategies&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60zh-cn%2Flearn%2Ftools_and_testing%2Fcross_browser_testing%2Ftesting_strategies%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FLearn%2FTools_and_testing%2FCross_browser_testing%2FTesting_strategies%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fblob%2Fmain%2Ffiles%2Fzh-cn%2Flearn%2Ftools_and_testing%2Fcross_browser_testing%2Ftesting_strategies%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fcommit%2Fa4c701a2e54ba097203c9a43a253dc0c1f461d26%0A*+Document+last+modified%3A+2024-09-23T13%3A12%3A14.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Report a problem with this content</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mozilla.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg width="112" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mozilla-footer-logo-svg">Mozilla logo</title><path d="M41.753 14.218c-2.048 0-3.324 1.522-3.324 4.157 0 2.423 1.119 4.286 3.29 4.286 2.082 0 3.447-1.678 3.447-4.347 0-2.826-1.522-4.096-3.413-4.096Zm54.89 7.044c0 .901.437 1.618 1.645 1.618 1.427 0 2.949-1.024 3.044-3.352-.649-.095-1.365-.185-2.02-.185-1.426-.005-2.668.397-2.668 1.92Z" fill="currentColor"></path><path d="M0 0v32h111.908V0H0Zm32.56 25.426h-5.87v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h1.864v3.044h-5.864v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h2.669v3.044H6.642v-3.044h1.863v-7.918H6.642V11.42h5.864v2.11c.839-1.489 2.3-2.39 4.252-2.39 2.02 0 3.878.963 4.566 3.01.778-1.862 2.361-3.01 4.566-3.01 2.512 0 4.812 1.522 4.812 4.84v6.402h1.863v3.044h-.005Zm9.036.307c-4.314 0-7.296-2.635-7.296-7.106 0-4.096 2.484-7.481 7.514-7.481s7.481 3.38 7.481 7.29c0 4.472-3.228 7.297-7.699 7.297Zm22.578-.307H51.942l-.403-2.11 7.7-8.846h-4.376l-.621 2.17-2.888-.313.498-4.907h12.294l.313 2.11-7.767 8.852h4.533l.654-2.172 3.167.308-.872 4.908Zm7.99 0h-4.191v-5.03h4.19v5.03Zm0-8.976h-4.191v-5.03h4.19v5.03Zm2.618 8.976 6.054-21.358h3.945l-6.054 21.358h-3.945Zm8.136 0 6.048-21.358h3.945l-6.054 21.358h-3.939Zm21.486.307c-1.863 0-2.887-1.085-3.072-2.792-.805 1.427-2.232 2.792-4.498 2.792-2.02 0-4.314-1.085-4.314-4.006 0-3.447 3.323-4.253 6.518-4.253.778 0 1.584.034 2.3.124v-.465c0-1.427-.034-3.133-2.3-3.133-.84 0-1.488.061-2.143.402l-.453 1.578-3.195-.34.549-3.224c2.45-.996 3.692-1.27 5.992-1.27 3.01 0 5.556 1.55 5.556 4.75v6.083c0 .805.314 1.085.963 1.085.184 0 .375-.034.587-.095l.034 2.11a5.432 5.432 0 0 1-2.524.654Z" fill="currentColor"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2024 by individual mozilla.org contributors. Content available under <a href="/zh-CN/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies","doc":{"isMarkdown":true,"isTranslated":true,"isActive":true,"flaws":{},"title":"测试的策略","mdn_url":"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies","locale":"zh-CN","native":"中文 (简体)","sidebarHTML":"<ol><li class=\"section\"><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web\">新手请从这开始！</a></li><li><details><summary>Web 入门</summary><ol><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web\">Web 入门</a></li><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">安装基础软件</a></li><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like\">你的网站会是什么样子？</a></li><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">处理文件</a></li><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics\">HTML 基础</a></li><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics\">CSS 基础</a></li><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics\">JavaScript 基础</a></li><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web/Publishing_your_website\">发布你的网站</a></li><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web/How_the_Web_works\">万维网是如何工作的</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/HTML\">HTML——构建 Web</a></li><li><details><summary>HTML 介绍</summary><ol><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML\">HTML 简介</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">开始学习 HTML</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML\">“头”里有什么——HTML 元信息</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals\">HTML 文本处理基础</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks\">创建超链接</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting\">文本格式进阶</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure\">文档与网站架构</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML\">HTML 调试</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter\">标记信件</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content\">构建网页内容</a></li></ol></details></li><li><details><summary>多媒体与嵌入</summary><ol><li><a href=\"/zh-CN/docs/Learn/HTML/Multimedia_and_embedding\">多媒体与嵌入</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML\">HTML 中的图片</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content\">视频和音频内容</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies\">从 object 到 iframe——其他嵌入技术</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web\">向 web 中添加矢量图形</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images\">响应式图片</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page\">Mozilla 欢迎页面</a></li></ol></details></li><li><details><summary>HTML 表格</summary><ol><li><a href=\"/zh-CN/docs/Learn/HTML/Tables\">HTML 表格</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Tables/Basics\">HTML 表格基础</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Tables/Advanced\">HTML 表格进阶特性和无障碍</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Tables/Structuring_planet_data\">作业：构建行星数据</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/CSS\">CSS——设计 Web</a></li><li><details><summary>CSS 第一步</summary><ol><li><a href=\"/zh-CN/docs/Learn/CSS/First_steps\">CSS 入门概述</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/First_steps/What_is_CSS\">什么是 CSS?</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/First_steps/Getting_started\">让我们开始 CSS 的学习之旅</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured\">CSS 的组成</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/First_steps/How_CSS_works\">CSS 如何运行</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/First_steps/Styling_a_biography_page\">运用你的新知识</a></li></ol></details></li><li><details><summary>CSS 基础</summary><ol><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks\">CSS 构建</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Selectors\">CSS 选择器</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors\">类型、类和 ID 选择器</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors\">属性选择器</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements\">伪类和伪元素</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators\">关系选择器</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance\">层叠、优先级与继承</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_layers\">层叠层</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model\">盒模型</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders\">背景与边框</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions\">处理不同方向的文本</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content\">溢出的内容</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units\">CSS 值和单位</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS\">在 CSS 中调整大小</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements\">图像、媒体和表单元素</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables\">样式化表格</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Advanced_styling_effects\">高级区块效果</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS\">调试 CSS</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Organizing\">组织 CSS</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension\">基本的 CSS 理解</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper\">创建精美的信纸</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/A_cool_looking_box\">一个漂亮的盒子</a></li></ol></details></li><li><details><summary>样式化文本</summary><ol><li><a href=\"/zh-CN/docs/Learn/CSS/Styling_text\">为文本添加样式（样式化文本）</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals\">基本文本和字体样式</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Styling_text/Styling_lists\">为列表添加样式</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Styling_text/Styling_links\">样式化链接</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts\">Web 字体</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Styling_text/Typesetting_a_homepage\">作业：排版社区大学首页</a></li></ol></details></li><li><details><summary>CSS 排版</summary><ol><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout\">CSS 布局</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Introduction\">介绍 CSS 布局</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow\">常规流布局</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox\">弹性盒子</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Grids\">网格</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Floats\">浮动</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Positioning\">定位</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Multiple-column_Layout\">多列布局</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design\">响应式设计</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries\">媒体查询入门指南</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods\">传统的布局方法</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers\">支持旧浏览器</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension\">作业：基本布局理解</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/JavaScript\">JavaScript——用户端动态脚本</a></li><li><details><summary>JavaScript 第一步</summary><ol><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps\">JavaScript 第一步</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript\">什么是 JavaScript？</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash\">JavaScript 初体验</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/What_went_wrong\">查找并解决 JavaScript 代码的错误</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/Variables\">如何存储你需要的信息——变量</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/Math\">JavaScript 中的基础数学 — 数字和操作符</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/Strings\">文本处理——JavaScript 中的字符串</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods\">有用的字符串方法</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/Arrays\">数组</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/Silly_story_generator\">笑话生成器</a></li></ol></details></li><li><details><summary>JavaScript 基础</summary><ol><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks\">创建 JavaScript 代码块</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks/conditionals\">在代码中做决定——条件语句</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks/Looping_code\">循环吧，代码</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks/Functions\">函数——可复用的代码块</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks/Build_your_own_function\">创建你自己的函数</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks/Return_values\">函数返回值</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks/Events\">事件介绍</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks/Event_bubbling\">事件冒泡</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks/Image_gallery\">图片库</a></li></ol></details></li><li><details><summary>JavaScript 对象介绍</summary><ol><li><a href=\"/zh-CN/docs/Learn/JavaScript/Objects\">JavaScript 对象入门</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Objects/Basics\">JavaScript 对象基础</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Objects/Object_prototypes\">对象原型</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Objects/Object-oriented_programming\">面向对象编程基本概念</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Objects/Classes_in_JavaScript\">JavaScript 中的类</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Objects/JSON\">使用 JSON</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Objects/Object_building_practice\">实践对象构造</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features\">为“弹球”示例添加新功能</a></li></ol></details></li><li><details><summary>异步 JavaScript</summary><ol><li><a href=\"/zh-CN/docs/Learn/JavaScript/Asynchronous\">异步 JavaScript</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing\">异步 JavaScript 简介</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Asynchronous/Promises\">如何使用 Promise</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API\">如何实现基于 Promise 的 API</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing_workers\">workers 简介</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Asynchronous/Sequencing_animations\">序列动画</a></li></ol></details></li><li><details><summary>客户端 Web API</summary><ol><li><a href=\"/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs\">客户端 Web API</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Introduction\">Web API 简介</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents\">操作文档</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data\">从服务器获取数据</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs\">第三方 API</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics\">绘图</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs\">视频和音频 API</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage\">客户端存储</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/Forms\">Web 表单——与用户数据打交道</a></li><li><details><summary>Web 表单核心</summary><ol><li><a href=\"/zh-CN/docs/Learn/Forms\">Web 表单构建块</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Your_first_form\">创建我的第一个表单</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/How_to_structure_a_web_form\">如何构建 HTML 表单</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Basic_native_form_controls\">原生表单部件</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/HTML5_input_types\">HTML5 的输入（input）类型</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Other_form_controls\">其他表单控件</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Styling_web_forms\">样式化 Web 表单</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Advanced_form_styling\">表单样式化进阶</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/UI_pseudo-classes\">UI 伪类</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Form_validation\">表单数据校验</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data\">发送表单数据</a></li></ol></details></li><li><details><summary>Web 表单进阶</summary><ol><li><a href=\"/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls\">如何构建自定义表单控件</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Sending_forms_through_JavaScript\">使用 JavaScript 发送表单</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Property_compatibility_table_for_form_controls\">表单控件兼容性列表</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/HTML_forms_in_legacy_browsers\">旧式浏览器中的 HTML 表单</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/Accessibility\">无障碍——使每个人都能使用 Web</a></li><li><details><summary>无障碍指南</summary><ol><li><a href=\"/zh-CN/docs/Learn/Accessibility\">无障碍</a></li><li><a href=\"/zh-CN/docs/Learn/Accessibility/What_is_accessibility\">什么是无障碍？</a></li><li><a href=\"/zh-CN/docs/Learn/Accessibility/HTML\">HTML：无障碍的良好基础</a></li><li><a href=\"/zh-CN/docs/Learn/Accessibility/CSS_and_JavaScript\">CSS 和 JavaScript 无障碍最佳实践</a></li><li><a href=\"/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics\">WAI-ARIA 基础</a></li><li><a href=\"/zh-CN/docs/Learn/Accessibility/Multimedia\">多媒体无障碍</a></li><li><a href=\"/zh-CN/docs/Learn/Accessibility/Mobile\">移动端无障碍</a></li><li><a href=\"/zh-CN/docs/Learn/Accessibility/Accessibility_troubleshooting\">测验：无障碍疑难解答</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/Performance\">性能——使网站快速响应</a></li><li><details><summary>性能指南</summary><ol><li><a href=\"/zh-CN/docs/Learn/Performance\">Web 性能</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/why_web_performance\">Web 性能的重要性</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/What_is_web_performance\">什么是 web 性能？</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/Perceived_performance\">感知性能</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/Measuring_performance\">测量性能</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/Multimedia\">多媒体：图片</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/video\">多媒体：视频</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/JavaScript\">JavaScript 性能优化</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/HTML\">HTML 性能优化</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/CSS\">CSS 性能优化</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/business_case_for_performance\">web 性能的商业案例</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/MathML\">MathML——使用 MathML 语言撰写数学表达式</a></li><li><details><summary>MathML 第一步</summary><ol><li><a href=\"/zh-CN/docs/Learn/MathML/First_steps\">MathML 入门概述</a></li><li><a href=\"/zh-CN/docs/Learn/MathML/First_steps/Getting_started\">MathML 使用入门</a></li><li><a href=\"/zh-CN/docs/Learn/MathML/First_steps/Text_containers\">MathML 文本容器</a></li><li><a href=\"/zh-CN/docs/Learn/MathML/First_steps/Fractions_and_roots\">MathML 分数和根号</a></li><li><a href=\"/zh-CN/docs/Learn/MathML/First_steps/Scripts\">MathML 附加符号</a></li><li><a href=\"/zh-CN/docs/Learn/MathML/First_steps/Tables\">MathML 表格</a></li><li><a href=\"/zh-CN/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas\">三个著名的数学公式</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/../Games\">游戏——开发 Web 游戏</a></li><li><details><summary>指南和基础教程</summary><ol><li><a href=\"/zh-CN/docs/Games/Introduction\">Web 游戏开发简介</a></li><li><a href=\"/zh-CN/docs/Games/Techniques\">游戏开发技术</a></li><li><a href=\"/zh-CN/docs/Games/Tutorials\">教程</a></li><li><a href=\"/zh-CN/docs/Games/Publishing_games\">发布游戏</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/Tools_and_testing\">工具与测试</a></li><li><details><summary>客户端 web 开发工具</summary><ol><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools\">理解客户端 web 开发工具</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview\">客户端工具概述</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">命令行速成课</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management\">软件包管理基础</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain\">介绍完整的工具链</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment\">部署我们的应用</a></li></ol></details></li><li><details><summary>客户端框架介绍</summary><ol><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction\">客户端框架介绍</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features\">框架的主要特性</a></li></ol></details></li><li><details><summary>React</summary><ol><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started\">React 入门</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning\">开始我们的 React 待办清单</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components\">组件化我们的 React App</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state\">React interactivity: Events and state</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering\">React interactivity: Editing, filtering, conditional rendering</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility\">Accessibility in React</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources\">React resources</a></li></ol></details></li><li><details><summary>Ember</summary><ol><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started\">Getting started with Ember</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization\">Ember app structure and componentization</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state\">Ember interactivity: Events, classes and state</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer\">Ember Interactivity: Footer functionality, conditional rendering</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing\">Routing in Ember</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources\">Ember resources and troubleshooting</a></li></ol></details></li><li><details><summary>Vue</summary><ol><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started\">开始使用 Vue</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component\">创建第一个 Vue 组件</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists\">渲染 Vue 组件列表</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models\">使用 Vue event、method 和 model 添加一个新的 todo 表单</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling\">使用 CSS 为 Vue 组件添加样式</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties\">Vue 中的计算属性</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering\">Vue 中的条件渲染：编辑现有的待办事项</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management\">使用 Vue 模板引用进行焦点管理</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources\">Vue 资源</a></li></ol></details></li><li><details><summary>Svelte</summary><ol><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started\">Svelte 入门</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning\">开始编写我们的 Svelte 待办事项列表应用程序</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props\">Svelte 中的动态行为：变量和属性</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components\">将我们的 Svelte 应用组件化</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility\">Svelte 进阶：响应式、生命周期以及无障碍</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores\">使用 Svelte store</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript\">Svelte 对 TypeScript 的支持</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next\">部署以及下一步</a></li></ol></details></li><li><details><summary>Angular</summary><ol><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started\">Angular 入门</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning\">Beginning our Angular todo list app</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling\">Styling our Angular app</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component\">Creating an item component</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering\">Filtering our to-do items</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building\">Building Angular applications and further resources</a></li></ol></details></li><li><details><summary>Git 和 GitHub</summary><ol><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/GitHub\">Git 和 GitHub</a></li></ol></details></li><li><details open=\"\"><summary>跨浏览器测试</summary><ol><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing\">跨浏览器测试</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">跨浏览器测试介绍</a></li><li><em><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies\" aria-current=\"page\">测试的策略</a></em></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS\">处理常见的 HTML 和 CSS 问题</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript\">处理常见的 JavaScript 问题</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility\">解决常见的无障碍问题</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection\">实现特性检测</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing\">自动化测试简介</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment\">搭建自己的自动化测试环境</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/Server-side\">服务端网页编程</a></li><li><details><summary>第一步</summary><ol><li><a href=\"/zh-CN/docs/Learn/Server-side/First_steps\">服务端网站编程的第一步</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/First_steps/Introduction\">服务端编程介绍</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/First_steps/Client-Server_overview\">客户端服务端交互概述</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/First_steps/Web_frameworks\">服务端 web 框架</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/First_steps/Website_security\">站点安全</a></li></ol></details></li><li><details><summary>Django Web 框架（Python）</summary><ol><li><a href=\"/zh-CN/docs/Learn/Server-side/Django\">Django Web 框架 (python)</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Introduction\">Django 介绍</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/development_environment\">设置 Django 开发环境</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Tutorial_local_library_website\">Django Tutorial: The Local Library website</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/skeleton_website\">Django Tutorial Part 2: 创建网站的地基</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Models\">Django Tutorial Part 3: 使用模型</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Admin_site\">Django Tutorial Part 4: Django 管理员站点</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Home_page\">Django 教程 5：主页构建</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Generic_views\">Django 教程 6: 通用列表和详细信息视图</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Sessions\">Django 教程 7: 会话框架</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Authentication\">Django 教程 8：用户授权与许可</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Forms\">Django 教程 9: 使用表单</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Testing\">Django 教程 10: 测试 Django 网页应用</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Deployment\">Django 教程 11：部署 Django 到生产环境</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/web_application_security\">Django Web 应用安全</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/django_assessment_blog\">评估：DIY Django 微博客</a></li></ol></details></li><li><details><summary>Express Web 框架（Node.js/JavaScript）</summary><ol><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs\">Express Web 框架（Node.js/JavaScript）</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/Introduction\">Express/Node 入门</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/development_environment\">设置 Node 开发环境</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express 教程：本地图书馆网站</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/skeleton_website\">Express 教程 2：创建站点框架</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/mongoose\">Express 教程 3：使用数据库 (Mongoose)</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/routes\">Express 教程 4：路由和控制器</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data\">Express 教程 5: 呈现图书馆数据</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/forms\">Express 教程 6: 使用表单</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/deployment\">Express 教程 7: 部署到生产环境</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/Common_questions\">更多资源</a></li><li><details><summary>常见问题</summary><ol><li><a href=\"/zh-CN/docs/Learn/Common_questions\">常见问题</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Howto\">使用 HTML 解决常见问题</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Howto\">解决常见的 CSS 问题</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Howto\">解决 JavaSctript 代码的常见问题</a></li><li><a href=\"/zh-CN/docs/Learn/Common_questions/Web_mechanics\">Web 机制</a></li><li><a href=\"/zh-CN/docs/Learn/Common_questions/Tools_and_setup\">工具和安装</a></li><li><a href=\"/zh-CN/docs/Learn/Common_questions/Design_and_accessibility\">设计与无障碍</a></li></ol></details></li></ol>","sidebarMacro":"LearnSidebar","body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\">\n <li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\"><span class=\"button-wrap\"> 上一页 </span></a></li>\n <li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing\"><span class=\"button-wrap\"> 概述：跨浏览器测试</span></a></li>\n <li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS\"><span class=\"button-wrap\"> 下一页 </span></a></li>\n</ul>\n<p>本文解释如何进行跨浏览器测试：如何选择要测试的浏览器和设备、如何实际测试这些浏览器和设备，以及如何借助用户群体进行测试。</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">准备：</th>\n <td>\n 熟练掌握 <a href=\"/zh-CN/docs/Learn/HTML\">HTML</a>、<a href=\"/zh-CN/docs/Learn/CSS\">CSS</a> 和\n <a href=\"/zh-CN/docs/Learn/JavaScript\">JavaScript</a> 语言; 了解<a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">跨浏览器测试的核心概念</a>。\n </td>\n </tr>\n <tr>\n <th scope=\"row\">目标：</th>\n <td>了解跨浏览器测试所涉及的高级概念。</td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"选择要测试的浏览器和设备","title":"选择要测试的浏览器和设备","isH3":false,"content":"<p>由于不可能测试每一种浏览器与设备的组合，只需确保你的网站能在最关键的浏览器和设备上正常运行。在实际操作中，“关键”通常指的是“目标用户群经常使用的”。</p>\n<p>你可以根据计划提供的支持级别对浏览器和设备进行分类。例如：</p>\n<ol>\n <li>A 级：常用/现代浏览器——已确认支持所有功能。进行全面测试并提供完整支持。</li>\n <li>B 级：较旧版本/功能有限的浏览器——已知存在功能缺失。进行测试，并提供基础体验，确保能够访问所有核心内容和服务。</li>\n <li>C 级：不常见/未知浏览器——不进行测试，但假定它们是功能齐全的。网站应提供完整内容，至少通过我们的防御性编码能够使用备选方案。</li>\n</ol>\n<p>在后续章节中，我们将依照此格式逐步构建支持图表。</p>\n<div class=\"notecard note\">\n <p><strong>备注：</strong>雅虎通过他们的<a href=\"https://github.com/yui/yui3/wiki/Graded-Browser-Support\" class=\"external\" target=\"_blank\">分级浏览器支持</a>方法，最先使这一方法流行起来。</p>\n</div>"}},{"type":"prose","value":{"id":"预测你的目标受众最常使用的浏览器","title":"预测你的目标受众最常使用的浏览器","isH3":true,"content":"<p>通常，这需要基于用户统计数据进行合理猜测。例如，假设你的用户位于北美和西欧：</p>\n<p>在线搜索结果显示，北美和西欧大多数人使用 Windows 或 Mac 桌面/笔记本电脑，主要浏览器是 Chrome、Firefox、Safari 和 Edge。你可能只需要测试这些浏览器的最新版本，因为这些浏览器会定期更新。这些浏览器都应该放在 A 级别的分类中。</p>\n<p>在这个统计数据中，大多数人也使用 iOS 或 Android 手机，所以你可能需要测试最新版本的 iOS Safari、旧版 Android 原生浏览器的最后几个版本，以及 iOS 和 Android 上的 Chrome 和 Firefox。最好在手机和平板电脑上都进行测试，以确保响应式设计正常工作。</p>\n<p>Opera Mini <a href=\"https://dev.opera.com/articles/opera-mini-and-javascript/\" class=\"external\" target=\"_blank\">在运行复杂 JavaScript 方面性能不太好</a>，因此我们也应将其放入 B 级别。</p>\n<p>因此，我们基于预计用户会使用的浏览器来确定选择测试哪些浏览器。通过这种方法，我们得到了以下支持图表：</p>\n<ol>\n <li>A 级：Windows/Mac 上的 Chrome 和 Firefox、Mac 上的 Safari、Windows 上的 Edge、iPhone/iPad 上的 iOS Safari、手机/平板上的 Android 原生浏览器（最新两个版本）、手机/平板上的 Android 版 Chrome 和 Firefox（最新两个版本）</li>\n <li>B 级：Opera Mini</li>\n <li>C 级：无</li>\n</ol>\n<p>如果你的目标受众主要位于其他地方，那么常用的浏览器和操作系统可能与上述不同。</p>\n<div class=\"notecard note\">\n <p><strong>备注：</strong>“公司 CEO 使用的是黑莓手机，所以我们最好确保网站在该手机上显示良好”也是需要考虑的因素。</p>\n</div>"}},{"type":"prose","value":{"id":"浏览器份额统计","title":"浏览器份额统计","isH3":true,"content":"<p>有些网站会显示特定地区中流行的浏览器。例如，<a href=\"https://gs.statcounter.com/\" class=\"external\" target=\"_blank\">Statcounter</a> 可以提供北美地区的趋势概览。</p>"}},{"type":"prose","value":{"id":"使用分析工具","title":"使用分析工具","isH3":true,"content":"<p>使用像 <a href=\"https://www.google.com/analytics/\" class=\"external\" target=\"_blank\">Google Analytics</a> 这样的分析网站来获取更准确的数据。它能够为你提供诸如人们在用什么浏览器来浏览你的网站这样的精准的统计数据。当然，这需要你已经有一个网站在使用它，所以它不太适合新上线的网站。</p>\n<p>你还可以考虑使用开源且注重隐私的分析平台，如 <a href=\"https://www.openwebanalytics.com/\" class=\"external\" target=\"_blank\">Open Web Analytics</a> 和 <a href=\"https://matomo.org\" class=\"external\" target=\"_blank\">Matomo</a>。它们要求你自行托管分析平台。</p>\n<h4 id=\"配置_google_analytics\">配置 Google Analytics</h4>\n<ol>\n <li>首先，你需要一个谷歌帐户。使用此帐户登录 <a href=\"https://marketingplatform.google.com/about/analytics/\" class=\"external\" target=\"_blank\">Google Analytics</a>。</li>\n <li>选择 <a href=\"https://analytics.google.com/analytics/web/\" class=\"external\" target=\"_blank\">Google Analytics</a>（web）选项，然后点击<em>注册</em>按钮。</li>\n <li>在注册页面中输入你的网站/应用详细信息。配置过程相当直观；最重要的字段是网站 URL，你需要确保它填写正确。这应当是你的网站/应用的根 URL。</li>\n <li>填写完所有内容后，按<em>获取跟踪 ID</em>按钮，然后接受显示的服务条款。</li>\n <li>下一页会为你提供一些代码段和其他说明。对于基本网站，你需要做的是复制<em>网站跟踪</em>代码块，并将其粘贴到你要在网站上使用 Google Analytics 跟踪的所有页面。你可以将跟踪代码放在关闭标记 <code></body></code> 的下方，也可以放在其他适当位置，以防止其与应用程序代码混淆。</li>\n <li>将更改上传到开发服务器，或其他任何用到你的代码的位置。</li>\n</ol>\n<p>就是这样！现在，你的网站应该可以开始报告分析数据了。</p>\n<h4 id=\"学习分析数据\">学习分析数据</h4>\n<p>现在你可以回到 <a href=\"https://analytics.google.com/analytics/web\" class=\"external\" target=\"_blank\">Analytics Web</a> 首页，并开始查看你收集到的关于网站的数据（当然，你需要留出一些时间来收集一些实际的数据）。</p>\n<p>默认情况下，你应该看到类似下面这样的报告标签页：</p>\n<p>\n <img src=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies/analytics-reporting.png\" alt=\"Google Analytics 在其主报告仪表板中如何收集数据\" width=\"700\" height=\"386\" loading=\"lazy\">\n</p>\n<p>借助 Google Analytics，你可以查看大量的数据（不同类别的自定义报告等等），我们暂时不讨论这些。<a href=\"https://support.google.com/analytics/answer/9306384?visit_id=637855964517698041-2103767437&rd=1\" class=\"external\" target=\"_blank\">开始使用 Analytics</a> 为初学者提供了一些关于报告的指导，这些指导很有用。</p>\n<p>你可以通过从左侧菜单选择<em>用户 > 技术 > 浏览器和操作系统</em>来查看用户使用的浏览器和操作系统。</p>\n<div class=\"notecard note\">\n <p><strong>备注：</strong>在使用 Google Analytics 时，你需要注意可能存在的误导性偏见，例如，“我们没有 Firefox 移动版用户”可能导致你不再支持 Firefox 移动版。但是，你之所以没有任何 Firefox 移动版用户，可能恰恰就是因为你的网站在 Firefox 移动版上受支持不佳。</p>\n</div>"}},{"type":"prose","value":{"id":"其他注意事项","title":"其他注意事项","isH3":true,"content":"<p>你应该将无障碍性作为 A 级测试要求（我们将在我们的<a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility\">处理常见无障碍性问题</a>文章中详细介绍你应该测试的内容）。</p>\n<p>此外，你还应注意特定情况下的需求。例如，如果你的产品面向的市场以手机为主要上网手段，那么你可能需要优先支持移动浏览器。</p>"}},{"type":"prose","value":{"id":"最终的支持图表","title":"最终的支持图表","isH3":true,"content":"<p>因此，我们的最终版支持图表如下所示：</p>\n<ol>\n <li>A 级：Windows/Mac 的 Chrome 和 Firefox、Mac 的 Safari、Edge（最新两个版本）、iPhone/iPad 的 iOS Safari、手机/平板的 Android 原生浏览器（最新两个版本）、手机/平板的 Android 版 Chrome 和 Firefox（最新两个版本）。通过常见的无障碍测试。</li>\n <li>B 级：Opera Mini。</li>\n <li>C 级：Opera 以及其他小众的现代浏览器。</li>\n</ol>"}},{"type":"prose","value":{"id":"你将要测试什么？","title":"你将要测试什么？","isH3":false,"content":"<p>当你向代码库中添加新代码并需要进行测试时，在开始测试之前，你应该列出一份测试需求清单。这样做是为了确保只有满足这些需求后，才能接受新添加的代码。这些需求可能是视觉上的，也可能是功能上的——它们共同构成了网站功能的可用性。</p>\n<p>考虑以下示例（参见<a href=\"https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/strategies/hidden-info-panel.html\" class=\"external\" target=\"_blank\">源代码</a>，以及<a href=\"https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/strategies/hidden-info-panel.html\" class=\"external\" target=\"_blank\">在线运行的示例</a>）：</p>\n<p>\n <img src=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies/sliding-box-demo.png\" alt=\"如何准备一个测试场景，使其涵盖设计和用户需求\" width=\"700\" height=\"455\" loading=\"lazy\">\n</p>\n<p>该特性的测试标准可以写成如下所示：</p>\n<p>A 级和 B 级：</p>\n<ul>\n <li>按钮应该能够由用户通过主要控制机制激活，无论是鼠标、键盘还是触摸。</li>\n <li>切换按钮应该使信息框出现/消失。</li>\n <li>文本应该可读。</li>\n <li>使用屏幕阅读器的视力受损用户应该能够访问文本。</li>\n</ul>\n<p>A 级：</p>\n<ul>\n <li>信息框在出现/消失时应该具有平滑的动画效果。</li>\n <li>应该有渐变和文字阴影，以增强信息框的外观。</li>\n</ul>\n<p>你可能会注意到，根据示例中的文本，它在 IE8 中无法工作——根据我们的支持图表，这是一个问题，如果浏览器不支持 CSS 过渡效果（请参见课程后面的“实施特性检测”部分），你可能需要通过使用特性检测库以不同的方式实现功能。</p>\n<p>你可能还会注意到，只使用键盘无法使用该按钮——这也需要解决。也许我们可以使用一些 JavaScript 来实现键盘控制切换，或者完全使用其他方法？</p>\n<p>这些测试标准很有用，因为：</p>\n<ul>\n <li>它们在执行测试时为你提供了一组步骤。</li>\n <li>它们可以很容易地转化为用户组在进行测试时需要遵循的指示（例如，“尝试使用鼠标和键盘激活按钮…”）——请参见下面的<a href=\"#%E7%94%A8%E6%88%B7%E6%B5%8B%E8%AF%95\">用户测试</a>部分。</li>\n <li>它们还可以为编写自动化测试提供基础。如果你知道要测试什么以及成功条件是什么，编写此类测试就会更容易（请参见本系列中的 <a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment#selenium\">Selenium</a> 部分）。</li>\n</ul>"}},{"type":"prose","value":{"id":"建立测试实验环境","title":"建立测试实验环境","isH3":false,"content":"<p>执行浏览器测试的一个选项是自己进行测试。为此，你可能需要使用物理设备和模拟环境的组合（使用模拟器或虚拟机）。</p>"}},{"type":"prose","value":{"id":"物理设备","title":"物理设备","isH3":true,"content":"<p>通常情况下，最好使用真实设备来运行你想要测试的浏览器，这样可以获取最准确的行为和整体用户体验。要想搭建一个合理的低级别设备实验环境，你可能需要以下设备：</p>\n<ul>\n <li>安装了你需要测试的浏览器的 Mac 设备，浏览器包括 Firefox、Chrome、Opera 和 Safari。</li>\n <li>安装了你需要测试的浏览器的 Windows PC，浏览器包括 Edge（或 IE）、Chrome、Firefox 和 Opera。</li>\n <li>配置较高的 Android 手机和平板，安装了你需要测试的浏览器，包括 Chrome、Firefox 和 Opera Mini Android 版，以及原始的 Android 原生浏览器。</li>\n <li>配置较高的 iOS 手机和平板，安装了你需要测试的浏览器，包括 iOS Safari 和 Chrome、Firefox、Opera Mini iOS 版。</li>\n</ul>\n<p>如果可能的话，以下也是不错的选择：</p>\n<ul>\n <li>可用的 Linux PC，以便测试特定于 Linux 版本的浏览器的 bug。Linux 用户通常使用 Firefox、Opera 和 Chrome。如果只有一台机器可用，你可以考虑创建分别在不同分区上运行 Linux 和 Windows 的双启动机器。Ubuntu 的安装程序可以很容易地设置这个；参考 <a href=\"https://help.ubuntu.com/community/WindowsDualBoot\" class=\"external\" target=\"_blank\">Windows 双启动</a>获取帮助。</li>\n <li>一些低配置的移动设备，这样你就可以测试在性能较弱的处理器上一些特性（比如动画效果）的表现。</li>\n</ul>\n<p>你的主要工作机也可以安装其他工具，用于特定目的，比如无障碍审计工具、屏幕阅读器和模拟器/虚拟机。</p>\n<p>一些大公司拥有设备实验环境，储备了各种不同的设备，使开发人员能够在特定的浏览器/设备组合中查找错误。较小的公司和个人通常无法承担如此复杂的实验环境成本，因此他们通常通过较小的实验环境、模拟器、虚拟机和商业测试应用来解决问题。</p>\n<p>下面我们将介绍其他选项。</p>\n<div class=\"notecard note\">\n <p><strong>备注：</strong>已经有一些人在努力创建公共可使用的设备实验环境——参见 <a href=\"https://www.smashingmagazine.com/2016/11/worlds-best-open-device-labs/\" class=\"external\" target=\"_blank\">Open Device Labs</a>。</p>\n</div>\n<div class=\"notecard note\">\n <p><strong>备注：</strong>我们还需要考虑无障碍性——你可以在计算机上安装一些有用的工具来进行无障碍性测试，但我们将在本课程后面的“处理常见无障碍性问题”文章中进行介绍。</p>\n</div>"}},{"type":"prose","value":{"id":"模拟器","title":"模拟器","isH3":true,"content":"<p>模拟器基本上是在计算机内部运行的程序，用于模拟某种设备或特定的设备环境，使你能够更方便地进行一些测试，而无需寻找特定的硬件/软件组合进行测试。</p>\n<p>模拟器可以简单地用于测试设备条件。例如，如果你想快速测试响应式设计中的宽度/高度媒体查询，可以使用 Firefox 的<a href=\"https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/index.html\" class=\"external\" target=\"_blank\">响应式设计模式</a>。Safari 也有类似的模式，可以通过转到“Safari > 首选项”并勾选“显示开发菜单”，然后选择“开发 > 进入响应式设计模式”来启用。Chrome 也有类似的功能：设备模式（参见<a href=\"https://developer.chrome.google.cn/docs/devtools/device-mode\" class=\"external\" target=\"_blank\">使用设备模式模拟移动设备</a>）。</p>\n<p>然而，通常情况下，你需要安装某种模拟器。你可能需要测试的常见设备/浏览器如下：</p>\n<ul>\n <li>用于开发 Android 应用程序的官方 <a href=\"https://developer.android.com/studio/\" class=\"external\" target=\"_blank\">Android Studio IDE</a> 对于只需要在 Google Chrome 或旧版 Android 浏览器上测试网站的人来说有点过于笨重，但它带有一个强大的<a href=\"https://developer.android.com/studio/run/emulator.html\" class=\"external\" target=\"_blank\">模拟器</a>。如果你想要更轻量级的选项，可以考虑在 Windows 和 Mac 上运行的 <a href=\"https://www.andyroid.net/\" class=\"external\" target=\"_blank\">Andy</a>。</li>\n <li>Apple 提供了一个名为 <a href=\"https://help.apple.com/simulator/mac/current/\" class=\"external\" target=\"_blank\">Simulator</a> 的应用程序，它在 <a href=\"https://developer.apple.com/xcode/\" class=\"external\" target=\"_blank\">XCode</a> 开发环境之上运行，并模拟 iPad/iPhone/Apple Watch/Apple TV。原生的 iOS Safari 浏览器包括在内。不幸的是，它只能在 Mac 上运行。</li>\n</ul>\n<p>你还可以找到其他移动设备环境的模拟器，例如：</p>\n<ul>\n <li>如果你想要测试 Opera Mini，可以单独模拟 <a href=\"https://dev.opera.com/articles/installing-opera-mini-on-your-computer/\" class=\"external\" target=\"_blank\">Opera Mini</a>。</li>\n</ul>\n<div class=\"notecard note\">\n <p><strong>备注：</strong>许多模拟器实际上需要使用虚拟机（参见下文）；当出现这种情况时，通常会提供说明，并且/或者虚拟机的使用已纳入模拟器的安装程序中。</p>\n</div>"}},{"type":"prose","value":{"id":"虚拟机","title":"虚拟机","isH3":true,"content":"<p>虚拟机是一种在台式计算机上运行的软件应用，它允许用户模拟整个操作系统。每个操作系统都在其自己的虚拟硬盘上运行（这通常由主机机器硬盘上的一个大型文件来表示），实现了隔离。市面上有多种流行的虚拟机应用程序，包括 <a href=\"https://www.parallels.com/\" class=\"external\" target=\"_blank\">Parallels</a>、<a href=\"https://www.vmware.com/\" class=\"external\" target=\"_blank\">VMWare</a> 和 <a href=\"https://www.virtualbox.org/wiki/Downloads\" class=\"external\" target=\"_blank\">Virtual Box</a>。我们更倾向于推荐后者，因为它是免费的。</p>\n<div class=\"notecard note\">\n <p><strong>备注：</strong>运行虚拟机仿真需要大量的硬盘空间；每个模拟的操作系统可能会占用大量内存。你可以选择每次安装所需的硬盘空间；大约 10GB 的空间应该足够了，但有一些建议是使用多达 50GB 或更多的空间，以确保操作系统的可靠运行。大多数虚拟机应用程序都提供了创建<strong>动态分配</strong>的硬盘的功能，它会根据需要自动增长和收缩，这是一个很好的选择。</p>\n</div>\n<p>要使用 Virtual Box，你需要：</p>\n<ol>\n <li>\n <p>获取要模拟的操作系统的安装程序光盘或映像（例如 ISO 文件）。Virtual Box 无法提供这些；因为大多数操作系统（如 Windows 操作系统）都是商业产品，不能自由分发。</p>\n </li>\n <li>\n <p><a href=\"https://www.virtualbox.org/wiki/Downloads\" class=\"external\" target=\"_blank\">下载适合你操作系统的安装程序</a>并进行安装。</p>\n </li>\n <li>\n <p>打开应用程序；你将看到以下界面：\n <img src=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies/virtualbox.png\" alt=\"应用程序窗口的左侧面板列出了 Windows 操作系统和 Opera TV 模拟器。右侧面板包括几个子面板，包括常规信息、系统、显示、设置、音频、网络和预览\" width=\"700\" height=\"512\" loading=\"lazy\">\n </p>\n </li>\n <li>\n <p>要创建新的虚拟机，请点击左上角的“新建”按钮。</p>\n </li>\n <li>\n <p>按照说明填写适当的对话框。你需要：</p>\n <ol>\n <li>为新虚拟机提供名称</li>\n <li>选择要安装在虚拟机里面的操作系统和版本</li>\n <li>设置要分配的内存大小（我们建议设置为 2048MB 或 2GB）</li>\n <li>创建一个虚拟硬盘（在包含“立即创建虚拟硬盘”、“VDI（虚拟磁盘映像）”和“动态分配”选项的对话框中选择默认选项）。</li>\n <li>选择虚拟硬盘的文件位置和大小（选择一个合理的名称和位置，并指定大约 50GB 的大小，或者根据你的需求选择大小）。</li>\n </ol>\n </li>\n</ol>\n<p>现在，新的虚拟机应该会出现在 Virtual Box 主用户界面窗口的左侧菜单中。此时，你可以双击打开它，它将开始启动虚拟机，但操作系统尚未安装。此时，你需要在对话框内指向安装程序镜像/光盘，然后它将按照步骤运行安装操作系统的过程，就像在物理机器上一样。</p>\n<p>\n <img src=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies/virtualbox-installer.png\" alt=\"如何为特定操作系统安装 Virtual Box\" width=\"600\" height=\"507\" loading=\"lazy\">\n</p>\n<div class=\"notecard warning\">\n <p><strong>警告：</strong>请确保此时你有要安装在虚拟机上的操作系统映像，并立即进行安装。如果你在此时取消该过程，可能会导致虚拟机无法使用，并需要删除并重新创建它。这并不会导致严重问题，但会很麻烦。</p>\n</div>\n<p>完成该过程后，你将在主机计算机上的窗口中运行一个带有操作系统的虚拟机。</p>\n<p>\n <img src=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies/virtualbox-running.png\" alt=\"在 macOS 上的 Virtual Box 中托管并运行的 Windows XP 截图\" width=\"700\" height=\"579\" loading=\"lazy\">\n</p>\n<p>你需要像对待实际安装的操作系统一样对待这个虚拟操作系统安装——例如，除了安装你想要测试的浏览器之外，还要安装一个防病毒程序来保护它免受病毒的侵害。</p>\n<p>拥有多个虚拟机非常有用，特别是用于 Windows IE/Edge 测试——在 Windows 上，无法同时安装多个版本的默认浏览器，因此你可能需要建立一个虚拟机库，以根据需要处理不同的测试，例如：</p>\n<ul>\n <li>Windows 10 + Edge 14</li>\n <li>Windows 10 + Edge 13</li>\n</ul>\n<div class=\"notecard note\">\n <p><strong>备注：</strong>虚拟机的另一个优势在于虚拟磁盘映像的相对独立性。如果你在团队中工作，你可以创建一个虚拟磁盘映像，复制并将其分发给团队其他成员。只需确保你拥有合法许可，以运行所有这些包含版权的 Windows 或其他产品的副本。</p>\n</div>"}},{"type":"prose","value":{"id":"自动化和商业应用","title":"自动化和商业应用","isH3":true,"content":"<p>正如上一章所述，通过使用某种自动化系统，在浏览器测试的过程中你可以减少很多痛苦。你可以配置自己的测试自动化系统（<a href=\"http://www.seleniumhq.org/\" class=\"external\" target=\"_blank\">Selenium</a> 是首选的流行应用程序），它确实需要一些设置，但是当它开始起作用时你会受益匪浅。</p>\n<p>如果你愿意在测试中投入一些资金，也可以使用一些商业工具，如 <a href=\"https://saucelabs.com/\" class=\"external\" target=\"_blank\">Sauce Labs</a>、<a href=\"https://www.browserstack.com/\" class=\"external\" target=\"_blank\">Browser Stack</a> 和 <a href=\"https://www.lambdatest.com/\" class=\"external\" target=\"_blank\">LambdaTest</a>，它们可以为你完成此类工作，而无需担心配置问题。</p>\n<p>另一种选择是使用无代码测试自动化工具，如 <a href=\"https://endtest.io\" class=\"external\" target=\"_blank\">Endtest</a>。</p>\n<p>我们将在后续文章中了解如何使用此类工具。</p>"}},{"type":"prose","value":{"id":"用户测试","title":"用户测试","isH3":false,"content":"<p>我们在本文末尾谈论一下用户测试——如果你有一个有意愿的用户组测试你的新功能，这可能是一个很好的选择。请记住，这可以像你希望的那样廉价又有效——用户组可以是一群朋友、一群同事，也可以是一群无报酬或有报酬的志愿者，这取决于你是否有资金用于测试。</p>\n<p>通常，你可以让用户在某种开发服务器上查看包含新功能的页面或视图，这样你就不用在完成之前放置最终站点或更改。你应该让他们遵守一些步骤并报告他们得到的结果。提供一组步骤（有时称为脚本）会非常有用，这样你就可以获得与你尝试测试的内容相关的更可靠的结果。我们在上面的<a href=\"#%E4%BD%A0%E5%B0%86%E8%A6%81%E6%B5%8B%E8%AF%95%E4%BB%80%E4%B9%88%EF%BC%9F\">你将要测试什么</a>部分中提到了这一点——很容易将其中详述的测试标准转换为要遵循的步骤。例如，以下内容适用于有视力的用户：</p>\n<ul>\n <li>在台式计算机上使用鼠标单击几次问号按钮。刷新浏览器窗口。</li>\n <li>使用台式计算机上的键盘选择并激活几次问号按钮。</li>\n <li>在触摸屏设备上点击几次问号按钮。</li>\n <li>切换按钮应使信息框显示/消失。在上述三种情况中，是否都这样？</li>\n <li>文字可读吗？</li>\n <li>信息框在出现/消失时是否能够流畅地生成动画？</li>\n</ul>\n<p>运行测试时，最好还是：</p>\n<ul>\n <li>尽可能设置单独的浏览器配置文件，禁用浏览器扩展和其他类似功能，并在该配置文件中运行测试（例如，请参阅<a href=\"https://support.mozilla.org/zh-CN/kb/profile-manager-create-remove-switch-firefox-profiles\" class=\"external\" target=\"_blank\">使用配置文件管理器创建和删除 Firefox 配置文件</a> 和<a href=\"https://support.google.com/chrome/answer/2364824\" class=\"external\" target=\"_blank\">与他人共享 Chrome 浏览器或添加角色</a>）。</li>\n <li>如果可以，运行测试时使用浏览器的隐私（private）模式（例如，Firefox 中的<a href=\"https://support.mozilla.org/zh-CN/kb/private-browsing-use-firefox-without-history\" class=\"external\" target=\"_blank\">隐私浏览</a>，Chrome 中的<a href=\"https://support.google.com/chrome/answer/95464\" class=\"external\" target=\"_blank\">隐私模式</a>），进而不会保存 cookie 和临时文件等内容。</li>\n</ul>\n<p>这些步骤旨在确保你正在测试的浏览器尽可能“干净”，即没有安装任何可能影响测试结果的内容。</p>\n<div class=\"notecard note\">\n <p><strong>备注：</strong>如果你有可用的硬件，另一个有用的低功耗选项是在低端手机/其他设备上测试你的网站——随着网站变得更大并且具有更多特性，网站放慢速度的可能性更高，因此你需要开始更多考虑性能。尝试在低端设备上运行你的功能，也会使更高端设备上网站的体验更好。</p>\n</div>\n<div class=\"notecard note\">\n <p><strong>备注：</strong>某些服务器端开发环境提供了一些有用的机制，可仅向部分用户推出网站变更，从而提供了一种有用的机制，可以在不需要单独的开发服务器的情况下让一部分用户测试特性。示例：<a href=\"https://github.com/jsocol/django-waffle\" class=\"external\" target=\"_blank\">Django Waffle Flags</a>。</p>\n</div>"}},{"type":"prose","value":{"id":"总结","title":"总结","isH3":false,"content":"<p>阅读本文后，你现在应该了解如何识别目标受众/目标浏览器列表，然后基于该列表有效地执行跨浏览器测试。</p>\n<p>接下来，我们将把注意力转向测试可能发现的实际代码问题，从 HTML 和 CSS 开始。</p><ul class=\"prev-next\">\n <li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\"><span class=\"button-wrap\"> 上一页 </span></a></li>\n <li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing\"><span class=\"button-wrap\"> 概述：跨浏览器测试</span></a></li>\n <li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS\"><span class=\"button-wrap\"> 下一页 </span></a></li>\n</ul>"}}],"toc":[{"text":"选择要测试的浏览器和设备","id":"选择要测试的浏览器和设备"},{"text":"你将要测试什么？","id":"你将要测试什么？"},{"text":"建立测试实验环境","id":"建立测试实验环境"},{"text":"用户测试","id":"用户测试"},{"text":"总结","id":"总结"}],"summary":"本文解释如何进行跨浏览器测试：如何选择要测试的浏览器和设备、如何实际测试这些浏览器和设备，以及如何借助用户群体进行测试。","popularity":0,"modified":"2024-09-23T13:12:14.000Z","other_translations":[{"locale":"de","title":"Strategien zur Durchführung von Tests","native":"Deutsch"},{"locale":"en-US","title":"Strategies for carrying out testing","native":"English (US)"},{"locale":"fr","title":"Stratégies pour mener à bien vos tests","native":"Français"},{"locale":"ja","title":"テスト実行のための戦略","native":"日本語"}],"pageType":"unknown","source":{"folder":"zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies","github_url":"https://github.com/mdn/translated-content/blob/main/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md","last_commit_url":"https://github.com/mdn/translated-content/commit/a4c701a2e54ba097203c9a43a253dc0c1f461d26","filename":"index.md"},"short_title":"测试的策略","parents":[{"uri":"/zh-CN/docs/Learn","title":"学习 Web 开发"},{"uri":"/zh-CN/docs/Learn/Tools_and_testing","title":"工具和测试"},{"uri":"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing","title":"跨浏览器测试"},{"uri":"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies","title":"测试的策略"}],"pageTitle":"测试的策略 - 学习 Web 开发 | MDN","noIndexing":false}}</script></body></html>