在阅读下面内容之前，那么些简单的了解浏览器开发者工具到底是什么东西，到底有什么用途。
来我们跟大牛学习下怎么使用开发者工具

浏览器开发者工具到底是什么？

其实简单的说，浏览器开发者工具就是给专业的web应用和网站开发人员使用的工具，当然只要你有兴趣想要了解，只要你对这个世界充满这好奇，什么东西你都可以了解。

开发者工具到底有什么用？

它的作用在于，帮助开发人员对网页进行布局，比如HTML+CSS，帮助前端工程师更好的调试脚本（JavaScript、jQuery）之类的，还可以使用工具查看网页加载过程，获取网页请求（这个过程也叫做抓包），抓包是非常有意思的过程，而每一个浏览器厂商生产出来的浏览器都会有自己的杀手锏，也就是功能上的差别，那么这个时候你就找一个最适合自己的浏览器使用就可以，接下来就是介绍我常用的三个浏览器。

如何打开开发者工具

可以直接在页面上点击右键，然后选择审查元素；
或者是打开Tools--Developer Tools；
或者是用快捷键 Option + I (Mac)/F12 (WIN)打开。
打开后我们看到的界面大概如下：

Google Chrome一共提供了8大组工具

1. Elements: 允许我们从浏览器的角度看页面，也就是说我们可以看到chrome渲染页面所需要的的HTML、CSS和DOM(Document Object Model)对象。此外，还可以编辑这些内容更改页面显示效果；

2. Network: 可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。此外，还可以查看HTTP的请求头，返回内容等；

3. Sources: 主要用来调试js；

4. Timeline: 提供了加载页面时花费时间的完整分析，所有事件，从下载资源到处理Javascript，计算CSS样式等花费的时间都展示在Timeline中；

5. Profiles: 分析web应用或者页面的执行时间以及内存使用情况；

6. Resources: 对本地缓存（IndexedDB、Web SQL、Cookie、应用程序缓存、Web Storage）中的数据进行确认及编辑；

7. Audits: 分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案；

8. Console: 显示各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互。

其它功能在这里我们就不详细说明了,如果有感觉兴趣的可以百度下

以上原文作者:selfboot
出处:http://selfboot.cn/2014/09/19/chrome_DevTools_1/

或者阅读这篇博文 神器——Chrome开发者工具

我们现在主要介绍下第2个工具 Network

Network最常用来查看当前网页的每个资源请求情况,也就是抓包常用的工具

现在我们举个使用例子,比如我们在安装程序的时候出现了即没任何提示,也没有进入下一步的时候,

我们就可以用 Network 这个工具来查看下程序到底出现了什么问题.

这样好让我们的程序员更好帮你排除问题

步骤

当提交后出现没有任何反应时,这时我们可以刷新网页,把刚才的操作步骤在试一遍,只不过在提交前要把开发者工具先打开切换到 network选项页
这时我们在点提交,就会看到当前网页的请求

然后我们选中当前请求网址,就会看到HTTP的请求头，返回内容等等内容

如果所示 我们就会看到当页面提交后为什么没有反应,提示了PHP的错误信息

然后请这个信息截图发给我们的开发人员,就可以了