如何检查Chrome中的元素

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

PDF download 下载PDF文件

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

步骤

PDF download 下载PDF文件
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/bf\/Inspect-Element-on-Chrome-Step-1-Version-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/bf\/Inspect-Element-on-Chrome-Step-1-Version-2.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-1-Version-2.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\/b\/b1\/Inspect-Element-on-Chrome-Step-2-Version-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b1\/Inspect-Element-on-Chrome-Step-2-Version-2.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    它位于地址栏的右侧，浏览器窗口的右上角。随后会打开下拉菜单。
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/05\/Inspect-Element-on-Chrome-Step-3-Version-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/05\/Inspect-Element-on-Chrome-Step-3-Version-2.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    随后会弹出子菜单。
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/24\/Inspect-Element-on-Chrome-Step-4-Version-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/24\/Inspect-Element-on-Chrome-Step-4-Version-2.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    随后会在浏览器窗口的右侧打开检查器栏。
    • 也可以用键盘快捷键打开检查器。Mac上的快捷键为 ⌥ Option + ⌘ Cmd + I ，Windows上的快捷键为 Ctrl + Alt + I 。
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0f\/Inspect-Element-on-Chrome-Step-5-Version-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0f\/Inspect-Element-on-Chrome-Step-5-Version-2.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    将鼠标移动到检查器中的某个元素或某行上，随后会高亮显示选中的网页元素。
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/ad\/Inspect-Element-on-Chrome-Step-6-Version-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-6-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ad\/Inspect-Element-on-Chrome-Step-6-Version-2.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    随后会弹出右键菜单。
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/20\/Inspect-Element-on-Chrome-Step-7-Version-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-7-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/20\/Inspect-Element-on-Chrome-Step-7-Version-2.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-7-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    随后会在检查器中直接跳至所选的元素，并高亮显示源代码。
    • 无需手动打开检查器。选择右键菜单上的 检查 会自动打开检查器。
    广告

你可能还喜欢

如何
格式化戴尔电脑
如何
下载和安装VLC媒体播放器
如何
清除缓存和Cookies
如何
将无线键盘连接到电脑
如何
在PC或Mac上连接两个蓝牙音箱
如何在Chrome浏览器中将喜欢的网页制作成桌面应用
如何
在Windows或Mac上打开数据库文件
如何
卸载英伟达驱动程序
如何
将平板电脑连接到电脑上
如何更改键盘的背光颜色
如何
检查笔记本电脑电池
如何
在Linux系统用命令行运行程序
如何
复制粘贴图片
如何
查找网站的IP地址
广告

关于本wikiHow

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

这篇文章对你有帮助吗？

广告