大家好，我是IT修真院郑州分院第17期的学员李亚兵，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网web任务1，深度思考中的知识点——如何使用浏览器的F12调试页面？

（1）背景介绍：

通常前端程序员在按照UI效果图编辑网页时，不可能一口将全部的代码全部写好，通常情况是边写边调，经过反反复复的调试后才能达到要求的效果，这时候用Chrome浏览器的F12开发者工具能形象直观的帮助程序员调试自己的代码，用好F12能显著提高开发者的工作效率，加快调试的速度。

（2）知识剖析：

1、元素（Elements）

查看元素代码：点击如图箭头（或用者用快捷键Ctrl+Shift+C）进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置 。

查看元素属性：可从被定位的源码中查看部分，如class、src，也可在右边的侧栏中查看全部的属性。

2、控制台（Console）

Console 对象用于 JavaScript 调试。

JavaScript 原生中默认是没有 Console 对象,这是宿主对象（也就是浏览器）提供的内置对象。 用于访问调试控制台, 在不同的浏览器里效果可能不同。

 Console 对象常见的两个用途：

 显示网页代码运行时的错误信息。

 提供了一个命令行接口，用来与网页代码互动。

 以 Chrome浏览器为例，我们可以通过按 F12 或者 Control+Shift+i（PC平台）/ Alt+Command+i（Mac平台）

    来打开 Console 窗口。

3、源代码（Sources）其主要功能如下介绍

Sources面板主要用于查看web站点的资源列表及javascript代码的debug。

4、network

network的主要功能

（3）常见问题：

                    1、什么是浏览器F12开发者工具调试页面？

                    2、如何更改调试窗口的显示位置？

                    3、如何更直观的观察到页面中设置的盒子模型？

                    4、如何选中需要修改的元素？如何进行手机端的调试？

                    5、如何修改设置当前元素的样式，或在当前元素对应的类上修改样式？

（4）解决方案：

  1、什么是浏览器F12开发者工具调试页面？

                    F12开发人员工具是一套按需采用的工具，网站开发人员可以随时在任何网页上使用F12工具，从而快速调试的JavaScript中，HTML和级联样式表（CSS），还可以跟踪并查明网页或网络的性能问题。

  2、如何更改调试窗口的显示位置？

                    首先先按F12进入调试位置：

                        一般都是谷歌浏览器是默认放置在右侧的，今天我们主要说谷歌浏览器当中的F12开发者工具。

                        如果要进行模拟手机端调试页面的话，用左右布局调试会比较方便，如果是调试PC端页面的话，将调试页面

放置下端会更好一点，这样不会遮住部分的显示内容。

  3、如何更直观的观察到页面中设置的盒子模型？

                    咱们在CSS布局会经常用到盒子模型，可是在网页上随意点开某一个块级元素进行审查，在管理者工具栏有一个直观的盒子样式，你可以直接在盒子上进行更改.margin，填充，边框，内容栏的上下左右各个值都可以进行直观的修改

  4、如何选中需要修改的元素？如何进行手机端的调试？

一串文字也可以是一张图片或者一个块级元素。

首先打开F12，图上右上角有一个小鼠标箭头图标和一个小手机图标。我们用小鼠标箭头图标然后点击选择网页中的内容，这时候就会在开发者工具中看见该选中的内容样式显示出来。点击小手机图标，开发者工具会将页面模式换成模拟手机浏览的状态，可选择市场主流的不同品牌手机和不同的分辨率样式来进行页面查看，从而观察页面在不同手机不同分辨率下的显示效果。

  5、如何修改设置当前元素的样式，或在当前元素对应的类上修改样式

选择某一个元素，在开发者工具底下会弹出一个当前元素样式 - 元素风格。可在该选择样式下更改，，它不会影响其它位置相同元素的样式，只会影响当前你选取的这个元素的样式。这样优先级更高

如何在当前元素对应的类上修改样式？在开发者工具右下角的位置就是当前元素类，也可在这个位置进行更改样式，但是在这个位

置修改样式需要注意页面当中所有同一种元素的样式都会发生改变，一牵动则动全身。

（5）编码实战：

之前已经演示的够多了，就不在演示了。

（6）拓展思考：

不同的浏览器开发有什么差别，那个浏览器的开发者工具最好用？

（7）参考文献：

源自 A-Tione大神的博客，感谢

（8）更多讨论：

 1、什么是浏览器F12开发者工具调试页面？

 F12开发人员工具是一套按需采用的工具，网站开发人员可以随时在任何网页上使用F12工具，从而快速调试的JavaScript中，HTML和级联样式表（CSS），还可以跟踪并查明网页或网络的性能问题。

2、如何更改调试窗口的显示位置？

首先先按F12进入调试位置：

  一般都是谷歌浏览器是默认放置在右侧的，今天我们主要说谷歌浏览器当中的F12开发者工具。如果要进行模拟手机端调试页面的话，用左右布局调试会比较方便，如果是调试PC端页面的话，将调试页面放置下端会更好一点，这样不会遮住部分的显示内容。

3、如何更直观的观察到页面中设置的盒子模型？

咱们在CSS布局会经常用到盒子模型，可是在网页上随意点开某一个块级元素进行审查，在管理者工具栏有一个直观的盒子样式，你可以直接在盒子上进行更改.margin，填充，边框，内容栏的上下左右各个值都可以进行直观的修改。

（9）鸣谢：

感谢刘超师兄，此教程是在他们之前技术分享的基础上完善而成。

（10）结束语：

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~