chrome介绍与用法

1. 认识devTools

快捷键F12( 或在 Mac 上使用 Cmd + Opt+ I)打开Chrome的DevTools，我们就会看到如下界面：

1. 选择工具：用来选择页面html元素，通过HTML元素定位到Elements中的对应代码，包括它的HTML标签与对应的属性，还有对应的样式与原型；如下图展示

2. 电脑模式和移动设备模式切换
3. Elements 是元素面板，可以修改dom元素和样式效果等属性，并且可以立即看到修改后的效果
4. Console 是控制面板，主要是用来打印输出内容，获取报错信息，页面调试内容（仅用于对在window对象中存在的对象或者变量，函数才可以使用）
5. Sources 资源面板，可以在这个面板里面调试你的JS代码，也可以在工作区打开本地文件。
6. Network 网络面板，可以明确的查看到访问Web页面所产生的全部请求（包括应答状态、响应时间、数据量等信息）和下载的资源文件，并可以模拟不同的网络状态（在线、离线、3G等）下对Web的加载情况，可以用于分析和优化网页加载性能。
7. **Performance ** 性能面板，记录和查看Web页面在浏览器中运行时的性能表现（注意是运行时，而不是加载时），主要用于发现Web页面运行时性能瓶颈和性能调优
8. Memory 内存面板，记录执行JS函数对CPU和内存的使用情况，可以识别开销大的JS函数，跟踪内存泄露，帮助代码优化，提高JS执行性能。
9. Application：应用面板，记录Web页面加载的所有资源信息，包括存储数据、缓存数据、图片、字体、JS脚本、CSS样式表等。
10. Security：安全面板，查看Web页面的安全和认证情况，确保网站上正确地实现了HTTPS。
11. Audits 审计面板，从性能（Performance）、PWA兼容性（Progressive Web App）、可访问性（Accessibility）、最佳实践（Best Practices）、搜索引擎优化（SEO）这五个维度给你的网站打分，并给出一份评估报告和优化建议，可以说是非常的强！
12. Adblock Plus 是一款能够智能屏蔽chrome浏览器中广告的插件(可以忽略)

Elements 面板

双击DOM树视图里面的节点，可以实时编辑标签属性，修改的效果会立刻反应在浏览器里面,点击右侧Style面板，可以实时修改CSS的属性值，这里面的所有样式Name和Value都是可以编辑的;在每个属性后面单击可以添加新的样式,如下图展示：

点击右侧Computed面板，可以编辑左侧选中的盒子模型参数，所有的值都是可以修改的;点击不同的位置(top、bottom、left、right) 就可以修改元素的padding、border、margin属性值。盒子模型下面可以查看元素的详细的css样式属性，也可以通过filter筛选自己需要查看的样式属性，如下图：

获取选择元素的对应绑定事件的执行为之和触发的事件情况
断点审查情况
对应选中的元素调用到JS底层的对象情况

console控制面板

输出信息命令
　console.log(‘消息内容！’); //输出普通信息
　　console.info(‘消息内容！’); //输出提示信息
　　console.error(‘消息内容！’);//输出错误信息
　　console.warn(‘消息内容！’); //输出警告信息
　　如下图效果：
　　
表格形式输出数组和对象console.table()

var obj = {fun: {name: 'lanfeng',age: '18'},bar: {name: 'qiuqiu',age: '19'}};var arr = [['lanfeng2', '18'],['qiuqiu2', '19']];console.log(obj);console.table(obj);console.log(arr);console.table(arr);

运行效果如下图：

3. console.time(),console.timeEnd() 统计代码运行时间，用于计算两端代码段运行的时间，主要是在用于性能计算方面的, 运行效果如下图：

4. console.count() 统计代码执行的次数

5. console.group(), console.groupEnd()分组输出信息

6. console.dir(),将对象以树状结构展示出来，可以显示一个对象所有的属性和方法。

7. 占位符 console对象的上面5种方法，都可以使用printf风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种

8. console.clear() 清空控制台
9. console.profile()，性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在

Sources 资源面板

查看web站点的资源列表及javascript代码调试

Page：展示当前Web页面所包含的资源文件（图片、CSS样式表、JS脚本等）。在这里对工作区中的代码进行修改并不会保留，刷新页面就会重置。
Filesystem：当我们的Web页面在本地时，我们就可以通过Filesystem选项卡，将本地项目文件夹添加到DevTools的工作区，以直接将对页面的修改保存到本地，还提供对本地文件进行管理（添加文件、删除文件、修改文件等）。所以也就可以让我们一边调试，一边修改源代码，而无需在本地和DevTools来回切换。
Overrides：当我们的Web页面在远程服务器上，本地没有项目源码，我们也可以通过Overrides选项卡选定目录让DevTools创建一个文件夹来保存对远程Web页面的所有修改。修改完成后，用这些文件直接去覆盖远程服务器上的源文件就完成了页面的修改。
Content script：用于存放的是Chrome扩展的“注入”页面的JS脚本的独立空间（这里的JS脚本共享页面DOM与消息机制，与页面的JS脚本互相不知道对方的存在，无法访问对方的变量和函数）。
Snippets：提供了在chrome里保存及运行一段js代码的功能，可以在这里创建代码自己的片段，并独立运行和调试，刷新页面不会丢失。