网页开发者工具之 Elements
前言
写这篇文章的目的主要是为了帮助前端小白,学习使用浏览器自带的F12网页开发者工具,来快速定位调试分析问题、解决问题。当然这仅是作者的个人学习心得,有不足之处欢迎大家指点。由于篇幅有限,这篇文章仅介绍Elements。若觉得不错请关注作者的后续更新。
如何在F12工具中定位元素
这里拿我的博客作为网页、用Chrome谷歌浏览器作为例子。打开网页,按下键盘上的F12键。点击Elements栏,选择body元素,如下图:
1.左边用半透明蓝色覆盖表示被选区域,仔细看左下角还有个标志显示元素名称和宽高。
2.中部内容就是Elements,即页面元素。看图可以发现我们选择了body元素
3.右侧区域为Style,即css样式,显示的是被选元素对应的css。这样就非常方便我们调试样式。
这里我们假设有个需求,需要右边头像的元素代码和css演示。我们不需要右键查看源代码(早期有些教程会使用这个方法)。
可以使用F12工具的左上角的指针工具
1.鼠标左键单击指针工具,单击后工具会变为蓝色状态
2.移动鼠标到头像上,你会发现自动出现蓝色半透明选框。会显示元素标签和宽高
3.点击确认后,你会发现中部Elements会自动定位到头像代码,右边Style也会自动定位到头像的css样式
4.在中部选择元素后,可以右键复制代码。
5.在左侧的Style面板中,点击css右边的css文件名也可以定位到个css文件中的具体位置
但是有些特殊的样式需要鼠标到达某一特殊位置的时候才会触发,我们再去点指针的时候就会回到原位。(比如博客右侧的小埋,需要鼠标hover才能触发)。
我们可以将鼠标移上去后,按快捷键Ctrl+Shift+C直接使用指针工具。就可以获取这些特殊样式的css代码
还有些时候,我们需要搜索页面中的某些内容。在中部Elements中使用Ctrl+F打开搜索框:
如图我们搜索“一个好”就得到的想要的元素位置。
F12工具中的盒子模型
还有个东西这里提一下,选择任意一个元素,在右边的Style面板下拉倒最下面,都可以看到我们的盒子模型(网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin)。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫它盒子模式。)
这里可以看出padding的值
这个是margin值
如何在F12工具中直接修改页面
比如我们要修改下面这个标题
直接在Element面板下,双击修改其文本的内容(这里改成余额好多钱,是不是以后都不能相信截图了)
接下来尝试修改其css,我们选择修改其字体颜色和大小
直接在Style面板下修改:颜色改成红色,字体调大至32px。效果如下
我们也可以直接新加css元素,比如加个border(边框)。
移动端开发
若是要调试移动端页面怎么办?
我们只要点击指标工具右边的移动端工具就行,其他的和pc端一样。效果如下:
最后的也是最重要的事
不要在他人电脑上不使用浏览器的记住密码功能!不使用浏览器的记住密码功能!不使用浏览器的记住密码功能!不使用浏览器的记住密码功能!
为什么?这里作者来举个有道云笔记的栗子:
这是作者使用浏览器保密码的有道云笔记的登录页面,你可以看到浏览器默认给你填充好了账号和密码。密码使用···号表示并不可见。
但是,我们打开F12工具:
用指针工具选择密码框。
只要将其input的输入框的type=”password”值改为type=”text”,你的密码就暴露无遗
希望这篇文章能给你带来知识和乐趣,喜欢作者的文章可以点击右上角关注哦()