Google Chrome

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

https://developers.google.com/web/tools/chrome-devtools/

Mozilla Firefox

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

Internet Explorer

对于 Windows 用户，如果你仍在使用 Internet Explorer 的版本， 则可通过按 F12 来 访问 F12 开发者工具。版本之间的功能各不相同， 但从 Internet Explorer 8 开始，各功能变化不大。

Microsoft Edge

Microsoft Edge 为 Internet Explorer 中的 F12 开发者工具引入了新的巨大改进。新工具内置于 TypeScript 之中，且始终处于运行状态，所以不需要重新加载。

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

Safari

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

Opera

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