谷歌浏览器开发者工具打开及功能介绍[多图]
时间：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开发者工具后发起的请求，才会在这里显示的哦。
谷歌浏览器是一款非常实用的主页浏览器。今天小编就给带来Google Chrome（谷歌浏览器）键盘快捷键大全，让你在可以简单操作步骤，由键盘就能轻松完成。
![谷歌浏览器插件管理安装设置教程[多图]](https://pic.wm300.com/uploads/allimg/220815/1_0Q514514O309.jpg)
谷歌浏览器插件管理安装设置教程,谷歌浏览器插件管理安装设置教程谷歌浏览器2014除了可以浏览网页之外，还应该是个“全能选手”。谷歌的Chrome浏览器，其最大的魅力就在于可以安装各种扩展插件，让Chrome浏览器自身的功能更加丰...
![谷歌浏览器有什么优点缺点[图]](https://pic.wm300.com/uploads/allimg/220815/1_0Q5145233S24.jpg)
谷歌浏览器有什么优点缺点,谷歌浏览器有什么优点缺点谷歌浏览器怎么样？谷歌浏览器有什么优点和缺点？谷歌浏览器的自身功能很少，需要安装大量的拓展及脚本才可以变得好用，而且强制安装在c盘，界面和ie浏览器差不多，不过值得一提的是丰富的拓展商店。先说优点...
![谷歌浏览器如何安装谷歌上网助手？具体要如何操作[多图]](https://pic.wm300.com/uploads/allimg/220815/1_0Q51445402042.jpg)
谷歌浏览器如何安装谷歌上网助手？具体要如何操作,谷歌浏览器是一款非常好用的浏览服务软件，但是用户有时候需要查询软件的使用情况，或者是的需要查询资料就会发现网络使用不是很流畅，那么这个时候要如何进行操作呢，今天小编就会为用户提供一个让网速加快的方法，让用户可以更好的查询...
![谷歌浏览器怎么打开隐身模式[多图]](https://pic.wm300.com/uploads/allimg/220815/1_0Q514591331F.jpg)
谷歌浏览器怎么打开隐身模式,谷歌浏览器是一款非常便捷的浏览服务软件，这款软件的功能使用非常的便捷，比如浏览器的隐身功能就非常的好用，那么这款软件要如何操作呢？今天小编就和大家一起来分享一下这款软件的使用方法，让用户可以更安心的浏览资讯，那么这款功能...
小编在安装、使用了一段时间的谷歌Chrome浏览器后发现，浏览器默认的字体实在是太小了，甚至影响到了正常的工作节奏。那么，谷歌浏览器该怎么修改字体呢？有类似困扰且不清楚操作方法的朋友，还不赶紧和小编一起来了解一下。
谷歌浏览器手机版中文是一款最强的浏览器能够让你快速轻松的去使用，超多的功能和超简洁的设计，可以让你更好的去进行使用，一直有需要的小伙伴快来下载试试吧。
谷歌浏览器49稳定版,谷歌浏览器49版本作为用户心中最稳定的版本，许多人就算换了电脑都不会更换浏览器版本，谷歌浏览器49稳定版拥有最便捷的操作流程，最清爽的操作界面，一定是您忘不了的经典。,您可以免费下载。
谷歌浏览器(Chrome 60版),谷歌浏览器Chrome60版是Chromev60版本的首个官方正式版本，作为一次大的重要版本更新谷歌浏览器60版本包含了40多项安全更新及修复，稳定性强且速度流畅，推荐大家使用。,您可以免费下载。
Chrome(谷歌浏览器)64位,Chrome浏览器64位发布了官方正式版，与32位一起，64位的Chrome也一起发布了。64位Chrome浏览器能更好地利用当今的硬件，并且对速度、安全性、稳定性进行了改善,您可以免费下载。
谷歌浏览器(Chrome 59版),谷歌浏览器59版是大家非常想要找的版本，为大家带来的是chrome正式版第四维护版，详细版本号为v59.0.3071.115，本次升级惯例更新了安全修复及稳定性改进，赶快下载使用吧！,您可以免费下载。
Chromium是谷歌浏览器的开发版本，喜欢尝鲜的用户可以试试，这个版本会率先展示chrome的最新功能和性能改进。Chromium的更新速度很快,每隔数小时即有新的开发版本发布，而且可以免安装,谷歌浏览器下载。
