带你认识谷歌浏览器的调试工具!<超详细介绍>
你有没有想成为前端开发者的想法呢,那谷歌浏览器绝对是你的不二选择!先来和小编一起认识一下谷歌浏览器的调试工具吧!
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下载站!
硬件:Windows系统 版本:130.0.6723.59 大小:9.75MB 语言:简体中文 评分: 发布:2023-07-23 更新:2024-05-28 厂商:谷歌信息技术(中国)有限公司
硬件:安卓系统 版本:0.3.0.455 大小:187.89MB 语言:简体中文 评分: 发布:2022-08-18 更新:2024-10-11 厂商:Google Inc.
硬件:苹果系统 版本:122.0.6261.89 大小:200.4MB 语言:简体中文 评分: 发布:2022-01-23 更新:2024-03-12 厂商:Google LLC
跳转至官网
为什么谷歌浏览器打开是360导航
谷歌浏览器首页设置被篡改成360导航如何解决?下面为大家分享恢复谷歌浏览器首页设置的办法。
搜狗浏览器收藏时光机怎么用
如今,搜狗浏览器早已不是单纯的打开网页的软件,它还能通过各种高质量的功能协助用户更好的进行上网。今天小编就搜狗浏览器内有关收藏夹功能——收藏时光机,来为大家介绍一下吧。
搜狗浏览器为何显示安全指数低
当今时代的人们,在使用电脑网上冲浪时,不光追求快乐、刺激,还追求安全,因此大家会更多地选择360安全浏览器、猎豹浏览器、搜狗浏览器等安全性更高的浏览器。
如何查看google浏览器的版本信息
如何查看google浏览器的版本信息?接下来小编就给大家带来google浏览器查看版本信息具体方法,感兴趣的朋友千万不要错过了。
搜狗浏览器内存占用高咋办
有的用户反映在使用搜狗浏览器的时候,内存、CPU的占用过高,以至于电脑整体运行很慢。既然如此,对于搜狗浏览器内存占用高,我们该怎么办呢。
Chrome中的游戏性能优化设置在哪里
通过优化游戏性能,能够让玩家玩起来更加得心应手,如果你不知道Chrome中的游戏性能优化设置在哪里,那么一定要来阅读本篇文章。
win10系统下载谷歌浏览器打不开怎么办?
谷歌浏览器是一个非常强大的网页浏览器,很多用户都在使用。但是在使用的过程中,相信很多用户都会遇到win10系统中的Google浏览器无法上网的现象,那么该怎么解决呢?
如何下载谷歌浏览器离线包
如何下载谷歌浏览器离线包?Chrome是一款非常好用的浏览器。从最开始只是IT人员用,到现在全名流行。
电脑xp系统打不开谷歌浏览器怎么办?<解决方法>
谷歌浏览器是一款大家都很喜欢使用的网页浏览器,已经成为我们生活中不可或缺的软件。有时候,在xp系统中,我们会遇到打不开Google浏览器的故障。试了几次还是一样。不用太担心。这里有一个解决xp系统打不开Google浏览器的方法,有需要的小伙伴们一起来看看吧!
谷歌网络浏览器安装不了怎么办?
谷歌浏览器安装不了怎么办?虽然现在市面上的浏览器越来越多,但是还是有很多朋友更喜欢用谷歌Chrome。这个浏览器确实很好用,但是最近有很多朋友反映自己的电脑装不了谷歌Chrome。那么这个时候我们该怎么办呢?不清楚的朋友来们一起来看看如何操作吧!
如何在 Kali Linux 上安装 Google Chrome 浏览器?
在 Kali 上安装 Google Chrome 非常简单,但并不像你想象的那么简单。由于 Chrome 是一个封闭源代码的 Web 浏览器,因此无法从默认软件包存储库安装它。不用担心,您将通过几个简短的步骤了解如何安装它。
如何下载谷歌浏览器安卓正式版?<下载方法>
谷歌浏览器 Google Chrome完全免费,跨平台支持 Windows、Mac 和 Linux 桌面系统,同时也有 iOS、Android 的手机版 平板版,你几乎可以在任何智能设备上使用到它。
如何让 Google Chrome 阅读给我听
如何让 Google Chrome 阅读给我听?谷歌浏览器以扩展程序的形式提供了一个非常有效的解决方案。
如何找出谷歌首次索引网站的时间?
如果您曾经进行过研究并且需要知道 Google 何时首次将网站编入索引,那么答案并不总是显而易见的。
如何按日期获取 Google 搜索结果?
您现在可以通过多种方式自定义您的 Google 搜索。在日期内搜索对于某些特定类型的信息很重要。
如何修复 Chrome 浏览器中的错误 429?
通过 Chrome 浏览器使用不同的 Google 产品时,您可能会遇到错误 429。通常由于缓存堆积或有时互联网连接不良而出现此问题。
如何在Windows任务视图中查看Chrome浏览活动?
您可能是一个积极的浏览爱好者,希望在旅途中与您的内容保持联系。此外,您可能还想快速访问您不久前很容易看到的文章。遗憾的是,Windows任务视图默认只支持Microsoft Edge浏览器。但使用微软的网络活动扩展,你可以将谷歌浏览器的浏览活动与你的设备联系起来。
如何使用 Google Keep Chrome 扩展程序?
Google Keep 的 Chrome 扩展程序可以帮助您提高工作效率并做更好的笔记。以下是如何使用扩展程序。