谷歌浏览器的开发者工具有哪些功能？（功能详解）

正文介绍

　　谷歌浏览器的开发者工具有哪些具体功能呢，有一些编程小白会这么问小编，那么小编就来为大家解答一下！在一般在windows系统上浏览器开发者工具打开都是按F12快捷键，按F12快捷键打开谷歌浏览器如下图所示，下面来分别解释一下各个功能：

　　一、第一个功能：定位的作用，点击一下这个图标，将鼠标放在任意页面上的位置，就可以查看到右边的源码

　　二、第二个功能：是用于屏幕适配的，也就是说谷歌浏览器可以模拟各个型号的手机打开wap页面，如果需要增加手机型号，点击下拉菜单的Edit

　　打开如下图增加手机型号页面，如增加小米Mix3，填写完后点击save按扭

　　这样就增加了小米Mix3型号了

　　三、第三个功能，Elements：查看页面的HTML元素，能够也就是查看源码，我们可以看到布局，可以看到用到的样式，还有用到的链接等等，并且手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈;

　　四、第四个功能，console：这个就是一个web控制台，记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell;

　　五、第五个功能，sources：这个是显示资源文件的，并且可以断点调试JS;

　　(1)上图中第一个红框，是用来选择资源的，当网页被加载的时候向服务器端请求出来的文件包括.html .ccs .js这样的文件;

　　(2)上图中第二个红框，是用来调试js代码的地方，当我们需要调试程序的时候打一个断电，然后通过上图红框3这个工具栏进行调试，也就是打一个断电然后刷新页面程序会调到你打断点的地方，然后通过上图红框4来查看程序中变量的值什么的;

　　(3)上图中第三个红框，第一个按扭是停止状态的按钮就是表示程序是否停止(在debug时)，后面的是程序继续跳过方法，跳过下一个语句，调到上一个语句。

　　1、如果要搜索某个文件，用Ctrl+P，就能快速搜索到需要的文件

　　2、要搜索源码，快捷键是：Ctrl + Shift + F

　　3、快捷键Ctrl + G，输入行号，会跳转到你输入的行号所在的行

　　4、当编辑一个文件的时候，你可以按住Ctrl在你要编辑的地方点击鼠标，可以设置多个插入符，这样可以一次在多个地方编辑

你了解到谷歌浏览器的开发者工具有哪些功能了吗？相信如果你有细心看的话肯定有些了解的！想知道关于谷歌浏览器的更多东西就去chrome下载站吧！