1.前言
1.今天关于 2.element这个想必大家会经常用到，特别是切图调整样式的时候，这个我就按照图上的编号简单说一下！
其它常用功能1.颜色取色器 2.改变颜色显示方式 3.元素状态筛选 注意看页面的'招商银行’ 4.html布局调试 注意看页面的'唯品会’ 当然，如果大家想改变html的元素，在这里也可以随便改!这个步骤一般是在调试样式的时候会用到！ 5.css3动画曲线调试 如图所示，没改变曲线一下，上面紫色的球，就会根据曲线进行运动，给开发者提供一个动画的参考，下面也会生成相关曲线的代码。这个也是做出优美的css3动画的重要一步！ 3.consoleconsole这个界面，平常开发用得非常多，调试JS代码的时候，经常需要在console输出变量或者节点。个人使用上，除了在控制面板内写jS外，用得最多的就是上图，指向的那个按钮，点击一下就清空面板。这个感觉比 console.log这个应该就是console使用最多的功能。很多情况都是 alert({1:1});
console.log({1:1})
alert(document.getElementById("attribute-box"));
console.log(document.getElementById("attribute-box"))alert
console
可能很多人会以为
相信很多人都知道用 console.log('这是普通信息！');
console.info('这是普通信息！');
console.warn('这是警告信息！');
console.error('这是错误信息！');
PS：这个版本有点奇怪，之前 console.time和console.timeEnd
console.time();
for(let i=0;i<10000;i++){
}
console.timeEnd();
console.table
let arr=[
{a:1,b:2,c:3},
{a:1,b:4,c:3},
{a:3,b:2,c:3},
{a:4,b:2,c:3},
{a:1,b:5,c:3},
{a:1,b:9,c:3},
{a:1,b:2,c:7}
];
console.table(arr)
let arr1=[1,2,3,4,5] console.table(arr1)
let obj2={a:1,b:2,c:3}
console.table(obj2)
console.count
console.assert
console.group和console.groupEnd
console.group("1");
console.log("1模块的信息 11111111...");
console.log("1模块的信息 11111111...");
console.log("1模块的信息 11111111...");
console.groupEnd();
console.group("2");
console.log("2模块的信息 22222222...");
console.log("2模块的信息 22222222...");
console.groupEnd();
'$’关键字看到$，大家不要以为是jquery，其实是浏览器自带的一些api。这个在调试上就比较方便！ $:返回第一个符合条件的元素，相当于document.querySelector
$$:返回所有符合条件的元素，相当于document.querySelectorAll
查找和监控事件
4.network
点击一个请求，在右边显示请求的资源等各种信息，就是看到下图的情形! 首先是请求的一些信息，需要关注的主要是下面这些！
然后请求返回的信息
以JSON形式返回
cookie和timeing也是请求的信息，但是我平常没怎么关注，在这里就不多说了！关于timing，大家可以参考这篇文章：chrome浏览器中的Timing详情说明 5.Sources1.断点调试这一步就是打开文件，在任意一行的行号，点击就会出现一个断点！
2.debugger调试
大家可能看到，上图红框的按钮，我按照编号简单说下： 3.调试中查看值不说话，看图
至于旁边这些，我平常没关注过，需要的自行上网找资料，我在这里不展开讲了！
3.查找和切换文件这个功能说白了就是一个ctrl+p和enter快捷键的使用
4.格式化代码这个就更没什么了，就是点击一下
6.performance(timeline)这个面板前期可能用得不多，但是后期优化的时候，会经常使用，这个面板的功能也是很多，大家都多花点心思了！
首先解释下，四个区域 一.控制面板（Controls）拥有开启、停止记录，配置记录内容。模拟网络模式，手机核数等功能！这个没什么，大家看下面板就是清楚了！ 二.概括（Overview）对页面表现（行为）的一个概述。 1.FPS 2.CPU 3.NET 三.Flame Chart这个面板，网上的说法是:可视化 CPU 堆栈(stack)信息记录。这个区域我没接触过，现在也是云里雾里，大家可以自行上网找资料，教程。我个人感觉一般也用不上，所以暂时没有关注这一块！ 四.详细信息（Detail）该面板展示当前所选时间段的更多详细信息！当有具体事件被选择时，该面板展示这个事件的更多详细信息。
蓝色(Loading)：网络请求和HTML解析 这个图是招瓶颈直观的方式之一！比如上图，看到Scripting占了大部分时间，就是在执行js上，或许有待优化！ 7.application在平常开发上，这个面板感觉用到的几率不是很大，但是必须要知道！ 1.cookie
2.localstorage和localsession
3.缓存
4.IndexedDB
5.FramesFrames 将页面上的资源按frame类别进行组织显示。顶级的top是一个主文档，在top下面是主文档的Fonts、Images、Scripts、Stylesheets等资源。最后一个就是主文件自身。 这个我个人觉得知道下就可以了，基本很少用到。
8.插件推荐关于chorem的插件或者扩展程序，我用的也就几个，下面简单推荐下，按需使用，如果不满足，可以到谷歌应用商店找。 HostAdmin管理host的一个工具
JSON Editorjson格式化的工具
QR码发生器
就是把当前页面的url转成二维码，使用场景就是当要使用手机测试的时候，懒得在手机上输入整个网址，直接扫码就可在手机访问！如下图
vue-devtools
有了这个就能看到下面的扩展，使用vue开发的一个神奇，调试会变得很方便！（用这个插件切勿长时间停留在这个面板，有可能页面会奔溃）
WEB前端助手(FeHelper)
Performance-Analyser网页性能分析工具。这个有用，但是我用的比较少，可能目前的项目没有那么严格，专业吧！尴尬中。。。
图片太大，也有点多，我就放这两张了！大家觉得有用，就下载就好 划词翻译英文这个是很多程序员的硬伤，划词翻译这个能很好帮到大家！
掘金 Chrome 插件有这个插件，掘金每天会根据自己的设置，推送的文章和项目！（发稿前的这几天，这个插件改版了，跟图上会有不一样，图就不截了，大家注意下就好）
9.参考链接随笔分类 - Chrome开发者工具系列 10.小结好了，关于chrome的不完全指南就说到这里了，上面所提及的内容，可能也就chrome的20-40%功能，但是在日常开发上的使用，可能占了80%。而且有时候，开发效率不但是编辑器使用的熟练，代码精通，浏览器使用的顺手也是提高效率不可或缺的一环！熟练使用chrome和写代码是一样的道理，都是要靠自己多练，才能熟悉使用，熟能生巧！ |
|
|
