谷歌浏览器的开发者工具有哪些功能?(功能详解)

更新时间:2022-04-07 436 来源:克罗米部落
正文介绍

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

  

1

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

2

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


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

3

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

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


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


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

4

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

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

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

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

  2、要搜索源码,快捷键是:Ctrl + Shift + F

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

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


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


相关阅读
win10不能下载谷歌浏览器如何修复?<解决方法>

win10不能下载谷歌浏览器如何修复?<解决方法>

在Win10系统中,有一个内置的浏览器,但是一般没有人使用这个内置的浏览器,用户会选择自己喜欢的浏览器来使用然而,近日有用户下载安装了谷歌Chrome,提示“安装失败”。这是怎么回事,该如何解决呢?下面小编将介绍在Win10系统上安装Google Chrome失败的具体解决方法。

如何在 Ubuntu 上更新谷歌浏览器?

如何在 Ubuntu 上更新谷歌浏览器?

尽管多年来竞争激烈,谷歌浏览器还是毫不费力地超越了互联网浏览器列表,成为最受欢迎和广泛使用的在线搜索引擎之一。它的易用性、可用性和与多种操作系统的兼容性以及各种显着的特性使其擅长浏览领域。

谷歌浏览器怎么设置扩展程序在特定程序使用

谷歌浏览器怎么设置扩展程序在特定程序使用

谷歌浏览器怎么设置扩展程序在特定程序使用?接下来小编就给大家带来谷歌浏览器设置扩展在特定网站使用教程,有需要的朋友不要错过了。

如何在 Windows 10安装 Google Chrome?

如何在 Windows 10安装 Google Chrome?

为什么要写这个教程呢?因为我是专注于小白入门电脑的教程,所以我发现很多刚使用电脑的朋友们还是不知道怎么安装软件。

手机谷歌浏览器怎么不能翻译网页了

手机谷歌浏览器怎么不能翻译网页了

手机谷歌浏览器怎么不能翻译网页了?下面就让小编给大家带来解决手机谷歌浏览器不能翻译教程一览,感兴趣的朋友快来看看吧。

如何用百度下载chrome浏览器

如何用百度下载chrome浏览器

如何用百度下载chrome浏览器?Google Chrome,又称Google浏览器,是个由Google(谷歌)公司开发的网页浏览器。该浏览器是基于Chromium开源软件所撰写。