做前端开发的朋友，大都喜欢Chrome浏览器，为什么呢，我想，其中一个原因，就是Chrome给开发者提供了强大的插件吧。JavaScript教程网给大家一起探讨Chrome的一些开发者的工具使用。Web开发者的最佳开发调试环境Chrome。
在Google Chrome浏览器出来之前，我一直使用FireFox，因为FireFox的插件非常丰富，更因为FireFox有强大的Firebug，对于前端开发可谓神器。

在Chrome出来的时候，我就喜欢上它的简洁、快速，无论是启动速度还是页面解析速度还是Javascript执行速度（现在的FireFox4也比之前的FireFox3有很大的进步）。不过当时由于Chrome的开发者工具还不是很完善，而我又不是很熟悉，加之对于Firebug的好感和依赖，当时还是用回FireFox作为我的主浏览器。

后来由于开发Chrome的插件(现在的FaWave)，就一直使用Google Chrom作为我的主浏览器，渐渐熟悉Chrome的开发者工具，而Chrome也一直在快速迭代，快速进步中，到现在，Chrome已经绝对成为我的主浏览器，Chrome的开发者工具，我也认为比Firebug更好用。

得益于Google V8的快速，和对HTML5和CSS3的支持也算比较完善，html类的富客户端应用Chrome上无论是流畅性还是呈现的效果，都是比较出色的，这对于开发者，特别是对于那些喜欢研究前沿技术的前端开发者来说，是很重要的。

对于本文，作为一个Web开发人员，除了上面的原因以外，与我们开发相关的，就是Chrome的开发者工具。而本文，就是要详细说说Chrome的开发者工具，说说我为什么认为它比Firebug要好用。

怎样打开Chrome的开发者工具？你可以直接在页面上点击右键，然后选择审查元素：

或者在Chrome的工具中找到：

或者，你直接记住这个快捷方式： Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台)，或者直接按 F12。

打开的开发者工具就长下面的样子：

不过我一般习惯与点左下角的那个按钮，将开发者工具弹出作为一个独立的窗口：

下面来分别说下每个Tab的作用。

Elements标签页这个就是查看、编辑页面上的元素，包括HTML和CSS：

左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性，或者你点右键选"Edit as  Html"直接对元素的HTML进行编辑，或者删除某个元素，所有的修改都会即时在页面上得到呈现。（ 注：看到上面右键菜单的最后一个选项"审查元素"了么？这是不是说明这个开发者工具的页面也是HTML来的呢？你点一下就知道了哦，嘿嘿）

你还可以对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处：

Elements标签页的右侧可以对元素的CSS进行查看与编辑修改：

你还可以通过这里看到各CSS选择器设置的CSS值的覆盖情况。

下面的Metrics可以看到元素占的空间情况（宽、高、Padding、Margin神马的）：

注意到上面的Properties没有？这个很有用哦，可以让你看到元素具有的方法与属性，比查API手册要方便得多哦（ 要注意某些方法和属性在IE、FireFox等其他浏览器下面的支持情况哦）。

Resources标签页

Resources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容，同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除。

这里的CSS文件有一个好玩的特性，你可以直接修改CSS文件，并且修改即时生效哦：

Network标签页

Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用，特别是在查看Ajax类请求的时候，非常有帮助。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的哦。

点击左侧某一个具体去请求URL，可以看到该请求的详细HTTP请求情况：

我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息，对于开发、调试，都是很有用的。

Scripts标签页很明显，这个标签页就是查看JS文件、调试JS代码的，直接看下图的说明：

还有你可以打开Javascript控制台，做一些其他的查看或者修改：

你甚至还可以为某一XHR请求或者某一事件设置断点：

Timeline标签页注意这个Timeline的标签页不是指网络请求的时间响应情况哦（这个在Network标签页里查看），这个Timeline指的JS执行时间、页面元素渲染时间：

点击底部的Record就可以开始录制页面上执行的内容。（这个不熟悉，请参考文末链接）

Profiles标签页这个主要是做性能优化的，包括查看CPU执行时间与内存占用：

这个也不熟悉，不多说，还是请参考文末链接吧。

Audits标签页这个对于优化前端页面、加速网页加载速度很有用哦（相当与Yslow）：

点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了：

它甚至可以分析出页面上样式表中有哪些CSS是没有被使用的哦：

Console标签页就是Javascript控制台了：

这个除了查看错误信息、打印调试信息（console.log()）、写一些测试脚本以外，还可以当作Javascript API查看用。

例如我想查看console都有哪些方法和属性，我可以直接在Console中输入"console"并执行：

怎么样，一目了然了吧 ？再例如我想查看日期函数都有哪些方法：

（ 注：注意在这里看到的某些方法和属性是ES5新增的，记得兼容其他浏览器的支持情况哦）

结语

Google Chrome除了简洁、快速，现在的Chrome的插件也非常的丰富了。而对于web开发者来说，Chrome对于HTML5、CSS3等一些新标准的支持也是比较完善的，而且Chrome的开发者工具我个人认为真的非常好用，这就是为什么我向web开发者推荐使用Chrome的原因。

注1：本文截图的Chrome版本为：13.0.782.215 m

注2：Chrome开发者工具更详细的说明请参考： JavaScript教程网

注3：本文原来想定的标题是：给那些因为Firebug而舍不得FireFox的朋友

Web开发者的最佳开发调试环境Chrome相关推荐

1. auto.js id为参数滑动_【Autojs教程】02Autojs PC端开发调试环境搭建

   [Autojs教程]02-Autojs PC端开发调试环境搭建 写在前面 本篇教程算是保姆级教程了,希望以此能吸引更多感兴趣的同学学习Autojs,也希望大家能因此碰撞出更多的奇思妙想 关注微信公众号 ...

2. PHP开发调试环境配置（基于wampserver+Eclipse for PHP Developers ）

   因为项目需求,需要开发PHP的项目,所以不得不花点时间开始学习PHP,过程非常要抓狂,还没有开始开发已经被一大堆复杂的环境搭建搞疯了 经过多方实验,决定将过程记录下来,也为了让很多跟我一样从零开始学习 ...

3. 用pycharm搭建odoo 12, 11,10 开发调试环境

   用pycharm搭建odoo 12, 11,10 开发调试环境 个人认为在windows平台下Pycharm 是最好的 odoo开发工具, 配置简单,操作简便,界面清爽,支持远程调试python,ja ...

4. T2080 U-BOOT与OS内核移植 准备篇（二）——开发调试环境入门（Trace32、QorIQ Linux SDK和QCVS）

   T2080 U-BOOT与OS内核移植 准备篇(二)--开发调试环境入门(Trace32.QorIQ Linux SDK和QCVS) 一.Trace32 1. 工具配置和软件安装 2. 使用PRACT ...

5. T2080 U-BOOT与OS内核移植 准备篇（一）——开发调试环境简介

   T2080 U-BOOT与OS内核移植 准备篇(一)--开发调试环境简介 1.本项目选择的工具 2.几个常用工具简介 2.1 Trace32 2.2 Code Warrior 2.3 QorIQ Li ...

6. 基于Kubernetes1.20.1版本开发调试环境搭建

   接下来的一段时间将要学习Kubernetes源码,为了更好的查看源码和调试程序,因此搭建了一个Kubernetes开发调试环境,该环境可以结合断点调试理解代码的运行过程. 准备虚拟机并安装必要软件 $ ...

7. vs安装 c语言编译环境,Visual Studio Code安装与C/C++开发调试环境搭建

   目录 简介 VSCode安装 VSCode语言设置 安装开发套件 构建C/C++编译环境 安装Clang 安装MinGW VSCode工程配置 launch.json tasks.json 测试 简介 ...

8. keil5(MDK5)配置S3C2440裸机开发调试环境

   源:keil5(MDK5)配置S3C2440裸机开发调试环境

9. vscode-armgcc-openocd搭建STM32开发调试环境

   环境配置 一. vscode插件安装 1. 打开vscode, 进入扩展搜索页面 2. 搜索安装: Embedded IDE, Cortex-Debug 二. arm-gcc, openocd安装 a ...

最新文章

1. exec 执行结果_php执行系统外部命令的4种方法
2. Android Studio(3)---键盘快捷键
3. 华为澳大利亚大动作，终止4.9亿投资；iPhone 12 或10月13日发布；Swift正式登陆Win 10 | 极客头条...
4. [转]C# JSON格式的字符串读取到类中
5. JS输出内容为[object Object]
6. 图片旋转_系统自带画图程序，图片旋转翻转调整大小修改转换格式图文教程
7. Git发生SSL certificate problem: certificate ha错误的解决方法
8. 计算机语言基础入门百度云,汇编计算机语言入门教程
9. matlab模拟静电场边值,静电场边值问题有限差分法的仿真分析
10. 11210怎么等于24_小学生24点题目大全附答案
11. word 尾注 脚注_如何在Microsoft Word中使用脚注和尾注
12. 百度大脑iOCR助力财务报销智能化，省时省力
13. 在职MBA与普研、MEM是有区别的
14. 什么是tv域名？.tv域名不能实名吗？
15. Hue 集成Hive
16. 自定义view实现涂鸦(画板)功能
17. Premiere导出视频音画不同步的解决方案
18. 计算机教育杂志有核心期刊吗,计算机教学论文参考文献集 计算机教学核心期刊参考文献哪里找...
19. 计算机毕业设计之java+ssm框架个人博客系统多用户
20. [数据结构]数据结构简介和顺序表

热门文章

1. html5中音频、视频标签、自定义播放器常用属性及方法、全屏操作、新增属性兼容问题
2. 浅谈HotSpot逃逸分析
3. 互联网日报 | 5月29日 星期六 | 京东物流正式登陆港交所；美团年度交易用户数5.7亿创新高；高途课堂回应裁员30%传闻...
4. 变量：2021数字科技前沿应用趋势
5. 读入10个数，显示互不相同的数的数目，并以输人的顺序输出
6. java程序课程总结_Java课程总结报告.pdf
7. 基于深度学习的异构时序事件患者数据表示学习框架
8. JAVA——多线程——实现n个共享数据的线程同步
9. 【Python】一种pyahocorasick库安装方法
10. 【Java】带你走进Debug的世界