带你认识谷歌浏览器的调试工具!<超详细介绍>

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

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

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

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

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

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

  你有没有想成为前端开发者的想法呢,那谷歌浏览器绝对是你的不二选择!先来和小编一起认识一下谷歌浏览器的调试工具吧!


  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下载站!

相关阅读
如何解决谷歌浏览器内存不足问题

如何解决谷歌浏览器内存不足问题

如何解决谷歌浏览器内存不足问题?今天小编带来谷歌浏览器内存不足处理技巧,一起来看看具体的操作步骤吧。

怎样升级到ie8.0以上的版本

怎样升级到ie8.0以上的版本

ie浏览器 作为一款电脑自带的 浏览器 ,相信很多小伙伴对它都非常的熟悉,并且我们平时在学习或工作时也都会用到它。而有的时候我们在使用ie8浏览器查看网页时,由于一些原因,导致网页打不开,同时网页还会提示我们需要ie8等更高版本的浏览器才行。

电脑谷歌浏览器好不好用

电脑谷歌浏览器好不好用

说到电脑浏览器,很多小伙伴最开始接触的应该就是IE和谷歌浏览器吧,IE浏览器不用多说,已经快要停止服务退出历史舞台了。而Chrome谷歌浏览器,现在在全球上还是有非常多的使用者,尽管在国内使用谷歌浏览器有一定的限制,但还是有不少的朋友会下载安装它。

如何禁用谷歌浏览器的自动更新功能

如何禁用谷歌浏览器的自动更新功能

浏览器一般都会有定期更新,有小伙伴不太清楚谷歌浏览器的更新功能如何关闭,今天为大家带来了禁用谷歌浏览器的自动更新功能图文教程。

360浏览器超级拖拽怎么操作

360浏览器超级拖拽怎么操作

所谓360浏览器的超级拖拽,就是我们通过拖拽-撒放页面链接,实现快速在新标签页中打开链接的操作,具体操作方式是我们点击拖拽要打开的链接,拽出来后撒手即可在新标签页中打开该链接,这可以让我们的操作更加方便。

谷歌浏览器如何修改个人头像

谷歌浏览器如何修改个人头像

谷歌浏览器如何修改个人头像?接下来小编就给大家带来谷歌浏览器更换个人头像方法步骤,感兴趣的朋友千万不要错过了。

如何检测和停止使用这么多 CPU 的 Chrome?

如何检测和停止使用这么多 CPU 的 Chrome?

不幸的是,发现恶意或设计不佳的 Chrome 扩展程序已成为一种常见做法,这些扩展程序会导致浏览器占用计算机上过多的 CPU 和其他资源。由于 Chrome 和 Windows 变慢或崩溃,可能会出现此问题。

谷歌浏览器安全连接功能在哪里

谷歌浏览器安全连接功能在哪里

本篇文章给大家介绍谷歌浏览器开启安全连接功能详细方法步骤,有需要的朋友千万不要错过了。

如何阻止谷歌跟踪你的搜索?

如何阻止谷歌跟踪你的搜索?

谷歌记录了你所有的搜索历史,简单明了。如果您想使用公司的任何服务,例如油管(国外视频网站)、Gmail和谷歌地图,并对这些服务进行个性化设置,您必须使用谷歌帐户登录。出于对隐私的持续关注,你应该知道谷歌跟踪你的信息种类,它如何使用这些信息,以及你可以做些什么来更好地保护你的谷歌搜索。

谷歌浏览器怎么导入书签?谷歌浏览器书签导入方法

谷歌浏览器怎么导入书签?谷歌浏览器书签导入方法

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

如何自定义 Chrome 启动页

如何自定义 Chrome 启动页

如何自定义 Chrome 启动页?Chrome 是谷歌流行的浏览器,具有许多一流的功能。这些功能通常隐藏在 Chrome 浏览器中,在您打开它们之前不会显示。

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

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

谷歌开发者工具的功能特别多特别齐全,小编也不敢说全部都能运用自如,接下来小编就带你认识一下谷歌浏览器的开发者工具吧!