浏览器网页开发调试工具入门（DevTools）

F12控制台简单的入门，一般开发常用的就这些了

浏览器网页开发调试工具常被称作控制台（本文统一简称控制台）是内嵌在 Chrome 浏览器里的一组用于网页制作和调试的工具。(以谷歌浏览器为例)

google官方文档

访问

按键盘的F12或右击->检查

工具窗口

控制台是一个多功能的集合，以谷歌浏览器为例细分为

• Elements：页面元素，DOM树结构，样式面板
• Console：这其实才是叫控制台面板，用于记录页面执行的信息（需要在代码中能过console语句）
• Sources：源码面板
• Network：在 Network 面板中可以查看通过网络来请求来的资源的详细信息以及请求这些资源的耗时
• Performance：页面加载的详细信息，通常用来分析网页的性能。
• Memory：主要显示页面 JS 对象和相关联的 DOM 节点的内存分布情况
• Application：记录网页加载的所有资源，包括存储信息、缓存信息以及页面用到的图片、字体、脚本、样式等信息
• Security：用于检测当面页面的安全性
• Audits：审计面板会对页面的加载进行分析，然后给出提高页面性能的建议。

开发常用面板的介绍

以下面板以百度首页为例

Element

左边为DOM树页面，其中进来会默认选中一个元素，右边为这个元素的所有样式。

其中：

1. 通过鼠标可以在DOM结构中选择你要选中的无素，或通过激活左上角的箭头来在页面中选择。
2. 样式栏从上至下由优先级高到低
3. 无论是DOM栏还是样式栏都可以实时编辑实时显示效果，但是不会改变源码。

console

这里显示js代码中打印的信息：常用类型有日志和错误的打印

还可以执行js语句

sources

就是显示页面用到了哪些文件

左边是文件导航，中间是文件内容，右为调试面板

针对js代码可以做断点调试，点击对应的行数就可以了

如果文件代码被压缩过，可以按下图的位置格式化

network

Chrome DevTools 的 Network 面板主要用于度量当前网页的网络性能状况，其记录了当前网页每个网络操作的信息，包括时间数据、HTTP 请求、返回数据等等。

如果只想看http请求，在1档处选择XHR即可

点击对应的name可以打开详细信息面板，如下是http请求的例子：

在headers栏可以看到请求地址、方式、参数、request headers、response headers

在preview可以看到格式化后的接口反回

application

本地存储

可以从 Local Storage 窗格中检查、修改和删除键值对(KVP)。

• 双击键或值可以修改相应的值。
• 双击空白单元格可以添加新 KVP。
• 点击 KVP ，然后按 Delete 按钮（x） 可以删除该 KVP。 只需点击一次按(clean)，即可从 Clear storage 窗格擦除所有本地存储数据。
• 如果您使用一种可以创建、删除或修改 KVP 的方式与页面交互，则不会看到这些更改实时更新。 点击 refresh 按钮 (refresh) 可以查看您的更改。

Local Storage、Cookies 与 Local Storage 大至相同