细说网页开发者工具F12-前端开发利器一

image

网页开发者工具之 Elements

前言

写这篇文章的目的主要是为了帮助前端小白,学习使用浏览器自带的F12网页开发者工具,来快速定位调试分析问题、解决问题。当然这仅是作者的个人学习心得,有不足之处欢迎大家指点。由于篇幅有限,这篇文章仅介绍Elements。若觉得不错请关注作者的后续更新。

如何在F12工具中定位元素

这里拿我的博客作为网页、用Chrome谷歌浏览器作为例子。打开网页,按下键盘上的F12键。点击Elements栏,选择body元素,如下图:

image

1.左边用半透明蓝色覆盖表示被选区域,仔细看左下角还有个标志显示元素名称和宽高。
2.中部内容就是Elements,即页面元素。看图可以发现我们选择了body元素
3.右侧区域为Style,即css样式,显示的是被选元素对应的css。这样就非常方便我们调试样式。

image

这里我们假设有个需求,需要右边头像的元素代码和css演示。我们不需要右键查看源代码(早期有些教程会使用这个方法)。
可以使用F12工具的左上角的指针工具

image

1.鼠标左键单击指针工具,单击后工具会变为蓝色状态
2.移动鼠标到头像上,你会发现自动出现蓝色半透明选框。会显示元素标签和宽高
3.点击确认后,你会发现中部Elements会自动定位到头像代码,右边Style也会自动定位到头像的css样式

image

4.在中部选择元素后,可以右键复制代码。
5.在左侧的Style面板中,点击css右边的css文件名也可以定位到个css文件中的具体位置

image

但是有些特殊的样式需要鼠标到达某一特殊位置的时候才会触发,我们再去点指针的时候就会回到原位。(比如博客右侧的小埋,需要鼠标hover才能触发)。


image

我们可以将鼠标移上去后,按快捷键Ctrl+Shift+C直接使用指针工具。就可以获取这些特殊样式的css代码

还有些时候,我们需要搜索页面中的某些内容。在中部Elements中使用Ctrl+F打开搜索框:


image

如图我们搜索“一个好”就得到的想要的元素位置。

F12工具中的盒子模型

还有个东西这里提一下,选择任意一个元素,在右边的Style面板下拉倒最下面,都可以看到我们的盒子模型(网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin)。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫它盒子模式。)


image

这里可以看出padding的值


image

这个是margin值

如何在F12工具中直接修改页面

比如我们要修改下面这个标题


image

直接在Element面板下,双击修改其文本的内容(这里改成余额好多钱,是不是以后都不能相信截图了)


image

接下来尝试修改其css,我们选择修改其字体颜色和大小
image

直接在Style面板下修改:颜色改成红色,字体调大至32px。效果如下


image

我们也可以直接新加css元素,比如加个border(边框)。
image

移动端开发

若是要调试移动端页面怎么办?
我们只要点击指标工具右边的移动端工具就行,其他的和pc端一样。效果如下:


image

最后的也是最重要的事

不要在他人电脑上不使用浏览器的记住密码功能!
不使用浏览器的记住密码功能!
不使用浏览器的记住密码功能!
不使用浏览器的记住密码功能!

为什么?这里作者来举个有道云笔记的栗子:


image

这是作者使用浏览器保密码的有道云笔记的登录页面,你可以看到浏览器默认给你填充好了账号和密码。密码使用···号表示并不可见。
但是,我们打开F12工具:


image

用指针工具选择密码框。
只要将其input的输入框的type="password"值改为type="text",你的密码就暴露无遗
image

推荐阅读更多精彩内容