如何在 Chrome 中使用 Inspect 元素
启动检查元素工具的最简单方法是右键单击网页上的任何内容。然后,只需单击列表底部的“检查”选项。通常,Element 是默认启动的。
![](http://pubimage.360doc.com/wz/default.gif)
如果没有,那么您可以单击 Chrome 顶部的“元素”选项卡。
![](http://pubimage.360doc.com/wz/default.gif)
如果您使用的是 Mac,则应该能够通过 CMD+单击并选择“检查”来访问此菜单。
如何使用开发工具检查元素
启动 Inspect Elements 就是从 Google Chrome 启动“开发人员工具”。打开 Chrome 中的“更多”设置,单击“更多工具”,然后单击“开发人员工具”。
单击三点图标。该图标位于浏览器窗口右上角地址栏旁边。它将打开一个下拉菜单。
![](http://pubimage.360doc.com/wz/default.gif)
当您单击三点菜单时,将出现一个弹出窗口。将鼠标悬停在“更多工具”选项上,会弹出另一个子菜单。
单击“更多工具”子菜单上的“开发人员工具”。这将打开浏览器窗口右侧或浏览器窗口下方的检查器列,具体取决于您的设置。
![](http://pubimage.360doc.com/wz/default.gif)
注意:您也可以使用键盘快捷键打开检查器工具。此快捷键在 Mac 上为 Option+⌘ Cmd+I,在 Windows 上为 Ctrl+Alt+I。
![](http://pubimage.360doc.com/wz/default.gif)
现在您可以将鼠标悬停在检查器列框中的元素上。将鼠标移动到检查器中的某个元素或一行将突出显示网页上所选的相应元素。
![](http://pubimage.360doc.com/wz/default.gif)
当您突出显示要检查的元素时,只需单击它,正确的检查器列就会自动弹出在右侧,您可以查看所有源代码。
![](http://pubimage.360doc.com/wz/default.gif)
就是这样。现在您知道如何在计算机上使用 Chrome 中的检查元素工具来检查任何网页上可视元素的 HTML 源代码。