浏览器开发者工具详解

这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外，还可以当作 Javascript API 查看用。例如我想查看 console 都有哪些方法和属性，我可以直接在 console 中输入"console"并执行

• [x] console.assert()

  判断第一个参数是否为真，false 的话抛出异常并且在控制台输出相应信息。

• [ ] console.clear()

  清空控制台。

• console.count()

  以参数为标识记录调用的次数，调用时在控制台打印标识以及调用次数。

• console.countReset()

  与 console.count()配合，清除调用次数。

• [x] console.error()

  打印一条错误信息，使用方法可以参考 string substitution。

• [x] console.group()

  打印树状结构，配合 groupCollapsed 以及 groupEnd 方法;

• console.groupCollapsed()

  创建一个新的内联 group。使用方法和 group 相同，不同的是 groupCollapsed 打印出来的内容默认是折叠的。

• [x] console.groupEnd()

  与 console.group()配合使用，结束当前 Tree

• console.info()

  打印以感叹号字符开始的信息，使用方法和 log 相同

• [x] console.log()

  打印字符串，可以使用 printf 风格的占位符。支持字符（%s）、整数（%d 或%i）、浮点数（%f）和对象（%o）四种。

  例如：console.log("%d 年%d 月%d 日",2011,3,26);

• console.profile()

  可以以第一个参数为标识，开始 javascript 执行过程的数据收集。和 chrome 控制台选项开 Profiles 比较类似，具体可参考 chrome profiles

• console.profileEnd()

  配合 profile 方法，作为数据收集的结束。（暂时未发现结果）

• [x] console.table()

  将数据打印成表格。console.table [en-US]

• [x] console.time()

  计时器，接受一个参数作为标识。

• [x] console.timeEnd()

  与 console.time()配合使用，接受一个参数作为标识，结束特定的计时器。

• console.trace()

  打印 stack trace.

• [x] console.warn()

  打印一个警告信息，使用方法可以参考 string substitution。

左侧有用筛选项，可分类显示

常用的方法

实际操作过程中发现 $()并没有按预期返回相匹配的第一个元素，而是返回了所有匹配的元素数组

Sources源码

主要用来查看源代码以及调试 js

断点可以在DOM元素节点发生改变时、XHR生命周期状态改变时、指定的事件执行时被触发

Network网络

从发起网页页面请求 Request 后分析 HTTP 请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。

此面板包括5块:

• 区域① --> Controls 控制Network的外观和功能。
• 区域② --> Filters 控制Requests Table具体显示哪些内容。
• 区域③ --> Overview 显示获取到资源的时间轴信息。
• 区域④ --> Requests Table 按资源获取的前后顺序显示所有获取到的资源信息，点击资源名可以查看该资源的详细信息。
• 区域⑤ --> Summary 显示总的请求数、数据传输量、加载时间信息。

区域① Controls信息如下

• 网络日志录制
• 日志清理
• 捕获屏幕
• 过滤器
• 视图切换
• 保留日志开关
• Cache开关
• 网络连接开关
• 网速阀值

区域④ Requests Table 信息如下

未列出部分，可在区域④的表头部分右击点出

• Name 资源名称，点击名称可以查看资源的详情情况，包括Headers、Preview、Response、Cookies、Timing。
• Method 请求的方法类型
• Status HTTP状态码。
• Remote Address 远程地址
• Type 请求的资源MIME类型。
• Initiator 标记请求是由哪个对象或进程发起的（请求源）。
  • 鼠标移入可显示详情
• Cookie 当前请求附带的cookie数量
• Priority 优先级
• Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from disk cache)
• Time 请求或下载的时间，从发起Request到获取到Response所用的总时间。
• Waterfull 显示所有网络请求的可视化瀑布流(时间状态轴)，点击时间轴，可以查看该请求的详细信息

区域⑤ Summary 信息如下

• DOMContentLoaded 从 开始到页面上DOM完全加载并解析完毕 所花费的时间（不会等待CSS、图片、子框架加载完成），在 Waterfull 以一条 浅蓝色的线 标注。
• Load 从 开始到页面上所有DOM、CSS、JS、图片完全加载完毕 所花费的时间，在 Waterfull 以一条 浅红色的线 标注。
• requests 成功的请求数量/总的请求数量
• transferred 所有资源的大小
• Finish 从页面开始到最后一次服务器交互完成，所花费的时间

查看具体资源的详情

通过点击某个资源的 Name可以查看该资源的详细信息，显示信息如下

• Headers 该资源的HTTP头信息。
• Preview 根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。
• Response 显示HTTP的Response信息。
• Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
• Timing 显示资源在整个请求生命周期过程中各部分花费的时间。

Performance性能

查看页面性能的，较为复杂~~~暂不讨论

Memory记忆

查看页面性能的，较为复杂~~~暂不讨论

Application应用

记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。

Security安全性

判断当前网页是否安全，通过该面板你可以去调试当前网页的安全和认证等问题并确保您已经在你的网站上正确地实现HTTPS。

HTTPS（Hyper Text Transfer Protocol over Secure Socket Layer），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。 它是一个URI scheme（抽象标识符体系），句法类同http:体系。用于安全的HTTP数据传输。https:URL表明它使用了HTTP，但HTTPS存在不同于HTTP的默认端口及一个加密/身份验证层（在HTTP与TCP之间）。