细说网页开发者工具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