带你认识谷歌浏览器的调试工具!<超详细介绍>
正文介绍
你有没有想成为前端开发者的想法呢,那谷歌浏览器绝对是你的不二选择!先来和小编一起认识一下谷歌浏览器的调试工具吧!
1. Elements
先来看这张图最上头的一行是一个功能菜单,每一个菜单都有它相应的功能和使用方法,依次从左往右来看
箭头按钮:用于在页面选择一个元素来审查和查看它的相关信息,当我们在Elements这个按钮页面下点击某个Dom元素时,箭头按钮会变成选择状态
设备图标:点击它可以切换到不同的终端进行开发模式,移动端和pc端的一个切换,可以选择不同的移动终端设备,同时可以选择不同的尺寸比例,chrome浏览器的模拟移动设备和真实的设备相差不大,是非常好的选择
Element内容:用来查看,修改页面上的元素,包括DOM标签,以及css样式的查看,修改,还有相关盒模型的图形信息。
下图我们可以看到当我鼠标选择id为lg_tar的div元素时,右侧的css样式对应的会展示出此id的样式信息,此时可以在右侧进行一个修改,修改即可在页面上生效。
灰色的element.style样式同样可以进行添加和书写,唯一的区别是,在这里添加的样式是添加到了该元素内。
同时,当我们浏览网站看到某些特别炫酷的效果和难做的样式时候,打开这个功能,我们即可看到别人是如何实现的,学会它这知识就是你的了,仔细钻研也会有意想不到的收获
2. Console控制台:
用于打印和输出相关的命令信息,其实console控制台除了我们熟知的报错,打印console.log信息外,还有很多相关的功能,下面简单介绍几个:
一些对页面数据的指令操作,比如打断点正好执行到获取的数据上,由于数据都是层层嵌套的对象,这个时候查看里面的key/value不是很方便
即可用这个指令开查看,obj的json string 格式的key/value,我们对于数据里面有哪些字段和属性即可一目了然
除了console.log还有其他相关的指令可用
3. Sources:
js资源页面:这个页面内我们可以找到当然浏览器页面中的js 源文件,方便我们查看和调试,在我还没有走出校园时候,我经常看一些大站的js代码,那时候其实基本都看不懂,但是最起码可以看看人家的代码风格,人家的命名方式,所有的代码都是压缩之后的.
我们可以点击下面的{}大括号按钮将代码转成可读格式
比如当我们想不起某个方法的具体使用时候,会打开控制台随意写一些测试代码,或者想测试一下刚刚写的方法是否会出现期待的样子,但是控制台一打回车本想换行但是却执行刚写的半截代码.
所以推荐使用Sources下面的左侧的Sinppets代码片段按钮这时候点击创建一个新的片段文件,写完测试代码后把鼠标放在新建文件上run,再结合控制台查看相关信息
新建了一个名叫:app.js的片段代码,在你的项目环境页面内,该片段可执行项目内的方法
Chrome 的一种扩展程序,它是按照扩展的ID来组织的,这些文件也是嵌入在页面中的资源,这类文件可以读写和操作我们的资源,需要调试这些扩展文件,则可以在这个目录下打开相关文件调试,但是几乎我们的项目还没有相关的扩展文件,所以啥也看不到,平时也不需要关心这块
4. Network:
网络请求标签页:可以看到所有的资源请求,包括网络请求,图片资源,html,css,js文件等请求,可以根据需求筛选请求项,一般多用于网络请求的查看和分析,分析后端接口是否正确传输,获取的数据是否准确,请求头,请求参数的查看
以上我选择了All,就会把该页面所有资源文件请求下来,如果只选择XHR 异步请求资源,则我们可以分析相关的请求信息
打开一个Ajax异步请求,可以看到它的请求头信息,是一个POST请求,参数有哪些,还可以预览它的返回的结果数据,这些数据的使用和查看有利于我们很好的和后端工程师们联调数据,也方便我们前端更直观的分析数据
你对这些谷歌浏览器的基础调试工具有了些许了解了吗,是不是觉得未来都明朗了,更多谷歌浏览器教程尽在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/0630/20230630045434915.png)
谷歌浏览器怎么设置网页自动刷新
谷歌浏览器怎么设置网页自动刷新?今天小编带来几个步骤教你开启谷歌浏览器自动刷新功能的方法,欢迎感兴趣的用户前来阅读。
![怎么把谷歌浏览器设置成默认浏览器](/uploadfile/2024/0227/20240227112616176.png)
怎么把谷歌浏览器设置成默认浏览器
怎么把谷歌浏览器设置成默认浏览器?接下来小编给大家带来设置谷歌为默认浏览器的操作步骤的具体内容,感兴趣的朋友赶紧来看看吧。
![360浏览器怎么设置无痕浏览](/uploadfile/2024/0722/20240722021328137.png)
360浏览器怎么设置无痕浏览
喜欢使用360浏览器却不会开启无痕浏览模式的小伙伴快来看看这篇文章吧,教你快速打开无痕模式。
![谷歌浏览器app在哪清理缓存](/uploadfile/2024/0123/20240123112935436.png)
谷歌浏览器app在哪清理缓存
谷歌浏览器app在哪清理缓存?小编今天带来手机谷歌浏览器清理缓存的方法,快来一起阅读学习吧。
![谷歌浏览器怎么设置多窗口模式](/uploadfile/2024/0320/20240320021044132.png)
谷歌浏览器怎么设置多窗口模式
谷歌浏览器怎么设置多窗口模式?本篇文章就给大家介绍谷歌浏览器设置多窗口模式方法教程,希望能够给大家带来帮助。
![手机google如何开启画中画](/uploadfile/2024/0522/20240522054319947.png)
手机google如何开启画中画
手机google如何开启画中画?本篇文章就给大家带来手机google设置画中画功能方法指南,有需要的朋友赶紧来看看吧。
![谷歌浏览器标签页搜索功能怎么启用](/uploadfile/2024/0607/20240607095900197.png)
谷歌浏览器标签页搜索功能怎么启用
谷歌浏览器标签页搜索功能怎么启用?接下来小编就给大家带来谷歌浏览器使用标签页搜索功能方法步骤,有需要的朋友赶紧来看看了解一下吧。
![Win7系统谷歌浏览器无法下载文件怎么办?<解决方法>](/uploadfile/2022/0616/20220616021943473.jpg)
Win7系统谷歌浏览器无法下载文件怎么办?<解决方法>
谷歌浏览器,又称Google浏览器、Chrome浏览器,是谷歌Google推出的一款强大好用的基于Chromium内核的网页浏览器。
![如何停止谷歌chrome浏览器更新?<解决方法>](/uploadfile/2022/0621/20220621021048812.jpg)
如何停止谷歌chrome浏览器更新?<解决方法>
谷歌chrome更新非常频繁,以下是停止更新的方法。在线停止更新的方法有很多,但是Google chrome更新很顽固即使服务停止,更新仍在进行。
![如何下载chrome 谷歌浏览器最新版离线安装包?](/uploadfile/2022/0620/20220620095511544.jpg)
如何下载chrome 谷歌浏览器最新版离线安装包?
目前市面上的浏览器种类繁多,但基本可以分为以IE为首的三叉戟内核阵营,以FireFox为代表的Gecko内核阵营,以及本文提到的chrome(谷歌Chrome)采用的Webkit内核阵营。
![怎么在一台电脑上安装多版本的谷歌浏览器](/uploadfile/2022/0328/20220328021747267.png)
怎么在一台电脑上安装多版本的谷歌浏览器
你有没有想要知道的谷歌浏览器使用技巧呢呢,你知道怎么在一台电脑上安装多版本的谷歌浏览器吗?来了解怎么在一台电脑上安装多版本的谷歌浏览器的具体步骤
![如何在 Linux 中下载安装老版本的谷歌浏览器?](/uploadfile/2022/0621/20220621092755971.jpg)
如何在 Linux 中下载安装老版本的谷歌浏览器?
谷歌浏览器 Google Chrome完全免费,跨平台支持 Windows、Mac 和 Linux 桌面系统,同时也有 iOS、Android 的手机版 平板版,你几乎可以在任何智能设备上使用到它。
![如何在Chrome书签栏添加自定义按钮?](/uploadfile/2022/0530/20220530050001341.jpg)
如何在Chrome书签栏添加自定义按钮?
书签是一种无需记住URL就能访问网页的简单方法。然而,许多人对Chrome的书签栏感到恼火,因为默认情况下你无法隐藏它。Chrome允许你隐藏书签栏仅当您在该标签中打开了网页时。可以使用Windows中的键盘快捷键“Control + Shift + B”和Mac中的“Command + Shift + B”来隐藏书签栏。
![如何使用Chrome远程桌面获得虚拟技术支持?](/uploadfile/2022/0428/20220428013617371.jpg)
如何使用Chrome远程桌面获得虚拟技术支持?
由于许多人在家工作,远离他们的IT团队,因此很难通过一条消息或视频电话来解决问题。有时,最好的选择是虚拟技术支持,但这些系统中的许多都很昂贵,需要您是企业用户或管理员才能访问它们。进入Chrome Remote Desktop,这是一个免费的基于网络的应用程序,旨在通过谷歌帐户提供和接受虚拟技术支持。以下是如何访问和使用该功能来给予和接受技术支持。
![如何在 Windows 11 中停止 Google Chrome 保存浏览历史记录?](/uploadfile/20220510/1652153998390793.jpg)
如何在 Windows 11 中停止 Google Chrome 保存浏览历史记录?
默认情况下,谷歌浏览器会保存您查看的每个网站的日志。如果你宁愿它没有,有办法解决这个问题。
![谷歌浏览器提示“此网站无法提供安全连接”怎么办?<解决方法>](/uploadfile/2022/0421/20220421022153336.jpg)
谷歌浏览器提示“此网站无法提供安全连接”怎么办?<解决方法>
大家在使用google浏览器查资料的时候,有没有遇到网站弹出“您与此网站之间建立的连接不安全,请勿在网站上输入任何敏感信息(例如密码或信用卡信息),因为攻击者可能会盗取这些信息”的提示,遇到这种情况其实是有方法可以解决的,下面就一起来看看具体的解决方法吧。希望能对大家有所帮助!
![如何在谷歌浏览器查看开发者工具中的网络监控](/uploadfile/2024/0826/20240826103556101.png)
如何在谷歌浏览器查看开发者工具中的网络监控
如何在谷歌浏览器查看开发者工具中的网络监控?想详细了解如何查看谷歌浏览器开发者工具的网络监控就来学习这篇查看方法指南吧。
![谷歌浏览器处理chrome黑屏、白屏的三种方法](/uploadfile/2022/0406/thumb_227_166_20220406052731414.png)
谷歌浏览器处理chrome黑屏、白屏的三种方法
谷歌浏览器有时会出现黑屏或是白屏的问题,你知道该如何解决吗,快来和小编一起学习!