前言
整理了一份chrome控制台面板的详细介绍
Element
查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
按Ctrl+Shift+J打开控制台面板，选中目标DOM可以查看或修改CSS属性，检查绑定的事件等。
我们先为button绑定点击事件，然后打开控制台选中对应DOM节点。可以在下方的Event Listeners栏中看到button所绑定的事件点击后跳转Sources面板查看对应代码所在位置。
...
<body>
<button id="btn">button</button>
</body>
<script>
let btn = document.getElementById("btn");
btn.onclick = function () {
alert('button被点击了');
}
</script>
Console
Console(控制台) 记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。
| 指令 | 描述 |
|---|---|
| console.log() | 打印内容的通用方法 |
| console.error() | 打印一条错误信息 |
| console.warn() | 打印一个警告信息 |
| console.info() | 打印资讯类说明信息 |
| console.time() | 启动一个以入参作为特定名称的计时器长 |
| console.timeEnd() | 结束特定的 计时器 并以豪秒打印其从开始到结束所用的时间。 |
仅罗列了一些常用的基础接口，详细请前往官网：MDN
...
<script>
console.log('log')
console.error('error')
console.warn('warn')
console.info('info')
console.time('计时器');
setTimeout(() => {
console.timeEnd('计时器');
}, 1000);
</script>
按Ctrl+Shift+J打开控制台面板。
我们可以看到括号中的内容已经被打印了出来。点击后方的Link，可以跳转到Sources面板对应源码输出语句的位置。
Network
从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括请求头、请求参数、响应头、响应数据、请求状态、资源类型、大小、所用时间等）。
Sources
Sources面板几乎是Chrome最重要的功能面板之一，debugger断点调试是解决问题的最佳法宝。
首先在代码中加入debugger，打开F12开发工具切换到Sources面板中点击button按钮如图所示:
let btn = document.getElementById("btn");
btn.onclick = function () {
debugger
alert('button被点击了')
}
Application
记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
Local Storage
只读的 localStorage 属性允许你访问一个 Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。 localStorage 类似 sessionStorage ，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。
新增
localStorage.setItem('id', '999');
读取
let id = localStorage.getItem('id');
console.log(id);// 999
移除
// 移除指定项
localStorage.removeItem('id');
// 移除所有
localStorage.clear();
Session Storage
sessionStorage 属性允许你访问一个，对应当前源的 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。API与Local Storage基本一致。
新增
sessionStorage.setItem('id', '999');
读取
let id = sessionStorage.getItem('id');
console.log(id);// 999
移除
// 移除指定项
sessionStorage.removeItem('id');
// 移除所有
sessionStorage.clear();
Cookies
客户端发送一个请求到服务器 --》 服务器发送一个HttpResponse响应到客户端，其中包含Set-Cookie的头部 --》 客户端保存cookie，之后向服务器发送请求时，HttpRequest请求中会包含一个Cookie的头部 --》服务器返回响应数据
读取、设置cookie
document.cookie = 'id=999'
console.log(document.cookie);// "id=999"
Performance
如果你需要Timeline所能提供的更多信息时，可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
Memory
可以查看当前网页的JavaScrit占用的内存情况。
Security
使用Chrome DevTools中的Security(安全)面板可以调试安全隐患，当前页面是否安全，HTTPS证书相关信息。
Lighthouse
用于分析网络应用和网页，收集现代性能指标并提供对开发人员最佳实践的意见。
