python浏览器开发者工具_Python学习第232课——浏览器开发者工具

做开发的时候，调试程序是必不可少的一个环节。

如何调试前端程序代码呢？这就需要用到浏览器开发者工具。

我们编写的网页代码(html、css、JavaScript)是必须通过浏览器来解析、渲染，才能在浏览器上展示为网页的，那么基本上所有的浏览器上都自带了开发者工具，这样对于开发者来说，不但可以在浏览器上看到自己编写的网页效果，同时还能在浏览器上进行调试，边调试边能够看到调试后的网页的效果，这是非常方便的。

接下来我们以谷歌浏览器为例，来了解下开发者工具（developers tool），其他浏览器上也一定会有开发者工具，只不过在不同的浏览器里面，开发者工具所在的入口位置可能会不同。

其实不同的浏览器自带的开发者工具，功能都是差不多的。不过谷歌浏览器、火狐浏览器做的更好一点而已，对开发者来说，尤其是前端开发者，最专业的浏览器应该是火狐浏览器，不过用其他的也可以，不用太过于吹毛求疵。

现在我打开谷歌浏览器(没有谷歌浏览器的小伙伴可以自己在电脑上下载安装一下)，然后在谷歌浏览器中打开百度这个网页，然后在浏览器地址栏最右边，会看到有3个纵向排列的小点，然后点击那3个小点，在出现的下拉菜单中，把鼠标滑到"更多工具"，就会在又出现一个菜单，在这个菜单上，就能找到"开发者工具"。如下图所示：

然后点一下这个"开发者工具"，就会调出浏览器的开发者工具，如下图所示，我画圆圈的区域就是开发者工具区域：

我们在这个开发者工具上，看到的这些代码，就是现在浏览器上显示的百度这个网页的代码，我们把鼠标在这些代码上滑动，当鼠标停留在某一个html元素上时，就会在开发者工具左边，把该html元素在网页上所占的区域，上面覆盖一个浅蓝色阴影的效果，表示这一块区域就是鼠标所指的html代码所渲染出来的。如下图：

我们还可以修改网页上的东西，如何修改呢？

比如：

我们把鼠标滑到搜索框右边的"百度一下"这个按钮上面，然后点击一下右键，就会弹出一个菜单，在这个菜单上找到并点击"检查"，就会在右侧的开发者工具中以深蓝色区域选中"百度一下"这一块所在的html代码（我们看到"百度一下"这个按钮是一个input元素），然后我们在选中的代码上右键点击，就会弹出一个菜单，在弹出的菜单中点击"Edit as HTML"，然后这一块的代码就会变成可编辑的状态了，我们可以修改这一块代码，比如我把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，如下图所示：

以上就是对浏览器的开发者工具的简单介绍，我们现有一个基本的了解，知道它的功能，以及如何进行简单的调试。