1.前言Chrome是Web开发者非常熟悉的浏览器，无论是从事前端、后端还是测试！简单、快速、强大，使其受到众多开发者的青睐！在浏览器排行榜中，chrome的使用率最高，占据了一半的浏览器份额。可见其受欢迎程度。作为一名前端开发者，我也很注重chrome的使用技巧。今天就分享给大家，希望对大家有所帮助。如果大家有什么有用的技巧，欢迎在评论中补充，让大家互相交流，共同进步！1、今天关于chrome的攻略，我也是抱着学习的态度写的，不完整，希望大家关注理解！想要对chrome有更深入的了解，还是得自学啊！2.如果今天有什么错误或者写得不好的地方，或者有什么建议，希望也欢迎大家评论推荐。让我们互相交流，互相学习，互相提高！3.给大家提一个东西，chromeDebug优化。一般来说，在日常开发中，经常使用的开发者工具面板有：element、console、sources、network、performance（timeline）。这五个，我看就是灵丹五兄弟！除了这五个，其他的面板可能用的不多，但是一定要熟悉和知道。2.Element大家一定经常用到，尤其是裁图调整样式的时候，我就按照图上的编号简单说一下吧！一：就是页面上的元素，把鼠标放在上面，页面上就会出现（2）的变化，方便找元素！三：点击这个箭头，就可以快速选择页面中的元素了！四：浏览进入手机端适配模式，如下图。您可以更改各种模型，或单击“编辑”添加其他模型或自定义模型！旁边的‘在线’是模拟网络的各种情况，‘在线’旁边的图标是横竖屏切换！这里简单提一下，大家可以根据需要使用！在线五：选中元素的所有相关样式，页面的样式可以在这里随意修改！六：选中元素的所有计算样式（部分样式会被重复覆盖，这里显示被覆盖的样式）和盒子模型！七：被选中元素的事件（好像你只需要知道这个，至少我没用过）其他常用功能1.拾色器2.改变颜色显示方式3.元素状态筛选注意招商银行页面4.html布局调试注意页面中的“唯品会”。当然，如果你想改变html元素，你可以在这里改变！这一步一般在调试样式的时候用到！5、css3动画曲线调试如图。如果不改变曲线，上面的紫色小球会按照曲线移动，为开发者提供动画参考，下面也会生成相关曲线的代码。这也是制作漂亮的css3动画的重要一步！3.consoleconsole界面在平时的开发中用的比较多。在调试JS代码的时候，经常需要在控制台输出变量或者节点。个人使用，除了在控制面板里写jS，用的最多的就是上图所指的按钮，一键清空面板。这感觉比console.clear()更快。先简单说一下我平时使用控制台的情况。console.log应该是控制台使用最多的功能了。很多时候console.log输出变量，这个方法比alert有用，显示的信息更全面。例如输出一个对象和节点alert({1:1});console.log({1:1})alert(document.getElementById("attribute-box"));console.log(document.getElementById("attribute-box")box"))alertconsole很多人可能会认为console.log只接受一个参数，其实不然。比如相信很多人都知道console.log用于带样式的输出。但是console.info、console.warn、console.error，这三个大家不是很常用，下面简单演示一下！console.log('这是一条普通消息！');console.info('这??是一条普通消息！');console.warn('这是一条警告消息！');console.error('这是一个errormessage!');PS:这个版本有点奇怪，之前console.infoAPI前面有个蓝色标志，我现在用的这个版本和console.logconsole.time和console.timeEndconsole性能完全一样.time和console.timeEnd是第二常用的API，主要用于测试，一段代码的执行时间console.time();for(leti=0;i<10000;i++){}console.timeEnd();console.tableconsole通常使用.table主要是为了更直观的显示对象或数组letarr=[{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)letarr1=[1,2,3,4,5]console.table(arr1)letobj2={a:1,b:2,c:3}console.table(obj2)控制台。countconsole.count用法有点抽象，不知道怎么说，看图吧！读一读就明白了！就是在调试代码的时候判断一个函数的执行次数。使用场景不多！console.assertconsole.assert接收两个参数，第一个参数为判断条件，第二个参数为提示信息，当条件为假时，会提示错误信息！console.group和console.groupEndconsole.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，这样调试更方便！关于$的API，我知道一个很少，但是我用过的就是下面这两个，其他的我了解的不多，有需要的可以去网上搜索资料！$：返回第一个满足条件的元素，也就是相当于document.querySelector$$：返回所有满足条件的元素，相当于document.querySelectorAll查找监听事件getEventListeners是查找并获取被选中元素的事件，用法如下monitorEvents用于监控与您选择的元素关联的所有事件，并在事件触发时在控制台上打印它们。getEventListeners和monitorEvents在开发中好像用的不多，至少我没用过。但是，如果您觉得它有用，请提出来！4.network网络就是每当有请求发出时，都会记录在这里，不管是请求文件还是ajax请求。使用场景也很多，下面是面板，看了就知道怎么用了，通俗易懂！点击一个请求，右边会显示请求的资源等各种信息，如下图！首先是关于request的一些信息，主要需要注意的有以下几点！然后将请求返回的信息以JSON的形式返回。cookie和timeing也是请求的信息，不过我平时不太关注，这里就不多说了！关于计时，可以参考这篇文章：chrome浏览器中的计时详解5.Sources1。断点调试这一步是打开文件，点击任意行号，就会出现断点！2.调试器调试大家可能看到上面红框里的按钮，我按照编号简单说明一下：1.停止当前断点调试2.继续执行下一行代码，(1.这个方法会不进入函数,2.该方法的快捷键为f10)3.跳入函数(该方法的快捷键为f11)4.跳出当前函数5.禁用所有断点并停止任何调试6.程序运行时是否遇到异常中断调试3.调试时查看值，不要乱说。看图片。至于侧面，我平时不怎么注意。需要上网找资料的，这里就不说了！3、说白了，搜索和切换文件的功能就是使用ctrl+p和enter快捷键。4.格式化代码无非是点击一下。6.性能（时间轴）面板在前期可能用得不多。但是在后期优化中会经常用到，而且这个面板的功能比较多，大家多多注意吧！首先说明一下，四个区域1.控制面板（Controls）具有开始和停止录音的功能，以及配置录音内容的功能。模拟网络模式、手机内核等功能！这没什么，面板大家看的一清二楚！2.概述（Overview）页面性能（行为）的概述。汇总区由以下三个图形记录组成：1.FPS绿色柱越高，FPS值越高，用户看得越流畅，体验越好。如果太小，用户会感到卡住。2.CPU面积图（areachart）显示了什么样的事件正在消耗CPU资源。3.NET页面在某一时刻的表现形式（在某一时刻显示为图片）！将鼠标移动到FPS、CPU或NET区域的任意位置，将显示该时间节点的截图。左右移动鼠标重新发送当时的录屏，以此来分析每个动画的细节，或者页面加载的速度！3.FlameChart面板，网上的说法是：可视化CPU堆栈（stack）信息记录。我从来没有接触过这一带，现在还处于迷雾之中。资料和教程可自行上网查找。个人觉得一般用不到，所以暂时没有关注这个！4.详细信息（Detail）该面板显示当前选中时间段的更详细信息！选择特定事件后，此面板会显示有关该事件的更多详细信息。蓝色（Loading）：网络请求和HTML解析黄色（Scripting）：JavaScript编译和执行紫色（Rendering）：样式解析、计算、渲染。Green(Painting):重排，重绘Gray(other):其他资源花费加载时间White(Idle):空闲等待时间这个图是最直观的招募瓶颈的方法之一！比如上图，大家可以看到Scripting占用了大部分时间，也就是在执行js，可能需要优化一下！7、在平时的应用开发中，这个面板用到的概率不是很高，但是一定要知道！1.cookie2.localstorage和localsession3.cache4.IndexedDB5.FramesFrames按frame类别组织显示页面资源。最顶层的top是一个主文档，top下面是主文档的Fonts、Images、Scripts、Stylesheets等资源。最后一个是主文件本身。个人觉得知道这个就够了，很少用到。8、插件推荐关于chorem的插件或者扩展，我只用了几个。下面是一个简单的推荐，大家可以根据需要使用。如果您不满意，可以在GoogleAppStore中找到它。HostAdmin管理主机JSONEditorjson格式化工具二维码生成器的一个工具，是将当前页面的url转成二维码。使用场景是当你想用手机测试的时候，懒得在手机上输入整个网址，直接扫码就可以在手机上访问了！如下图使用vue-devtools，可以看到如下扩展。使用vue开发的一个魔法，调试会变得很方便！（请勿使用此插件长时间停留在该面板，页面可能会崩溃）WEB前端助手（FeHelper）Performance-Analyser网页性能分析工具。这个有用，不过我用的比较少，可能现在的项目没那么严格吧，要专业！尴尬的。..图片太大，太多了，就放这两个吧！大家觉得好用就下载吧。英文分词翻译是很多程序员的硬伤，而分词翻译对大家的帮助非常大！掘金Chrome插件就有这个插件，掘金会根据自己的设置每天推送文章和项目！（发布前几天，本插件已经改版，和图片会有所不同，所以图片就不剪了，大家注意就好）9.参考链接Essay分类-Chrome开发者工具系列newChromeDevtoolPerformance使用指南前端chrome浏览器调试总结你不知道的控制台chrome使用技巧（看完不会失望）10.总结，关于chrome的不完整指南就到此为止。上面提到的内容可能只是chrome功能的20-40%，但是日常开发中的使用可能就占了80%。而有的时候，开发效率不仅仅是编辑器使用的熟练，代码的熟练，浏览器的流畅使用也是提高效率不可或缺的一部分！熟练使用chrome和写代码是一样的。你必须多练习才能熟悉它。熟能生巧！最后，如果大家觉得我写错了或者写的不好，有没有其他的建议，推荐工具！非常欢迎大家补充。希望大家多多交流，取长补短，共同进步！--------------------------华丽的分割线-------------------------想了解更多，关注我微信公众号：手厚书阁
