不同浏览器上的开发者工具

不同浏览器上的开发者工具

你是否知道每个现代浏览器都有自己的开发者工具？

如果你不知道，那很好。要想在浏览器中找到开发者工具，并不十分容易。因此，我们决定通过这个开发者工具指南来帮助你！

Google Chrome

Chrome 开发者工具是 Google Chrome 中内置的网页编辑和调试工具。使用开发者工具迭代、调试和简要介绍站点。要学习更多内容，单击此处|国内翻译文档 。

要打开 Chrome 开发者工具，右键单击任意页面元素，并选择“检查 (Inspect)”，或者打开浏览器窗口右上角的 Chrome 菜单并选择“更多工具 (More Tools)” >“开发者工具 (Developer Tools)”。或者你可以使用快捷方式⌘ + ⌥ + I (Mac) 或 Ctrl + ⇧ + I (Windows/Linux)。

Mozilla Firefox

Firefox 开发者工具让你可以在台式机和手机上检查、编辑及调试 HTML、CSS 和 JavaScript。你也可以下载 Firefox Developer Edition 版的 Firefox，它专为开发者定制，具有最新的 Firefox 功能和开发者试验工具。要学习更多内容，单击此处。

要打开 Firefox 开发者工具，右键单击任意页面 元素并选择“检查元素 (Inspect Element)”，或者打开浏览器窗口右上角的 Firefox 菜单并选择“开发者 (Developer)”。 或者，你可以使用快捷方式⌘ + ⌥ + I (Mac) 或 Ctrl + ⇧ + I (Windows/Linux)。

Internet Explorer

对于 Windows 用户，如果你仍在使用 Internet Explorer 的版本， 则可通过按 F12 来 访问 F12 开发者工具。版本之间的功能各不相同， 但从 Internet Explorer 8 开始，各功能变化不大。下面，我们已经链接到每个版本的文档，但是如果你已经升级到 Microsoft Edge，请查阅下一部分。

• Internet Explorer 8
• Internet Explorer 9
• Internet Explorer 10
• Internet Explorer 11

Microsoft Edge

Microsoft Edge 为 Internet Explorer 中的 F12 开发者工具引入了新的巨大改进。新工具内置于 TypeScript 之中，且始终处于运行状态，所以不需要重新加载。另外，GitHub 上当前提供了 F12 开发者工具文档。要学习更多内容，单击此处。

如同 Internet Explorer，要在 Microsoft Edge 中打开开发者工具，只需按 F12。

Safari

对于 Mac 用户，Safari 自带有 Web Inspector，这是一个强大的工具，能够轻松地修改、调试和优化网站，以便在两个平台上同时获得最佳的性能和兼容性。要学习更多内容，单击此处。

要访问 Safari 的网页开发工具，请在 Safari 的高级首选项中启用“开发 (Develop)”菜单。启用后，可右键单击任意页面元素并选择“检查元素 (Inspect Element)”以打开 Web 开发工具，或者使用快捷方式⌘ + ⌥ + I。

Opera

Opera 快速、小巧且功能强大，预先包装了一套功能齐全的开发者工具。此工具包名为 Opera Dragonfly，旨在让你的工作变得更加轻松。要学习更多内容，单击此处。

通过按 ⌘ + ⌥ + I (Mac) 或 Ctrl + ⇧ + I (Windows/Linux) 来启动 Opera Dragonfly。或者，你可以通过在页面中右键单击并选择“检查元素 (Inspect Element)”来锁定特定的元素。