你有关于如何在你的Chromebook上查看视觉元素的源代码的问题吗？要做到这一点，你可以使用谷歌浏览器应用程序中的特殊DevTools，或在任何浏览器页面上。DevTools是Google Chrome浏览器中内置的特殊开发者工具列表。它允许用户在旅途中编辑页面，并跟踪可能的问题。
如何在Chromebook上使用检查元素
对于Chromebook来说，默认浏览器是谷歌，要在这个设备上打开开发者工具，你需要。
- 打开你想要的页面
- 点击应用程序右上角的3个小点
- 选择 “更多工具“
- 点击 “开发者工具“
访问该功能的其他方法是按F12按钮或右键点击所需项目
这是一个通用指令，适用于Windows或任何其他系统上的大多数浏览器。
如何在Mac或Iphone上使用检查元素
是否可以用Mac甚至iPhone来做同样的事情呢？你只需遵循以下几个简单的步骤就可以了。
如何在Mac上使用它
如果你有一台Mac，你最好的浏览器选择是Safari。在这个浏览器中打开开发者工具与在Chrome或Firefox中的相同过程略有不同。你将需要。
- 打开浏览器
- 点击Safari的标签名称
- 选择 “偏好“。
- 然后点击高级齿轮图标，它将位于屏幕的顶部。
- 勾选 “在菜单栏中显示开发菜单 “旁边的方框
一旦你这样做，检查元素将在你的网页上可用。你也可以用CMD + Option + I调用它。
如何在iPhone上使用它
如果你想使用 “检查元素 “功能检查移动版网页在你的iPhone上的外观，你首先需要为你的iOS设备启用Web Inspector。
- 转到设置
- 选择Safari应用程序
- 滚动到底部，点击 “高级菜单“
- 现在打开 “网络检查器 “旁边的复选框
你还需要按照上面的指示在你的Mac上启用开发者菜单。一旦你在iOS设备和Mac上启用了这些功能，你应该能在Mac的顶部看到开发菜单。你需要点击它，以看到附加的iPhone和网页在上面打开。当你切换到一个不同的页面时，你也会在你的Mac上切换该页面的Web Inspector窗口
什么是元素小组
首先要知道的是什么是元素面板。如果你想改变页面的设计或任何外部元素，你需要编辑你的CSS或HTML。你可以使用一个叫做元素面板的开发者工具来做这件事。它将允许你从前端检查和改变你的页面。你在那里可以看到的一些元素有：:
- 关于图像的信息，如它的大小和它的来源
- CSS面板 – 该选项用于改变页面的外部风格。你可以在这里改变参数，如字体、大小、颜色等
- DOM信息或DOM面板用这个选项你可以控制页面的外观。你可以改变元素的位置并完全导航到HTML文件
- 控制台面板展示了开发者工具下的新功能
- 元素事件监听器
- HTML评论
- 反馈信息
检查图像的渲染和自然尺寸
很多时候，你需要了解网页上一张图片的信息，你可以 “检查 “它。例如，这使你有可能知道图片的大小。要做到这一点，当你在DOM树中时，你需要将鼠标指针悬停在该IMG上。
检查源集（srcset）中的特定使用的图像
然后你可以检查加载的是什么版本的图像，以及确切的srcset来源。srcset将帮助浏览器请求具有最小尺寸的图像版本，这比真实的图像略大。这用于查看一组具有不同分辨率的图像，供浏览器选择。首先，选择IMG项目，然后在控制台检查$0.currentSrc信息。注意，如果你需要使用DPI更高的设备，你可以用srcset增加图片的特性。