曾博玲

（广州松田职业学院,广东 广州511370）

俗话说,工欲善其事必先利其器。作为计算机应用专业的高职学生来说,欲将来从事前端开发,则除了学习前端的基础知识以外,还需要掌握基本的前端调试工具,这也是作为前端学习的必备技巧。Chrome 开发者工具（Chrome DevTools）是一套内置在Google Chrome 中Web 开发和调试工具[1],作为初级开发者来说,该工具中的元素面板（Elements）、控制台面板（Console）、源代码面板（Sources）和网络面板（Network）是最常用的几个面板。笔者在此以谷歌浏览器的元素面板为例,探析其基本用法。

1 Chrome 开发者工具的安装和调用

首先,如何调用浏览器的开发者工具呢？这套工具是直接内嵌在谷歌浏览器中,只需要在PC 端上下载安装谷歌浏览器,那么就已经自带其开发者工具了,可以满足大部分网页的基本调试,不需要再额外去安装插件。

安装好谷歌浏览器之后,打开一个网页,可以通过如下几种方式调用此工具：

1.2 在页面空白处,鼠标右击,选择“检查”,如图②所示。由于版本不同,有些版本则是选择“审查元素”。

图1

图2

1.3 快捷键F12 或Ctrl+Shift+I。

2 Chrome 开发者工具的位置放置

元素面板:

图3

元素面板,即Elements 面板,使用此面板可以自由的操作DOM和CSS 来迭代布局和设计页面[2]。点击元素面板后,在调试工具处,左边是HTML DOM 元素结构,右边显示对应DOM 元素的CSS 样式。不仅有利于查看修改文件结构及元素、样式动态、帮助学生快速查找页面问题,还可以学习模仿线上案例的相关做法。

2.1 网页元素的定位

如何使用此面板呢？首先先了解如何快速匹配到网页上某一元素对应的DOM节点和CSS 样式？……