一 为什么开发人员都喜欢用chrome，它相对于其他浏览器好在哪里？
开发者功能强大
页面简洁
插件丰富
运行流畅，采用webkit内核
良好的支持html5新特性
移动端调试
二 chrome浏览器开发者工具初识
1 如何打开开发者工具？
windows系统：F12
macos系统：command+option+i
如果快捷键冲突可以点击菜单选项打开开发者模式
2 打开开发者模式了，这些页签都是干嘛用的？
功能：
1&3 审查元素：查看页面文件结构及元素，样式动态修改。
2 移动端调试：模拟各型号手机屏幕分辨率
4 控制台：输出日志 运行代码
5 资源查看：静态资源目录结构
6 网络请求：监听网络请求全部信息，头部，数据等
7 性能分析：分析页面帧数，cpu，网络占用等性能情况
8 js内存快照
9 数据存储相关
10 安全
11 性能分析
三 详细功能介绍
1&3 审查元素 Elements
主要用途：
修改dom节点
修改样式
根据特征找代码位置
2 移动端调试：📱
主要用途：
根据不同手机尺寸，适配页面显示
使用window.navigator.userAgent区分安卓/ios做定制开发
只是浏览器尺寸不同，其他功能依然适用
4 控制台 Console
主要用途
查看js输出的日志信息包括：警告，信息，错误
let data = { a:1,
children:{
a:2,
children:{}
}
}
/* CONSOLE技巧 1 */
//逗号拼接
console.log('打印的data是：',data)
/* CONSOLE技巧 2 */
//彩色输出
console.log("%c"+JSON.stringify(data)+'\n'+"%c"+JSON.stringify(data)+'\n'+"%c"+JSON.stringify(data),"color: blue;","color:orange","color:green");
/* CONSOLE技巧 3 */
//console.assert
console.assert(false,'这个值是false')
console.assert(true,'这个值是true，不输出')
/* CONSOLE技巧 4 */
//测量时间
console.time("Array initialize");
var a = new Array();
// for(var i=0;i<10000;i++) a[i] = "element" + i;
for(var i=0;i<1000;i++){
for(var j=0;j<1000;j++){
}
}
console.timeEnd("Array initialize");
/* CONSOLE技巧 5 */
//利用getEventListeners查看页面元素绑定的时间
//getEventListeners(document.querySelector('#container'))
let el = document.querySelector('#container');
el.addEventListener('click',function(){
let b = 2;
})
/* CONSOLE技巧 6 */
//console.error
console.error('错误信息：','数据解析错误')
/* CONSOLE技巧 7 */
//console.warn
console.warn('警告信息:',"语法可能不兼容")
console页签除了能输出日志外，也能执行js代码，比如操作dom ，alert，查看变量等
5 资源查看 Source
常用用途：
查看当前地址下的静态资源
断点调试代码
事件断点，xhr请求断点。快速定位代码位置
step over next function call 和 step into next function call 的区别
⬆️ ⬆️
跳代码块，只声明，未调用 进入函数内部
6 网络请求 Network
点击其中一条具体请求出现下面界面
-
Name 资源名称，点击名称可以查看资源的详情情况，包括Headers、Preview、Response、Cookies、Timing。
-
Status HTTP状态码。
-
Type 请求的资源MIME类型。
-
Initiator 标记请求是由哪个对象或进程发起的（请求源）。
-
Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
-
Time 请求或下载的时间，从发起Request到获取到Response所用的总时间。
-
Timeline 显示所有网络请求的可视化瀑布流(时间状态轴)，点击时间轴，可以查看该请求的详细信息，点击列头则可以根据指定的字段可以排序
在这里我们可以看到网络请求的具体内容，响应的时间，返回值，请求的状态等信息，便于排查问题。
7 性能分析 Performance
8 js内存快照 Memory
9 数据存储相关
Applicaation：
Manifest 面板中的是指 PWA 所需的 manifest.json 文件，其作用是用来告诉浏览器如何在用户的桌面上"安装"这个 app，及安装后该展示的信息。主要是展示其信息，不具有操作性质，例如下面：
{
"name": "testApp",
"short_name": "tApp",
"display": "fullscreen",
"background_color": "#000",
"start_url": "/",
"description": "A test web app for manifest",
"icons": [
{
"src": "xxxx",
"type": "image/png",
"sizes": "192x192"
}
]
}
Service Workers 是独立于当前页面的一段运行在浏览器后台进程里的脚本，由于运行在 worker 上下文，因此它不能访问 DOM，不过可以做一些简单的辅助性逻辑处理和离线缓存等。
storage
该面板主要用于展示当前浏览器存储信息的一个总览清除各种缓存(可自行勾选所需清理的内容)，面板如下：
Storage 本地存储
localsStorage sessionStorage
IndexDB 是浏览器端提供的本地存储键值对的数据库，建立在事务数据库模型上(所做的操作都发生在创建的事务对象上下文)，其 api 大多都是异步的。
Cache Storage 可以认为是 sw 缓存的资源列表(至少现在暂时是这么认为的...因为当前没能写出也没找到合适的其他场景的例子)。兼容的话，同 Service Workers
Background Services 分 Background Fetch 和 Background Sync，前者用于生成在后台挂起的 fetch 资源任务，后者是生成在后台挂起执行的同步任务。兼容性的话...除了 Chrome 49+ 和 Edge 76+ 和 Opera 36+，其他都不行。
10 安全 Security
使用Security中的Overview(概述)立即查明当前页面是否安全。
点击view certificate查看https证书
Security面板识别两种类型的不安全网页。如果请求的页面通过HTTP提供，那么main origin被标记为不安全。
如果通过HTTPS检索所请求的页面，但该页面后续使用HTTP从其他源检索内容，那么该页面仍被标记为不安全。 这种页
面被称为混合内容页面。混合内容页面仅部分内容受保护，因为HTTP内容可以被嗅探器访问并且容易受到中间人攻击。
11 性能分析 lighthouse
生成页面性能报告，给出代码层面优化建议
附1 ：chrome如何修改没有源码的代码样式和js行为
普遍的做法：查看元素，修改压缩后的代码，反复上传到服务器，刷新页面确认。
更优的做法：利用chrome插件，user javascritp and css，写好之后插入到index.html里，统一上传。
举例：
打开user javascritp and css插件，输入以下内容
再打开百度发现页面被修改
修改的内容在线上生效，通过这种脚本插入的方式可以方便我们解决一些无法运行源码的实际情况。
