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

网页开发者工具之 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”,你的密码就暴露无遗

希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦(๑•̀ㅂ•́)و

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180712A1Y2HK00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券