如何检查Chrome中的元素

下载PDF文件
共同创作者是 Luigi Oppido

下载PDF文件

本指南介绍如何使用电脑版Google Chrome检查网页上的视觉元素的HTML源代码。

步骤

下载PDF文件
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/32\/Inspect-Element-on-Chrome-Step-1.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/32\/Inspect-Element-on-Chrome-Step-1.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    图标形状类似一个中间有蓝点的彩球，通常位于Mac的“应用程序”文件夹或Windows的“开始”菜单中。
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/94\/Inspect-Element-on-Chrome-Step-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/94\/Inspect-Element-on-Chrome-Step-2.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-2.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    它位于地址栏的右侧，浏览器窗口的右上角。随后会打开下拉菜单。
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c4\/Inspect-Element-on-Chrome-Step-3.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c4\/Inspect-Element-on-Chrome-Step-3.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":550,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    随后会弹出子菜单。
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a8\/Inspect-Element-on-Chrome-Step-4.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a8\/Inspect-Element-on-Chrome-Step-4.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-4.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":541,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    随后会在浏览器窗口的右侧打开检查器栏。
    • 也可以用键盘快捷键打开检查器。Mac上的快捷键为 ⌥ Option + ⌘ Cmd + I ，Windows上的快捷键为 Ctrl + Alt + I 。
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f3\/Inspect-Element-on-Chrome-Step-5.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f3\/Inspect-Element-on-Chrome-Step-5.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-5.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":547,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    将鼠标移动到检查器中的某个元素或某行上，随后会高亮显示选中的网页元素。
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e8\/Inspect-Element-on-Chrome-Step-6.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e8\/Inspect-Element-on-Chrome-Step-6.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-6.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":542,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    随后会弹出右键菜单。
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0a\/Inspect-Element-on-Chrome-Step-7.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0a\/Inspect-Element-on-Chrome-Step-7.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-7.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":542,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    随后会在检查器中直接跳至所选的元素，并高亮显示源代码。
    • 无需手动打开检查器。选择右键菜单上的 检查 会自动打开检查器。
    广告

你可能还喜欢

如何
将平板电脑连接到电脑上
如何
卸载英伟达驱动程序
如何
将无线键盘连接到电脑
如何
检查笔记本电脑电池
如何
在Windows或Mac上打开数据库文件
如何
在PC或Mac上连接两个蓝牙音箱
如何在Chrome浏览器中将喜欢的网页制作成桌面应用
如何
查看BIOS版本
如何
修复Google Chrome中的YouTube全屏问题
如何
格式化写保护的U盘
如何
清除缓存和Cookies
如何
弄清楚电脑无法启动的原因
如何
在Linux系统用命令行运行程序
如何更改键盘的背光颜色
广告

关于本wikiHow

其他语言
本页面已经被访问过6,505次。

这篇文章对你有帮助吗？

广告