谷歌浏览器的开发者工具有哪些功能?(功能详解)
正文介绍
谷歌浏览器的开发者工具有哪些具体功能呢,有一些编程小白会这么问小编,那么小编就来为大家解答一下!在一般在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下载站吧!
相关下载
![谷歌浏览器电脑版](/uploadfile/2024/0312/20240312045810556.png)
硬件:Windows系统 版本:122.0.6261.6 大小:66.69MB 语言:简体中文 评分: 发布:2023-07-23 更新:2024-05-28 厂商:谷歌信息技术(中国)有限公司
相关下载
![谷歌浏览器安卓版](/uploadfile/2024/0312/20240312045810556.png)
硬件:安卓系统 版本:107.0.5304.105 大小:218.98MB 语言:简体中文 评分: 发布:2022-08-18 更新:2024-08-30 厂商:Google Inc.
相关下载
![谷歌浏览器苹果版](/uploadfile/2024/0312/20240312045810556.png)
硬件:苹果系统 版本:122.0.6261.89 大小:200.4MB 语言:简体中文 评分: 发布:2022-01-23 更新:2024-03-12 厂商:Google LLC
跳转至官网
相关阅读
![谷歌浏览器如何设置安全防护功能](/uploadfile/2023/1213/20231213110357275.png)
谷歌浏览器如何设置安全防护功能
谷歌浏览器如何设置安全防护功能?今天小编带来谷歌浏览器快速开启安全防护功能教程,感兴趣的用户快来一起看看吧。
![谷歌浏览器如何安装flash插件](/uploadfile/2024/0322/20240322021742974.png)
谷歌浏览器如何安装flash插件
谷歌浏览器如何安装flash插件?接下来小编就给大家带来谷歌浏览器安装flash插件操作步骤,有需要的朋友不妨来看看了解一下。
![谷歌浏览器出现dns不可用问题怎么办](/uploadfile/2023/0629/20230629103713540.png)
谷歌浏览器出现dns不可用问题怎么办
谷歌浏览器出现dns不可用问题怎么办?今天小编给大家带来几个步骤教你解决谷歌浏览器dns错误问题的方法,欢迎感兴趣的用户继续阅读下面的内容。
![火狐浏览器打不开怎么办_火狐浏览器打不开解决方法](/uploadfile/2022/0330/20220330044827211.jpg)
火狐浏览器打不开怎么办_火狐浏览器打不开解决方法
你有没有在使用火狐浏览器的时候遇到各种问题呢,你知道火狐浏览器打不开是怎么回事呢?来了解火狐浏览器打不开的解决方法,大家可以学习一下
![谷歌浏览器崩溃怎么修复](/uploadfile/2024/0401/20240401031529995.png)
谷歌浏览器崩溃怎么修复
谷歌浏览器崩溃怎么修复?下面就让小编给大家带来谷歌浏览器页面崩溃解决方法一览,有需要的朋友千万不要错过了。
![谷歌浏览器怎么设置个性化字体](/uploadfile/2024/0514/20240514030220457.png)
谷歌浏览器怎么设置个性化字体
谷歌浏览器怎么设置个性化字体?接下来小编就给大家带来谷歌浏览器修改网页字体具体流程,大家赶紧来看看吧。
![如何在谷歌浏览器中打开阅读清单](/uploadfile/2024/0529/20240529024603274.png)
如何在谷歌浏览器中打开阅读清单
如何在谷歌浏览器中打开阅读清单?下面就让小编给大家带来谷歌浏览器打开阅读清单详细教程,有需要的朋友快来看看了解一下吧。
![如何在Win10专业版上更新Google Chrome?](/uploadfile/2022/0622/20220622112231314.jpg)
如何在Win10专业版上更新Google Chrome?
在谷歌Chrome中,谷歌公司也将推出各种版本来升级和更新我们。我们可能不更新,或者不更新一些新功能就用不上了。
![Edge浏览器怎么同步谷歌浏览器下载](/uploadfile/2022/0609/20220609025722957.jpg)
Edge浏览器怎么同步谷歌浏览器下载
Edge浏览器怎么同步谷歌浏览器下载?在浏览器之间切换从来都不是什么大事,但这也取决于你使用的功能。比如用扩展程序定制Google Chrome等浏览器,将打开的标签同步到我们的移动设备等等。
![CentOS入门,新手如何下载Chrome浏览器?](/uploadfile/2022/0623/20220623110810202.jpg)
CentOS入门,新手如何下载Chrome浏览器?
谷歌浏览器 Google Chrome完全免费,跨平台支持 Windows、Mac 和 Linux 桌面系统,同时也有 iOS、Android 的手机版 平板版,你几乎可以在任何智能设备上使用到它。
![在 Chrome 中怎么撤销删除下载](/uploadfile/2022/0601/20220601014006764.jpg)
在 Chrome 中怎么撤销删除下载
每当您使用 Google Chrome 网络浏览器下载文件时,它都会自动添加到下载历史记录中,您可以通过在地址栏中加载 chrome: downloads 来访问它。它还会保存到您选择的本地存储位置,前提是在此之前它没有被标记为恶意。
![如何在 Android 上更新 Chrome](/uploadfile/2022/0608/20220608101806653.jpg)
如何在 Android 上更新 Chrome
如何在 Android 上更新 Chrome?Google Chrome 是 Android 最好的网络浏览器之一。但前提是它使用最新软件保持更新!以下是检查新更新的方法。
![谷歌浏览器如何禁用flash?flash禁用方法介绍](/uploadfile/20220421/1650513391835888.jpg)
谷歌浏览器如何禁用flash?flash禁用方法介绍
最近,频频爆出的安全漏洞,让flash的存在感越来越低,甚至曾经有一个Flash安全漏洞被曝可用于向Windows PC传送勒索软件。很多公司和个人用户也因此选择禁用flash!那么,在谷歌浏览器中如何操作禁用flash呢?下面就让我们一起来看看,了解一下吧!
![如何修复谷歌浏览器的字体看起来不正常](/uploadfile/2022/0608/20220608115218672.jpg)
如何修复谷歌浏览器的字体看起来不正常
前几天,当我在一台新的 Windows 上安装 Google Chrome Canary 时,我立即注意到该字体在浏览器界面和我在浏览器中打开的网站上看起来不对劲。
![手机版谷歌浏览器怎么设置中文](/uploadfile/2024/0613/20240613110028368.png)
手机版谷歌浏览器怎么设置中文
手机版谷歌浏览器怎么设置中文?接下来就让小编给大家带来手机版谷歌浏览器中文设置步骤一览,感兴趣的朋友千万不要错过了。
![如何从谷歌浏览器远程注销?](/uploadfile/2022/0507/20220507102446762.jpg)
如何从谷歌浏览器远程注销?
Chrome 只是一个网络浏览器。如果我告诉您有关 Chrome 的信息,我会将其描述为一个由绿色、红色、黄色和蓝色组成的球体。下面就简要介绍一下 chrome 以及它是如何工作的。
![如何在Windows上的谷歌浏览器中管理多个用户?](/uploadfile/2022/0427/20220427101810144.jpg)
如何在Windows上的谷歌浏览器中管理多个用户?
这chrome“描述文件管理器”允许您在上为Google Chrome浏览器设置多个用户帐户Windows 10。这样,使用您计算机的每个人都可以有自己的单独设置,书签,以及主题。您甚至可以将您的Chrome帐户与您的连接谷歌账户在多个设备之间同步书签和应用程序。
![将密码导入 Chrome 的 4 种简单方法!](/uploadfile/2022/0429/20220429095802428.jpg)
将密码导入 Chrome 的 4 种简单方法!
您刚刚切换到谷歌浏览器吗?如果是这样,您要做的第一件事就是将现有密码导入 Chrome。Google Chrome 实际上允许您从保存的 CSV 密码文件或计算机上安装的其他浏览器导入密码。无论哪种方式,将密码导入 Chrome 都很容易。