如何在浏览器中测试 HTML 代码

HTML 是最简单的 Web 开发语言之一。测试 HTML 代码以确保网站在不同浏览器中正常运行是几乎所有 Web 开发人员的首要要求。有许多在线工具可确保您的 HTML 代码生成所需的输出，并且您的网站以简化的方式运行。尽管您可以采用传统方式并使用Chrome 开发人员工具，但还有许多其他更易于使用的在线工具。牢记这一点，我们为您带来了在浏览器中测试 HTML 代码的六种主要方法。

1. 代码笔
这是一个在线工具，更确切地说，是一个由开发人员组成的在线社区，他们利用 HTML、CSS、JavaScript 等各种前端工具和大量库来开发出值得展示的东西。该工具充当在线代码编辑器，并同时在浏览器中显示代码的输出。因此，这是您可以用来在浏览器中测试 HTML 代码的最流行的工具之一。它也是最大的开发者社区之一。您可以学习很多有关 HTML、CSS 和前端 Web 开发的知识，以及测试代码。

2. 使用文本编辑器
这是运行 HTML 文件的另一种方法。如果您正在使用在离线模式下运行的文本编辑器（例如Sublime Text或Notepad++ ），您只需使用 .html 扩展名保存文件并通过双击运行它即可。默认情况下，它将在本地计算机上安装的浏览器中运行。您还可以转到设备的“设置”部分并更改默认浏览器以分析不同浏览器中的输出。但是，所有这些不同的浏览器必须事先安装在您的系统上。

最新的 DZone 参考卡

移动数据库要点

3.JSFiddle  
JSFiddle是一个在线开发者社区，它还提供了一个在浏览器中在线测试 HTML 代码的平台。它于 2009 年作为应用程序推出，但后来获得了巨大的普及。它主要用于在线测试 JavaScript 代码，但您也可以测试 HTML、CSS 以及使用其他一些前端库编写的代码。它有自己的在线编辑器并同时显示输出。它确实是有史以来处理 JavaScript 的最佳工具。唯一的缺点是您必须单击“运行”按钮才能更新预览面板。

4.JSBin
尽管它是在浏览器中测试 HTML 代码的最佳工具之一，但许多新手发现 JSFiddle 的界面很难使用。JSBin是 JSFiddle 的替代品，并且相对更容易使用。它有两种访问类型：免费和专业版。两种类型都允许在浏览器中无限制地免费测试 HTML、CSS 和 JavaScript 代码，但是，您可以包含的 JavaScript 库的数量是固定的。如果您想访问私人垃圾箱和资产托管等高级功能，则需要注册专业帐户。

5. 现场编织 
Liveweave提供 HTML 代码的实时预览，是最漂亮、最令人愉悦的工具之一。该界面非常简单且易于理解，并提供可调整大小的面板。您可以随意修改代码。当您在内置编辑器中键入代码时，它会不断提供建议，让您的生活更轻松。除此之外，您可以轻松地将组织保存在云端，甚至可以将其下载为 .zip 文件以供将来参考。它也允许您使用 jQuery 等 JavaScript 库，并且有一个标尺，以便您可以跟踪产品的响应能力。

6. HTMLhouse
如果您只处理 HTML，那么这是最好的选择。界面干净、简约，没有额外的功能或支持。它是专为 HTML 设计的。您可以发布 HTML 并公开或私下共享。查看此处的工具并开始使用一些 HTML！对于您编写的每一段代码，它都会为您提供一个可共享的链接，以便您转发。

除了上述工具之外，如果您是初学者，一些其他 HTML 资源（例如 HTML Goodies）可能会派上用场。如果您想使用 Chrome 开发人员工具，只需在 Google Chrome 中运行 HTML 文档，然后右键单击要检查的 HTML 元素即可。单击“检查”，您将拥有运行、分析甚至调试代码的工具。

然而，上述所有工具的一个主要缺点是它们仅向您展示代码在一种浏览器中的外观。如果您想跨不同浏览器进行测试，则需要安装所有浏览器。有时这也是不可能的。例如，如果您在Mac环境中工作，则无法直接在IE中进行测试。

一种方法是使用在线跨浏览器测试工具，例如 LambdaTest。它是当今市场上最令人惊叹的跨浏览器测试工具之一，可让您测试代码的跨浏览器兼容性。测试结果基于 2,000 多个浏览器的结果，几乎不存在浏览器不兼容的情况。它确保您的代码可以在各种桌面和移动浏览器上无缝运行，并为您省去很多麻烦。