本指南介绍如何使用电脑版Google Chrome检查网页上的视觉元素的HTML源代码。
步骤
-
{"smallUrl":"https:\/\/www.zenmeban.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.zenmeban.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>"}
1
在电脑上打开Google Chrome。图标形状类似一个中间有蓝点的彩球，通常位于Mac的“应用程序”文件夹或Windows的“开始”菜单中。
-
{"smallUrl":"https:\/\/www.zenmeban.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.zenmeban.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>"}
2
单击“三个竖点”图标。它位于地址栏的右侧，浏览器窗口的右上角。随后会打开下拉菜单。
-
{"smallUrl":"https:\/\/www.zenmeban.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.zenmeban.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>"}
3
将鼠标停留在下拉菜单中的更多工具上。随后会弹出子菜单。
-
{"smallUrl":"https:\/\/www.zenmeban.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.zenmeban.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>"}
4
在“更多工具”子菜单中单击开发者工具。随后会在浏览器窗口的右侧打开检查器栏。
- 也可以用键盘快捷键打开检查器。Mac上的快捷键为⌥ Option+⌘ Cmd+I，Windows上的快捷键为Ctrl+Alt+I。
-
{"smallUrl":"https:\/\/www.zenmeban.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.zenmeban.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>"}
5
将鼠标停留在检查器中的元素上。将鼠标移动到检查器中的某个元素或某行上，随后会高亮显示选中的网页元素。
-
{"smallUrl":"https:\/\/www.zenmeban.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.zenmeban.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>"}
6
在网页上右键单击要检查的元素。随后会弹出右键菜单。
-
{"smallUrl":"https:\/\/www.zenmeban.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.zenmeban.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>"}
7
在下拉菜单中选择检查。随后会在检查器中直接跳至所选的元素，并高亮显示源代码。
- 无需手动打开检查器。选择右键菜单上的检查会自动打开检查器。