谷歌浏览器开发者工具打开及功能介绍[多图]
时间：2022-08-15 15:03:27
谷歌浏览器开发者工具打开及功能介绍 谷歌浏览器开发者工具怎么打开?对于本文，作为一个Web开发人员，除了上面的原因以外，与我们开发相关的，就是Chrome的开发者工具。而本文，浏览器家园小编就是要详细说说Chrome的开发者工具，说说我为什么认为它比Firebug要好用。
怎样打开Chrome的开发者工具?
你可以直接在页面上点击右键，然后选择审查元素：
![谷歌浏览器开发者工具打开及功能介绍[多图]](https://pic.wm300.com/uploads/allimg/220815/15031S4L-0.jpg)
或者在Chrome的工具中找到：
![谷歌浏览器开发者工具打开及功能介绍[多图]](https://pic.wm300.com/uploads/allimg/220815/15031T048-1.jpg)
或者，你直接记住这个快捷方式： Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台)，或者直接按F12。
打开的开发者工具就长下面的样子：
![谷歌浏览器开发者工具打开及功能介绍[多图]](https://pic.wm300.com/uploads/allimg/220815/15031U223-2.jpg)
不过我一般习惯与点左下角的那个按钮，将开发者工具弹出作为一个独立的窗口：
![谷歌浏览器开发者工具打开及功能介绍[多图]](https://pic.wm300.com/uploads/allimg/220815/15031QN9-3.jpg)
下面来分别说下每个Tab的作用。
Elements标签页
这个就是查看、编辑页面上的元素，包括HTML和CSS：
![谷歌浏览器开发者工具打开及功能介绍[多图]](https://pic.wm300.com/uploads/allimg/220815/15031WD4-4.jpg)
左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性，或者你点右键选"Edit as Html"直接对元素的HTML进行编辑，或者删除某个元素，所有的修改都会即时在页面上得到呈现。(注：看到上面右键菜单的最后一个选项"审查元素"了么?这是不是说明这个开发者工具的页面也是HTML来的呢?你点一下就知道了哦，嘿嘿)
你还可以对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处：
![谷歌浏览器开发者工具打开及功能介绍[多图]](https://pic.wm300.com/uploads/allimg/220815/15031VZ5-5.jpg)
Elements标签页的右侧可以对元素的CSS进行查看与编辑修改：
![谷歌浏览器开发者工具打开及功能介绍[多图]](https://pic.wm300.com/uploads/allimg/220815/15031U227-6.jpg)
你还可以通过这里看到各CSS选择器设置的CSS值的覆盖情况。
下面的Metrics可以看到元素占的空间情况(宽、高、Padding、Margin神马的)：
![谷歌浏览器开发者工具打开及功能介绍[多图]](https://pic.wm300.com/uploads/allimg/220815/15031R012-7.jpg)
注意到上面的Properties没有?这个很有用哦，可以让你看到元素具有的方法与属性，比查API手册要方便得多哦(要注意某些方法和属性在IE、FireFox等其他浏览器下面的支持情况哦)。
Resources标签页
![谷歌浏览器开发者工具打开及功能介绍[多图]](https://pic.wm300.com/uploads/allimg/220815/15031W427-8.jpg)
Resources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容，同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除。
这里的CSS文件有一个好玩的特性，你可以直接修改CSS文件，并且修改即时生效哦：
![谷歌浏览器开发者工具打开及功能介绍[多图]](https://pic.wm300.com/uploads/allimg/220815/15031WO1-9.jpg)
Network标签页
![谷歌浏览器开发者工具打开及功能介绍[多图]](https://pic.wm300.com/uploads/allimg/220815/15031SL7-10.jpg)
Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用，特别是在查看Ajax类请求的时候，非常有帮助。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的哦。
每个浏览器的缓存位置在安装的时候就已经选定好，正因为这样人们往往不知道缓存位置在哪里，谷歌浏览器也是这样，那谷歌浏览器怎么看缓存呢？如果大家怕找不到可以自己更改缓存的位置，小编和大家分享下谷歌浏览器怎么查看缓存以及谷歌浏览器缓存位置更改教程,谷歌浏览器怎么查看缓存 谷歌浏览器缓存位置更改教程
![谷歌浏览器翻译失败host解决方法[图]](https://pic.wm300.com/uploads/allimg/220815/1_0Q515035b228.jpg)
谷歌浏览器翻译失败host解决方法,谷歌浏览器翻译失败host解决方法谷歌浏览器翻译不了怎么办？xxChrome谷歌浏览器翻译失败如何解决？想知道谷歌浏览器翻译失败怎么办?请看浏览器家园网站小编为大家带来的使用host解决方法，希望能帮助到大家。解决方法介...
谷歌浏览器是一款非常实用的主页浏览器。今天小编就给带来Google Chrome（谷歌浏览器）键盘快捷键大全，让你在可以简单操作步骤，由键盘就能轻松完成。
![谷歌浏览器安装不了插件吗[多图]](https://pic.wm300.com/uploads/allimg/220815/1_0Q51455363937.jpg)
谷歌浏览器安装不了插件吗,谷歌浏览器安装不了插件吗谷歌浏览器安装不了插件吗？今天将谷歌浏览器升级到了最新版本，在安装扩展脚本的时候，却发现Chrome21+系列增加了对扩展插件安装的限制,用户只能安装谷歌浏览器（ChromeStore）内的扩展插...
众所周知，广告是许多门户网站的主要收入来源之一，但广告内容的真实性辨识难度极高，一时大意便会中招。值得庆幸的是，许多浏览器产品都内置了广告拦截功能！下面小编就以谷歌浏览器为例，简单介绍一下广告拦截功能的开启方法。
近日有用户到本站咨询这样一个问题，就是在使用谷歌浏览器从网上下载文件之后，却不知道下载的文件在哪里找，想必很多小伙伴有碰到一样的疑虑吧，那么用谷歌浏览器下载的文件存在
手机谷歌浏览器安卓2022最新版 是一款手机上简约好用的实用浏览器app，采用了谷歌最先进的搜索引擎技术，带给你飞速的上网体验，而且搜索结果都不含各种乱七八糟的广告，给你想要的
谷歌浏览器（Google Chrome）是一款快速、安全且免费的网络浏览器，能很好地满足新型网站对浏览器的要求。谷歌浏览器的特点是界面简洁、快速、稳定、操作简单便捷，同时谷歌浏览器支持多标签浏览网页。
谷歌浏览器下载手机版是一款快速、易用且安全的网络浏览器，小巧的内存却配备了极快的加载速度为用户量身推荐用户所关注的新闻资讯。本站提供chrome浏览器下载。
Google Chrome 谷歌浏览器正式版 x64位 是一款一款适用于计算机、手机和平板电脑的浏览器。拥有更快的浏览速度，Chrome可将您在计算机上打开的标签页、保存的书签和最近搜索过的内容同步
为您提供谷歌浏览器(Google Chrome)（ dev） V90.0.4408.0安卓版,手机版下载,谷歌浏览器(Google Chrome)（ dev） V90.0.4408.0apk免费下载安装到手机.同时支持便捷的电脑端一键安装功能!
