做开发的时候，调试程序是必不可少的一个环节。
如何调试前端程序代码呢？这就需要用到浏览器开发者工具。
我们编写的网页代码(html、css、JavaScript)是必须通过浏览器来解析、渲染，才能在浏览器上展示为网页的，那么基本上所有的浏览器上都自带了开发者工具，这样对于开发者来说，不但可以在浏览器上看到自己编写的网页效果，同时还能在浏览器上进行调试，边调试边能够看到调试后的网页的效果，这是非常方便的。
接下来我们以谷歌浏览器为例，来了解下开发者工具（developerstool），其他浏览器上也一定会有开发者工具，只不过在不同的浏览器里面，开发者工具所在的入口位置可能会不同。
其实不同的浏览器自带的开发者工具，功能都是差不多的。不过谷歌浏览器、火狐浏览器做的更好一点而已，对开发者来说，尤其是前端开发者，最专业的浏览器应该是火狐浏览器，不过用其他的也可以，不用太过于吹毛求疵。
现在我打开谷歌浏览器(没有谷歌浏览器的小伙伴可以自己在电脑上下载安装一下)，然后在谷歌浏览器中打开百度这个网页，然后在浏览器地址栏最右边，会看到有3个纵向排列的小点，然后点击那3个小点，在出现的下拉菜单中，把鼠标滑到更多工具，就会在又出现一个菜单，在这个菜单上，就能找到开发者工具。如下图所示：
然后点一下这个开发者工具，就会调出浏览器的开发者工具，如下图所示，我画圆圈的区域就是开发者工具区域：
我们在这个开发者工具上，看到的这些代码，就是现在浏览器上显示的百度这个网页的代码，我们把鼠标在这些代码上滑动，当鼠标停留在某一个html元素上时，就会在开发者工具左边，把该html元素在网页上所占的区域，上面覆盖一个浅蓝色阴影的效果，表示这一块区域就是鼠标所指的html代码所渲染出来的。如下图：
我们还可以修改网页上的东西，如何修改呢？
比如：
我们把鼠标滑到搜索框右边的百度一下这个按钮上面，然后点击一下右键，就会弹出一个菜单，在这个菜单上找到并点击检查，就会在右侧的开发者工具中以深蓝色区域选中百度一下这一块所在的html代码（我们看到百度一下这个按钮是一个input元素），然后我们在选中的代码上右键点击，就会弹出一个菜单，在弹出的菜单中点击EditasHTML，然后这一块的代码就会变成可编辑的状态了，我们可以修改这一块代码，比如我把value=百度一下修改一下，改为抖音一下，具体操作及修改后的效果如下图所示：
小伙伴们可以这样，自己用开发者工具改一改网页，随便玩一玩，体验一下。
但是这种修改其实只是在我们本地的浏览器上改动，这相当于只是一个调试网页的过程，并不会对百度的网页真正完成修改，因为这些代码都是在人家百度的服务器里面的，除非你能黑进人家的服务器进行修改。
当我们刚开始打开开发者工具的时候，默认是在Elements这个菜单里面，Elements就是元素的意思，表示在这里调试的是html元素，Elements后面还有Console（控制台）、Sources（资源）等等其他的功能模块菜单。现在我们先了解Elements，其他的菜单我们后面再了解。
我们还看到，开发者工具的上半部分现在是html代码，下半部分默认选中的是Styles这个菜单，在这个菜单里面，就是css代码。如下图：
我们把鼠标滑到开发者工具的css区域，css属性的前面自动会出现单选框，表示这个css属性在起作用，如果我们把对勾去掉，就表示这个css属性不会作用在对应的html元素上了。
我们把鼠标停留在某一个css选择器（.classname、#idname就是选择器，所谓选择器，就是表示选择某一个html元素）上，该选择器对应的html元素在网页中就会覆盖上蓝色阴影，表示这个css是作用在这里的html元素上的。我们看到百度一下所在的input元素的class是s_btn，我们可以去掉这个选择器（.s_btn就是选择器，表示选择了class=s_btn这个html元素，对它进行修饰美化）后面的花括号里面的css属性前面的，去掉之后，我们看到百度一下这个按钮就标的很丑了，如下图：
我们还可以双击css代码区域，进行css属性的修改。比如我们在.s_btn后面的花括号里面，找到color这个属性，这里默认的属性是color:#fff，#fff是十六进制的颜色值，表示白色，我们把百度一下这几个字的字体颜色变成红色。可以把#fff改成red，如下图所示：
以上就是对浏览器的开发者工具的简单介绍，我们现有一个基本的了解，知道它的功能，以及如何进行简单的调试。