Google Chrome浏览器开发人员工具
准备工作
要开始使用开发人员工具，请先下载Google Chrome 浏览器。在浏览器安装完成后，您可以打开自己感兴趣的网页或网络应用程序，然后通过下面任何一种方式进入开发人员工具：
● 点击位于浏览器用户界面右上角的“页面”下拉菜单，然后选择“开发人员”→“开发人员工具”。
● 右键点击网页上的任一元素，在弹出菜单中选择“审查元素”。
● 在 Windows操作系统上，使用Ctrl+Shift+I快捷键打开开发人员工具（或使用Ctrl+Shift+J直接进入chrome浏览器是什么浏览器图标 JavaScript 控制台）。
现在您应该已经看到开发人员工具的窗口了吧？在窗口的最上方的工具栏里排列着 8 个图标，分别对应不同的功能，每一个图标点击后都会打开相应的调试面板，帮助您获取各种不同的信息，如 DOM 树、资源占用情况、页面相关的脚本等。通过 Ctrl+[ 和 Ctrl+] 键，可以在这些项之间进行切换。工具栏最右方还提供了一个搜索框，方便在当前面板中进行搜索。
工具窗口下部的按钮可以让调试窗口停靠到主窗口内，切换 JavaScript 控制台状态，以及其它一些功能。当然您也可以使用 Esc 键来更快地切换 JavaScript 控制台状态。直接点击控制台图标会使控制台调试界面会占据了整个开发工具窗口。窗口右下角显示的是错误和警告计数，点击它们也会打开控制台。
     接下来的单元，让我们一起来一起分解这些图标所对应面板具有的强大功能吧！
1. 元素（Elements）面板
在元素（Elements）面板中，可以看到整个页面的 DOM 树结构和每个元素的所有属性，同时也可以实时地修改这些元素及其属性，并可以实时看到修改后的效果。我们这里以Google 简体中文首页为例，鼠标右键单击“ Google 搜索” 按钮，选择“审查元素”，您会看到如下的窗口界面（注：此处使用的内嵌工具窗口模式，如您的工具窗口为独立窗口模式，可通过点击窗口左下方的“停靠” 图标将其变为内嵌模式）：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。