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

 发布时间:2022-04-07  399 来源:谷歌浏览器官网
谷歌浏览器电脑版 谷歌浏览器电脑版

硬件:Windows系统 版本:122.0.6261.6 大小:101.14MB 语言:简体中文 评分: 发布:2023-07-23 更新:2024-04-12 厂商:谷歌信息技术(中国)有限公司

谷歌浏览器安卓版 谷歌浏览器安卓版

硬件:安卓系统 版本:107.0.5304.105 大小:218.98MB 语言:简体中文 评分: 发布:2022-08-18 更新:2024-03-12 厂商:Google Inc.

谷歌浏览器苹果版 谷歌浏览器苹果版

硬件:苹果系统 版本:122.0.6261.89 大小:198.4 MB 语言:简体中文 评分: 发布:2022-01-23 更新:2024-03-12 厂商:Google LLC

  谷歌浏览器的开发者工具有哪些具体功能呢,有一些编程小白会这么问小编,那么小编就来为大家解答一下!在一般在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下载站吧!


相关阅读
谷歌浏览器安装失败怎么办_谷歌安装失败解决方法

谷歌浏览器安装失败怎么办_谷歌安装失败解决方法

你有没有在使用谷歌浏览器的时候遇到各种问题呢,你知道谷歌浏览器安装失败是怎么回事呢?来了解谷歌浏览器安装失败的解决方法,大家可以学习一下。

谷歌浏览器无法下载

谷歌浏览器无法下载

本网站提供谷歌官网正版谷歌浏览器【google chrome】下载安装包,软件经过安全检测,无捆绑,无广告,操作简单方便。

让Chrome停止崩溃的9种方法!

让Chrome停止崩溃的9种方法!

Chrome通常是一款非常稳定、可靠且易于使用的浏览器。但有时你会遇到一连串的崩溃,这可能会令人沮丧。 首先:Chrome多久崩溃一次?您可以通过键入以下内容来获得有关这方面的报告chrome: 崩溃放进你的omnibar。这将显示一个列表,列出所有Chrome崩溃的时间以及这些崩溃发生的时间。如果真的有突然上升,可能是时候找出更多了。

如何修改Mac版谷歌Chrome浏览器默认下载位置?

如何修改Mac版谷歌Chrome浏览器默认下载位置?

Google Chrome for Mac是一款使用非常广泛的浏览器,界面简洁美观,还支持无痕浏览,非常实用,现在带来google chrome for mac最新版本,功能更加完善,运行更加稳定。

如何下载 Mac 版 Chrome

如何下载 Mac 版 Chrome

如何下载 Mac 版 Chrome?想在您的 Mac 上试用 Google Chrome?这是下载它的方法。

如何在Debian上安装Chrome浏览器

如何在Debian上安装Chrome浏览器

如何在Debian上安装Chrome浏览器?Debian将 Firefox 作为默认的网页浏览器。但这并不意味着你不能在其中安装其他网页浏览器。

如何为新标签页自定义启用 Chrome 颜色菜单?

如何为新标签页自定义启用 Chrome 颜色菜单?

在 77 版中,Chrome 做了了许多改进,并提供了一些令人惊叹的功能。其中之一允许您使用特殊的颜色选择器和许多预设来改变浏览器的配色方案。虽然默认情况下没有启用它,但您可以使用标志来激活它。

谷歌浏览器上下抖动怎么办_谷歌浏览器抖动解决方法

谷歌浏览器上下抖动怎么办_谷歌浏览器抖动解决方法

你有没有遇到移动鼠标或是打字的时候会导致谷歌浏览器发生上下抖动的问题,来和小编一起解决谷歌浏览器的问题吧!

微软Edge浏览器成为全球第二大PC浏览器

微软Edge浏览器成为全球第二大PC浏览器

微软Edge浏览器成为全球第二大PC浏览器:在换用Chromium内核后,微软新Edge已经跃居为全球第二大PC浏览器,并得到不少用户的好评。

如何使用谷歌浏览器任务管理器?

如何使用谷歌浏览器任务管理器?

Chrome任务管理器不仅显示中央处理器,内存和网络使用的每个打开的标签和插件,它还允许你用鼠标点击杀死个别进程,类似于Windows任务管理器或macOS活动监视器。

如何配合Chrome使用Evernote?

如何配合Chrome使用Evernote?

Evernote是一款多平台的笔记app。该应用程序将笔记和图像分类到笔记本中,使您可以轻松地组织和标记它们。

如何在 Chrome 操作系统中复制文本链接?

如何在 Chrome 操作系统中复制文本链接?

不久前,谷歌为 Chrome 推出了一个简洁的扩展程序,允许您复制直接指向网页中一段文本的链接。这是一个非常有用的功能,尤其是当您尝试与某人分享长篇文章的特定部分时。但是,如果您使用的是Chromebook,您实际上也可以在 Chrome 浏览器上使用该功能。