admin 管理员组文章数量: 1086019
2024年3月22日发(作者：安卓数据库sqlite下载)
-
88
-
科学技术创新2021.05
前端开发调试工具探析
—以谷歌浏览器的元素面板为例——
曾博玲
广东
广州511370）（广州松田职业学院，
摘要：前端开发工程师是当前非常火热的一个职业，从事该职业时掌握当前主流开发者工具的使用也是一项必不可少的技
在元素面板下
DOM节点的编辑和CSS样式的编能。笔者在此以Chrome开发者工具的元素面板为例，探析该工具的安装和调用，
辑，查看元素的盒子模型、同步本地更改等功能。
关键词：前端开发
；
ChromeDevTools；元素面板
；
HTML；CSS
中图分类号院TP319文献标识码院A文章编号院2096-4390渊2021冤05-0088-02
作为计算机应用专业的高
俗话说，工欲善其事必先利其器
。
则除了学习前端的基础知识
职学生来说，欲将来从事前端开发，
这也是作为前端学习的
以外，还需要掌握基本的前端调试工具
，
（
ChromeDevTools）必备技巧
。
Chrome开发者工具是一套内置
在GoogleChrome中Web开发和调试工具
[1]
，作为初级开发者来
（
Elements）
（
Console）
源
说，该工具中的元素面板、控制台面板、
（
Sources）
（
Network）代码面板和网络面板是最常用的几个面板
。
笔者在此以谷歌浏览器的元素面板为例，探析其基本用法。
1Chrome开发者工具的安装和调用
这套工具是直接内
首先，如何调用浏览器的开发者工具呢？
只需要在
PC端上下载安装谷歌浏览器
，那
嵌在谷歌浏览器中，
可以满足大部分网页的基本调
么就已经自带其开发者工具了，
试，不需要再额外去安装插件
。
安装好谷歌浏览器之后，打开一个网页，可以通过如下几种
方式调用此工具
：
1.1点击浏览器右上角的“”（自定义及控制Google
Chrome）>更多工具>开发者工具
。如图
①所示
。
1.2在页面空白处，鼠标右击，选择“检查”，如图②所示。由
“
审查元素
”
于版本不同，有些版本则是选择。
图3
在调试
DOM和CSS来迭代布局和设计页面
[2]
。点击元素面板后，
工具处，左边是HTMLDOM元素结构，右边显示对应DOM元
素的CSS样式。不仅有利于查看修改文件结构及元素、样式动
还可以学习模仿线上案例的相
态、帮助学生快速查找页面问题
，
关做法
。
2.1网页元素的定位
如何使用此面板呢？首先先了解如何快速匹配到网页上某
一元素对应的DOM节点和CSS样式？可通过如下三种方案
。
鼠标右击，选择
方法一：选中某一元素
，
“检查”（版本不同，
有些版本对应的选项为“审查元素”），则可以在面板上调到对应
的HTMLDOM结构和CSS样式
。
方法二：结合最左边的“审查元素”工具，点击页面上需
要调试的元素，则可以在开发工具上跳到对应的DOM结构和
CSS样式
。
方法三：在元素面板上的HTMLDOM结构中，找到元素的
DOM结构，定位到对应网页元素和样式
。如图
④所示，左边是
“新闻资讯”的DOM结构，右边是“新闻资讯”对应的CSS样式
。
图1图2
1.3快捷键F12或Ctrl+Shift+I。
2Chrome开发者工具的位置放置
点击右上角的根
在调试工具处，“”可以设置显示位置
，
据个人习惯进行选择。笔者在此文中的讲解是以底部放置为
例，如图3所示
。
元素面板:
即
Elements面板，元素面板
，
使用此面板可以自由的操作
图4
2.2DOM节点编辑
数
据库
。
作者简介：曾博玲（1989-），女，本科，担任计算机专任教师,研究方向：网页制作
、
2021.05科学技术创新
-
89
-
在左边的HTML结构中，双击对应的结构或者右击
，选择
选择
“Addattribute”可以对元素添加属性，“Editattribute”可以
对元素属性进行修改
，选择
“EditasHTML”可进行对应的
HTML结构进行编辑,选择“Deleteelement”可将元素从页面删
除。还可以查看绑定在该元素的事件
。
如图5所示，
双击
DOM元素或者右击>选择“Editas
HTML”，可进行页面修改
。
图7
2.4盒子模型
所选择的
DOM元素上可显示其在元素面板上选择元素时
，
同时在样式的
Computed处可以非常直观地看到该盒子的大小，
即元素的长宽、
元素的盒子模型，padding、border和margin的值
。
如图8所示，在选择“了解更多”的DOM节点时，可以直观的看
到网页上对应显示其大小为102*40，该值也刚好是在（元素的
with+左右borde）*（元素的height+上下border）。
图5
2.3CSS样式编辑
在右边显示的CSS样式中，
可查看到
DOM元素自身的默
认样式、公共样式以及自行设置的样式和不生效的样式；可以
删除和修改；查看到该样
对自行设置的样式进行动态的增加
、
式对应的文件及所在行数；还可以额外增加对应的样式
。此处
大大提高
的样式修改后无需刷新直接在页面上看到对应效果
，
快速找到不生效
了初学者的学习兴趣，同时帮助初学者拍错
，
提高开发效率。
或者有影响的样式
，
如图6所示，右边是li所对应的样式。越在上面的样式优先
级越高，在上面的白色底纹，双击后可进入编辑状态的都是自
行设置的样式，包括对li有影响的公共样式，自定义样式都可
以进行增加、删除、修改等编辑。灰色底纹的则是不可编辑的默
认样式。
图8
3同步本地更改
在浏览器刷
当调整好样式时，如果没有设置同步本地文件
，
在
souce新时会清空所做的修改。那么如何设置同步本地更改
？
暂存保留更改的方法
面板中，可通过添加本地源文件到工作区
，
实同步本地更新
[2]
。
4结论
Chrome开发者工具功能非常强大，除了以上说的基本的
DOM编辑和CSS编辑外，还可以模拟各种终端设备，显示日志/
警告/错误信息，查看页面请求、网页源文件和优化网页加载性
能等功能。笔者在此也只是展示了此工具的冰山一角
，页面结
同
构和样式的调试也是初级前端开发工程师必备的技能技巧
，
愿能为前
时抛转引玉，后期将继续对此类工具进行探析研究，
端开发高职课程的发展做一份力所能及的贡献
。
参考文献
[1]Chrome开发者工具中文文档,HTML中文网,www.
/doc/Chrome-devtools/.
图6
[2]ChromeDevTools,GoogleDevelopers,.
可点击
cn/web/tools/Chrome-devtools.
如图7所示，笔者欲修改新闻标题列表二字的颜色
，
颜色的值“#fff”，当其改为可输入状态时进行选择或者直接输入
[3]HTMLDOM教程,w3cschool,/
则点击
htmldom/.
颜色值进行修改。欲修改新闻标题列表的字体大小时
，
通
影响字体大小的数值“24”，当其变为可输入或者修改状态时
，
过直接输入，或者键盘上下键对元素的样式数值进行加减微
调，从而达到想要的效果。此改变数值大小的方法同样适用于
修改元素的长宽、行高、时间等样式。
版权声明：本文标题：前端开发调试工具探析——以谷歌浏览器的元素面板为例 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1711120158a589488.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论