带你认识谷歌浏览器的调试工具!<超详细介绍>
![谷歌浏览器电脑版](/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 大小:174.16MB 语言:简体中文 评分: 发布:2022-08-18 更新:2024-03-12 厂商:Google Inc.
![谷歌浏览器苹果版](/uploadfile/2024/0312/20240312045810556.png)
硬件:苹果系统 版本: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下载站!
![谷歌浏览器如何添加idm下载器](/uploadfile/2023/1129/20231129021625768.png)
谷歌浏览器如何添加idm下载器
谷歌浏览器如何添加idm下载器?今天小编带来谷歌浏览器使用idm下载器步骤一览,好奇如何操作的用户欢迎继续阅读下面的内容。
![谷歌浏览器打印控件如何安装](/uploadfile/2023/1215/20231215021526363.png)
谷歌浏览器打印控件如何安装
谷歌浏览器打印控件如何安装?遇到这个问题的用户可以参考下面分享的谷歌浏览器快速安装打印控件图文教程来解决这个问题。
![谷歌浏览器如何添加拼写检查单词](/uploadfile/2024/0507/20240507022814762.png)
谷歌浏览器如何添加拼写检查单词
谷歌浏览器如何添加拼写检查单词?接下来就让小编给大家带来谷歌浏览器启用拼写检查单词方法步骤,感兴趣的朋友千万不要错过了。
![火狐浏览器最新版v92.0.1软件介绍](/uploadfile/2022/0413/thumb_227_166_20220413033033989.jpg)
火狐浏览器最新版v92.0.1软件介绍
本网站提供正版火狐浏览器【firefox】最新版下载安装包,软件经过安全检测,无捆绑,无广告,操作简单方便。
![谷歌浏览器app怎么改成简体中文](/uploadfile/2024/0522/20240522024722773.png)
谷歌浏览器app怎么改成简体中文
谷歌浏览器app怎么改成简体中文?本篇文章就给大家带来手机版谷歌浏览器中文设置方法一览,还不知道如何将浏览器设置为中文版的朋友赶紧来看看吧。
![谷歌浏览器app如何设置字体大小](/uploadfile/2024/0517/20240517030909707.png)
谷歌浏览器app如何设置字体大小
谷歌浏览器app如何设置字体大小?接下来小编就给大家带来谷歌浏览器app调整字体大小技巧方法,有需要的朋友赶紧来看看吧。
![如何在ubuntu14.04安装chrome内核浏览器?](/uploadfile/2022/0620/20220620022826572.jpg)
如何在ubuntu14.04安装chrome内核浏览器?
Google Chrome,又称Google浏览器,是个由Google(谷歌)公司开发的网页浏览器,是一款不错的浏览器,速度很快。
![谷歌浏览器提示“无法安全下载”怎么办?<解决方法>](/uploadfile/2022/0610/20220610015950830.png)
谷歌浏览器提示“无法安全下载”怎么办?<解决方法>
当我们在使用google Chrome浏览网页时,经常会遇到一些故障。例如,当一些用户使用谷歌浏览器浏览网页下载文件时,经常会被提示“无法安全地下载”问题。
![win 8安装谷歌浏览器无法上网怎么办?<解决方法>](/uploadfile/2022/0624/20220624110550371.png)
win 8安装谷歌浏览器无法上网怎么办?<解决方法>
对于浏览器而言,相信大家都用过并相信谷歌浏览器 谷歌浏览器是全球都非常受欢迎的浏览器,用户通过使用该浏览器能够体验到极速流畅的浏览体验。
![谷歌浏览器Ubuntu版安装后出现白屏怎么办?](/uploadfile/2022/0406/thumb_227_166_20220406042033273.png)
谷歌浏览器Ubuntu版安装后出现白屏怎么办?
你遇到了谷歌浏览器安装之后白屏的问题吗,小编的朋友现身说法,为您解决问题,快来学习一下吧!
![谷歌浏览器安装时无法定位](/uploadfile/2022/0325/20220325020435167.jpg)
谷歌浏览器安装时无法定位
你有没有在使用谷歌浏览器的时候遇到各种问题呢,你知道谷歌浏览器安装时无法定位是怎么回事呢?来了解谷歌浏览器安装时无法定位的解决方法,大家可以学习一下。
![如何在 Android 版 Chrome 中管理下载?](/uploadfile/2022/0601/20220601115345178.jpg)
如何在 Android 版 Chrome 中管理下载?
当您在 Android 上查看 Chrome 浏览器时,您可能会注意到它几乎没有提供管理下载的选项,您可能从桌面版 Chrome 中知道的内部 URL chrome: downloads 不起作用。
![如何使用谷歌浏览器调试 CSS?](/uploadfile/2022/0516/20220516092757993.jpg)
如何使用谷歌浏览器调试 CSS?
您的浏览器包含一组功能强大的 Web 开发和设计工具。了解如何更改您正在查看的任何网页的样式。
![谷歌浏览器登录后没有响应_谷歌浏览器没有响应解决方案](/uploadfile/2022/0402/20220402110259120.png)
谷歌浏览器登录后没有响应_谷歌浏览器没有响应解决方案
你有没有在使用谷歌浏览器的时候遇到各种问题呢,你知道谷歌浏览器登录后没有响应是怎么回事呢?来了解谷歌浏览器登录后没有响应的解决方法,大家可以学习一下。
![谷歌浏览器无法上网的几种解决方法(详细步骤)](/uploadfile/2022/0407/thumb_227_166_20220407101403631.png)
谷歌浏览器无法上网的几种解决方法(详细步骤)
你的谷歌浏览器出现了无法上网又不清楚原因的问题吗?来看看小编给出的几种情况与方法,快来看看该怎么办吧!
![谷歌浏览器高亮分享网页内容方法介绍](/uploadfile/2022/0420/20220420101109887.png)
谷歌浏览器高亮分享网页内容方法介绍
Chrome浏览器90版本新增了一个新功能,用户可以直接复制网页的特定位置内容链接给他人,这样对方打开网址后就会直接跳转到网页的指定位置。那么该如何开启使用这个功能呢?相信还有许多小伙伴不太清楚,下面就跟小编一起来看看具体的操作步骤吧!
![如何自定义 Chrome 启动页](/uploadfile/2022/0531/20220531030302864.jpg)
如何自定义 Chrome 启动页
如何自定义 Chrome 启动页?Chrome 是谷歌流行的浏览器,具有许多一流的功能。这些功能通常隐藏在 Chrome 浏览器中,在您打开它们之前不会显示。
![谷歌浏览器怎么防关联-谷歌浏览器防关联的具体步骤分享](/uploadfile/2022/0402/thumb_227_166_20220402032249587.png)
谷歌浏览器怎么防关联-谷歌浏览器防关联的具体步骤分享
你有没有想要知道的谷歌浏览器使用技巧呢,你知道谷歌浏览器要怎么防关联吗?来了解谷歌浏览器防关联的具体步骤,大家可以学习一下。