如何使用浏览器的F12开发者工具调试页面？Chrome浏览器使用F12调试代码方法

一个程序员按照要求编写一个网页，不可能一次编写就完全达到目的，一般要对自己的的代码修改调试几次后才能到达要求，浏览器的f12开发人员工具就可以很方便的帮助程序员调试自己的代码。

浏览器f12功能介绍

调试时使用最多的功能页面是：元素（elements）、控制台（console）、源代码（sources）、网络（network）等。

元素（elements）：用于查看或修改html元素的属性、css属性、监听事件、断点（dom断点：在javascript调试中，我们经常使用到断点调试，其实在dom结构的调试中，我们也可以使用断点方法，这就是dom breakpoint（dom 断点））
控制台（console）：控制台一般用于执行一次性代码，查看javascript对象，查看调试日志信息或异常信息。
源代码（sources）：该页面用于查看页面的html文件源代码、javascript源代码、css源代码，此外最重要的是可以调试javascript源代码，可以给js代码添加断点等。
网络（network）：网络页面主要用于查看header等与网络连接相关的信息。

一，背景介绍

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

二，知识剖析

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

注：部分电脑打开f12是需要组合键：fn + f12。

三，具体实操

1，如何更改调试窗口的显示位置？

先按f12进入调试位置

dosk side有四个选项，1。将开发者工具单框拖出来2.放置左侧3.放置底部4.放置右侧。

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

如果要进行模拟手机端调试页面的话，用左右布局调试会比较方便，如果是调试pc端页面的话，将调试页面放置下端会更好一点，这样不会遮住部分的显示内容。

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

首先打开f12，图上右上角有一个小鼠标箭头图标和一个小手机图标。我们用鼠标小鼠标箭头图标然后点击选择网页中的内容，这时候就会在开发者工具中看见该选中的内容样式显示出来。选择网页中的内容可以是一串文字也可以是一张图片或者一个块级元素。

点击小手机图标，开发者工具会将页面模式换成模拟手机浏览的状态，如上图图中正上方可选择市场主流的不同品牌手机和不同的分辨率样式来进行页面查看，从而观察页面在不同手机不同分辨率下的显示效果。

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

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

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

①如何在当前元素上修改？

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

②如何在当前元素对应的类上修改样式？

在开发者工具最底下我框选出来的位置就是当前元素类，也可在这个位置进行更改样式，但是在这个位置修改样式需要注意页面当中所有同一种元素的样式都会发生改变，一牵动则动全身。

5，如何修改元素设置的伪类属性？