本篇文章关于Chrome Devtools，内容包括：
- Element
- Console
- Source
- Network
- Performance
这里是一些平时很少用，又很实用的用法。通过学习记录如下：
一、动态修改元素和样式。
二、console
console.log
console.warn
console.error
console.debug
console.info
console.table // 具像化的展示JSON 和 数组数据
console.dir // 通过类似文件树的方式展示对象的属性
console.time
左侧可以选择等级，对日志进行分类查看：
console.log('%s %o,%c%s', 'hello', {name: 'tom', age: 18}, 'font-size: 24px; color:red', 'welcome to')
// 占位符：
// 给日志添加样式，可以突出重要的信息
// %s：字符串占位符；%o：对象占位符；%c：样式占位符；%d：数字占位符。
打印出来的结果如下图：
三、Source Tab
1、Break Point 与 Watch
2、Scope 与 Call Stack
3、Source Map
压缩后的代码如何调试？
前端代码天生具有“开源”属性，处于安全考虑，上线之前
javascript代码通常会被压缩，压缩后的代码只有一行，变量使用‘a’、‘b’等替换，整体变得不可阅读。那么压缩后的代码如何调试呢？
mappings字段存储了源文件和Source Map的映射。英文：表示源码及压缩代码的位置关联。
逗号，分隔一行代码中的内容。
分号，代表换行。之所以没有显示分号是因为压缩后的代码就只有一行。映射见：
www.murzwin.com/base64vlq.h…Source Map标准： docs.google.com/document/d/…
思考：既然source map可以映射源码，那压缩后的代码带上source map上线不就又不安全了吗？
参考：
blog.csdn.net/m0_67392273…
drawPerAreaOrderRateChart(currentMonthHistogram) {
throw.error('error'); // 抛出错误
}
4、Network
5、Application
Application面板展示与本地存储相关的信息
Local Storage
Session Storage
IndexedDB
Web SQL
Cookie
点击左侧Application下的Storage面板中的Clear Site Data可以清除网页的本地存储数据。
6、Performance
performance运用示例：
googlechrome.github.io/devtools-sa…
7、Lighthouse
