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

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

硬件: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下载站吧!


相关阅读
傲游云浏览器电脑版怎么样

傲游云浏览器电脑版怎么样

傲游浏览器是一款占用系统资源较少、支持多平台、功能丰富的网页浏览器。傲游浏览器可让用户自由拓展自己想要的功能,而且傲游浏览器还支持多语言,用户可根据自己需求在菜单中随时随地切换自己想要的语言。

谷歌浏览器怎么翻译英文网页

谷歌浏览器怎么翻译英文网页

谷歌浏览器怎么翻译英文网页?接下来小编就给大家详细介绍谷歌浏览器自动翻译英文网页方法技巧,感兴趣的朋友千万不要错过了。

谷歌浏览器设置主题背景怎么设置

谷歌浏览器设置主题背景怎么设置

谷歌浏览器设置主题背景怎么设置?本篇文章就给大家带来谷歌浏览器主题背景具体设置方法详解,大家不要错过了。

谷歌浏览器怎么添加语言

谷歌浏览器怎么添加语言

谷歌浏览器怎么添加语言?今天小编带来几个步骤教你快速给谷歌浏览器添加语言​的方法,感兴趣的用户欢迎继续阅读下面的内容。

QQ浏览器缓存数据怎么清理

QQ浏览器缓存数据怎么清理

我们都知道软件长时间使用以后,就会留下很多缓存文件和别的垃圾信息,如果不及时清理,就会拖慢浏览器的反应速度。这个时候就需要我们及时的经常性的清理,清理缓存后会更方便使用,反应速度更好。下面就让我们一起来看看,在使用QQ浏览器的时候怎么清理缓存的吧!

傲游云浏览器速度快不快

傲游云浏览器速度快不快

傲游浏览器采用了傲游自主研发的全球首款双核引擎,具备高效的浏览速度及稳定性,使浏览网页更加流畅。

如何修复:Chrome 无法在线播放视频?方法教程介绍

如何修复:Chrome 无法在线播放视频?方法教程介绍

很多时候Chrome 无法在线播放视频?由于某些连接问题的人为错误,您可能会遇到 Chrome 无法播放视频的问题。要纠正此错误,您只需遵循一些基本的故障排除步骤即可。此外,在执行缓存清除甚至浏览器重置之前,重新启动您的 PC 或笔记本电脑并检查互联网连接始终是事先的补救措施。

如何在 Chrome 中删除当前站点的 Cookie?

如何在 Chrome 中删除当前站点的 Cookie?

由于威胁或安全问题,您可能需要删除Chrome中当前站点的Cookie。或者,也许您是一名Web开发人员,更喜欢在访问网页后运行测试或清除测试。出于不同的原因,从特定站点删除cookie是每个人都需要知道的任务。

更新Chrome的最佳方式有哪些?

更新Chrome的最佳方式有哪些?

更新Chrome可以保证你的安全,让你获得最新的功能。如果你定期重启应用程序,Chrome会自动更新。但如果你是一个让电脑一直开着,并且一直让Chrome运行的人,它就没有机会更新了。

如何从 Chrome 的浏览历史记录中删除整个网站?

如何从 Chrome 的浏览历史记录中删除整个网站?

您是否曾尝试在 Google Chrome 网络浏览器中删除单个站点的浏览历史记录?您可能遇到了障碍,因为不清楚如何做到这一点。虽然您可以删除整个浏览历史记录,其中包括您要删除的网站,但这并不是最佳解决方案。您可以在 Chrome 中打开浏览历史记录并显示网站的所有条目或其中的一部分。

如何在 Chrome 中对标签进行分组?

如何在 Chrome 中对标签进行分组?

任何人在使用谷歌浏览器时学到的第一件事就是标签管理可能会失控。对我个人而言,打开新标签就像呼吸一样;它只是发生,无论我是否敏锐地意识到它。当您打开如此多的 Chrome 标签页,以至于您几乎无法辨认出每个小图标旁边的文字时,您可能会开始怀疑是否有更方便的方式来组织您的浏览器。幸运的是,有一种方法可以在 Chrome 中对标签进行分组。

如何使用键盘在谷歌浏览器中导航标签?

如何使用键盘在谷歌浏览器中导航标签?

在浏览器的地址栏中显示选项卡时,大多数基于 Chromium 的 Web 浏览器都遵循默认设计。您在浏览器中打开的选项卡越多,浏览器就会减小选项卡图标的大小,但最终会达到临界点。