领略浏览器开发者工具

tools.gif

收听音频戳链接,微信公众号itclan已暂停使用,可移步新号itclanCoder,收听更多内容

前言

相信无论是对于身居一线的coder,还是退居多年的老司机managers来说,对于调试程序是不陌生的,对于web端的开发者来说呢,我们每天都会与浏览器进行打交道,并且在chrome,firefox,IE等主流浏览器进行大战,为了保持各个浏览器显示的一致,无论是选择优雅降级还是渐进增强,有时是必须得做兼容性处理的,甚至有的boss是要求开发者供着其中的三个祖宗(IE6,7,8)不放的,那么调试程序,查看代码执行状态等就很重要了,对于不同种类的程序代码跑在不同的平台上,调试手段方法也各有不一,我们今天呢,只关注web端,也就是前台代码(指的是html,css,js)跑在浏览器上,我们是可以在浏览器上对能看到的代码进行调试的,至于服务器端的代码就无能为力了,但是我们依然可以通过浏览器端反馈,分析结果,也是可以去后端更改有问题的代码的,熟练的使用浏览器开发者工具进行调试代码毫无凝问是自我进阶的必经之路,下面就我平时的学习,跟大家分享一下使用心得,一起来领略浏览器开发者工具的这一神兵利器

主流浏览器下各快捷键的使用

chrome浏览下快捷键

快捷键	操作
F12或ctrl+shift+I或ctrl + shift + J,	同时是打开开发者工具也是关闭开发者工具,按一下F12键为打开,在按一下F12为关闭,另外一组合同理
Ctrl++，或者按住 Ctrl 键并向上滚动鼠标滚轮	放大网页上的所有内容
Ctrl--,或者按住ctrl键并向下滚动鼠标	缩小网页上的所有内容
Ctrl + Shift + Delete	清除浏览器所有缓存
ctrl+o(是英文单词o不是数字零)	打开文件
F1	打开 Chrome 帮助中心,可查询帮助文档，如何使用快捷键等chrome的用法都能找到想要的答案
ctrl+N	打开新的窗口
ctrl+shift +n	在隐身模式下打开新窗口,在关闭隐身标签页后,这些标签页中查看的网页不会被浏览器历史记录,Cookie 存储区或搜索记录中留下任何痕迹
shift+Esc	查看任务管理器
ctrl+t	打开新的标签页,在当前浏览器下,并跳转到该标签页
ctrl+shift+t	重新打开最后关闭的标签页，并跳转到该标签页
``ctrl+w`或者ctrl+F4	关闭当前页
ctrl+shift+F4	关闭所有打开的标签页和浏览器
ctrl+tab或者ctrl+PgD	跳转到下一个打开的标签页
ctrl+shift+tab或者ctrl+pgUp	跳转到上一个打开的标签页
Ctrl + 1 到 Ctrl + 8,ctrl+9	跳转到特定的页,从左边第一个为第一个页面,ctrl+9为跳转到最后一个页面,中间有很多页面的话,直接会跳过
Alt + Home	在当前页打开主页(会覆盖当前的页面)
ctrl+shift+q	退出Google浏览器
F6 或 Ctrl+L 或 Alt+D	选中地止栏中网址区域中的内容
ctrl+B	打开书签管理器
ctrl+H	查看历史记录
ctrl+J	查看下载页
ctrl+p	打印当前页
ctrl+s	保存当前页
ctrl+d	收藏当前网页
Ctrl+F5 或 Shift+F5	重新加载当前页，但忽略缓存内容
按住 Alt 键，然后点击链接	下载链接
ctrl+F/ctrl+G/F3	打开查找栏搜索当前网页所匹配的关键字
Ctrl+Shift+G 或 Shift+F3	查找与你在”在网页上查找”框中输入的内容相匹配的上一个匹配项
Ctrl+U	查看源代码，但是这代码基本上没法看,压缩了的
Ctrl+0(不是字母o)	将网页上的所有内容都恢复到正常大小,也就是页面100%
F11	开启或者退出全屏模式
Ctrl + Shift + m	快速登陆chrome

windows下常用键

快捷键	操作
Alt+tab	在已经打开多个程序之间进行切换(有时候想从chrome浏览快速的切换到IE,firefox浏览器等其他应用程序上,就非常便捷了)
Windows 徽标+TAB	在任务栏按钮之间循环,按tab键可以实现已打开引用程序的切换,一宋键盘立马就进入该应用程序了的
CTRL+Windows 徽标+TAB	将焦点从“开始”菜单移动到“快速启动”工具栏或系统任务栏（使用上或右箭头键或左或下箭头键可将焦点移动到“快速启动”工具栏和系统任务栏中的项目,可以使用tab键进行快速的切换,与上面的区别就是,松手后,不会自动进入程序,按tab键可以实现不同应用程序的切换,若想进入,在按一下Enter键
Windows 键 + 字母键“T”	依次查看已经打开程序的预览图。使用这组快捷键，用户可以从左至右轻松预览已打开程序的缩略图(按住windows键不放+字母键T可快速的实现打开程序的窗口预览,若在按Etrl键则会进入)；同时，若使用 Windows键+Shift 键+“T”则可以从右至左反方向查看
ctrl+tab键	在当前网页标签页上进行切换
window+键盘键字母D,	最小化所有窗口，并快速查看桌面。这组快捷键能帮助使用者立即将当前桌面上所有窗口最小化,再次按下此快捷键时，刚刚最小化的窗口又会全部出现了
ALT+F4	退出程序
CTRL+F4	关闭当前多文档界面窗口
SHIFT+DELETE	永久删除项目
Windows 徽标+L	锁定计算机
Windows 徽标+M	全部最小化
SHIFT+Windows 徽标+M	撤消全部最小化
Windows 键 + 数字键	按顺序打开相应程序,与快速启动栏中的程序相对应，如果您能记住快速启动栏中程序的排列顺序，直接按下此组快捷键就能马上调用了
CTRL+ESC或Windows 徽标	打开“开始”菜单
Windows 徽标+R	“运行”对话框
CTRL+SHIFT+ESC或者ctrl+shift+delete	打开 Windows 任务管理器
Windows 键 + 字母键“G”	依次显示桌面小工具。如果你的桌面上有太多的小工具，查看起来就不太方便了；使用此组键能迅速让小工具依次显示在面前，想找哪一个都十分方便，上下左右箭头可以移动

你可以按F1键查看帮助文档,一样有mac的快捷键,我没有用过mac的电脑,所以土豪的朋友们可以自行测试，至于firefox与chrome浏览器一些快捷键常用的都差不多,如果不按上面的F1在帮助文档里查找或者懒于百度Goolge,也可以直接从开发者工具中查找:如下步骤操作
按键盘上的F12或者ctrl+shift+J键-->shortcuts即可查找使用众多的快截键

chrometools.gif

熟练很好的使用浏览器的一些快捷键并不是为了在别人面前炫技能,其实这也没有什么,只不过是习惯使用了这些快捷键,一定会减少很多的体力劳动,把更多时间和精力放在编码上,而且使用快捷键是明显效率高很多的,就像使用惯了linux下的命令行操作,就会觉得使用windows是变傻了似的,只是命令行下有些非正常人难以接受而已罢了,加大了我们的记忆负担,要记一些指令,对于快捷键,不用刻意的去记,多用用就熟悉了的,平时使用当中刻意的去练习就好了,键盘侠远比鼠标手快的多,尽量的少用鼠标,多用键盘,这也一定程度上是为了增强鼠标的寿命啊,想想你换键盘的次数与换鼠标的次数,中间的对比,就知道了,这里推荐使用机械键盘,啪啪啪起来,绝对飞的一样,而且基本上键盘是很难坏的

使用快捷键飞一样的实现切换.gif

javascript控制台及面板工具

开发者工具面板

• Element:查找html里面的任意一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈,查看盒模型型等,实时的调试css样式是非常有用的
• console:记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell,一般js代码报错都是根据这里的信息反馈,定位bug原因与所在位置,后面会着重学习
• Sources:断点调试JS,这个断点调试程序很重要,可以查看程序代码执行的每个过程，查看watch expression(通过表达式查看当前内存中的值),call stack(查看调用栈,开启async，可以查看异步调用栈,在调试ajax的时候用处很大),scope作用域(作用域链上的变量,学习作用域链查看变量时,分析闭包时,就相当有用了)，事件监听Event listener等很有帮助的,单步调试,以及查看调试内存当中的对象
• Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等）,可以根据这个进行网络性能优化,并且也是抓包查看每个请求,前后端联调必杀技
• Timeline(performance):记录并分析在网站的生命周期内所发生的各类事件,分析渲染,js执行的每个阶段,性能分析的依据利器
• Profiles:记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗,记录内存的分配细节,也是为了分析性能而生的
• Application:记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies,Frames）、缓存数据、字体、图片、脚本、样式表等,有时候我们扣一个网站的具体图片,除了通过审查元素鼠标探测方式保存图片,这种方式也是可以的
• Security:判断当前网页是否安全
• Audits:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等

Element面板使用:

• 双击DOM树视图里面的节点，可以实时编辑标签属性，修改的效果会事实的发生变化,整个前端人都会用的,注意的是有横向上下的调试和左右的调试方式,依据个人习惯而定,该面板下可以对DOM元素的Style样式,Event Listener事件监听,DOM Breakpoints断点,properties属性(包括标签属性,元素,节点node,Object进行查看)

  
  Element元素面板的使用

console面板的使用

• 一点小黑科技,神秘的使出黑色控制面板与别人与众不同

• F12-->竖着的三个点点-->settings--->preference--->theme--->Dark

  
  调出黑色的控制台面板
• 代码格式化,对于一些未装任何插件格式工具

• 利用控制台自动的格式化

  
  利用控制台自动的进行格式化
• 安装jsonView自动格式化代码(或者你找网上的其他工具也行)
• 应用商店搜索jsonView插件或者百度下载jsonView插件,直接拖入浏览器安装添加为可拓展程序即可,对于有的小伙伴不知道如何快速的到应用商店里面,你可以右键鼠标菜单->添加应用快捷方式 或者点击右上方三个小点---->更多工具--->拓展程序--->更多拓展程序,可以找到应用商店
  当然前提是:能翻得了墙,通过这种方式,任何浏览器什么插件都是可以找到的
  如何线上查找安装jsonView插件.gif
  如下安装jsonView插件json格式的代码直接就格式化了
  安装jsonview后json格式的代码直接会被格式化.gif
• 格式化css,js代码,无论你源代码什么格式没弄好,点击下方的{},都可以一键把代码进行格式化对齐,Firefox开发者工具中启用pretty-printing,选择该工具的Debugger标签页,显示当前网页页面加载在内存中的各个javascript文件,依然可以选择那个{}标识可以格式化代码,IE和Opera浏览器开发者工具中也有此功能,但是json格式我试了一下却无法格式化,这里的格式化代码都是便于我们调试,查看,是更改不了源码本身的格式问题的,不过一般的IDE工具都会配备代码格式化的功能
  格式化cssJS代码.gif

查看伪类等元素状态,如下gif操作所示

查看a伪类等元素的状态.gif

console控制面板

• console.info():表示该类消息只是一般性的内容
• console.debug():表示该消息辅助性的进行错误的调试
• console.warn():表示可能已经出现了一个问题,此消息会指出该潜在问题的情况
• console.error():表示已经出现了一个错误,随之出现的消息包含该错误的具体情况
• console.log():显示一般的基本日志信息,不仅可以向控制台中输出文字还可以输出文字,样式,图片
• console.group():输出一组信息的开头
• console.groupEnd():结束一组输出信息
• console.table(obj);可传入json对象,或数组以表格的形式输出,相比较传统的树形方式输出,这种输出方式适合内部元素排列整齐的对象或者数组,否则会出现很多的undeifned
• console.count():当你想统计代码被执行的次数
• console.dir():直接将该DOM结点以DOM树的结构进行输出，可以详细查对象的方法等,比for-in方便得多
• console.time("time") 计时开始
• console.timeEnd("time"):计时结束
• console.profile和console.profileEnd配合一起使用来查看CPU使用相关信息
• console.trance():用来追踪函数的调用过程,可以将函数的被调用过程清楚的输出到控制台上,在调试JavaScript程序时，有时需要打印函数调用的栈信息
• console.assert():对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台
• console.clear()或ctrl+l:清屏操作

• console.dirxml:用来显示网页的某个节点（node）所包含的html/xml代码

  
  console输出.png
  console.log.png

console.table().png consoleCount.png console.dir与console.time.png
profile.gif
console.trace.png 输出DOM节点显示网页的某节点以及清除控制台.gif

Sources控制面板使用

• Source maps:以层级化的目录结构视图显示所加载的各个文件,这些文件用于渲染标记当前网页页面
  启用步骤:开发者工具栏-->单击settings按钮图标,勾选preferences中的Enable CSS source maps,不过默认浏览器就自动给你勾选上了,这里提出来是有的小伙伴电脑的浏览器这里没有勾选上,需要自己手动的勾选就好了

  
  层级化目录结构视图显示出所加载的各个文件.gif

观察正在运行的js代码,分析流程,并打断点分析调试

断点工具介绍.png
在未对js代码进行设置断点前跑一遍程序,下面是测试的一简易js代码
* 设置断点调试,进行变量分析以及查看状态
*
* @global:{oBtn=null,name="xiaomei"}
* @event:click
* @function fun
* @localVariable:{name=xiaohuan}
*
*/
var oBtn = null,
name = "xiaomei"
window.onload = function(){
oBtn = document.getElementById("btn"); // 获取元素
oBtn.onclick = fun; // 添加事件
}
// 事件函数
function fun(){
var name = "xiaohuan";
oBtn.style.cssText = "background:#DE5044;color:#fff;border-radius:4px;outline:none;padding:8px"
for(var i = 0;i<5;i++){
(function(i){
setTimeout(function(){
console.log(i,this,this.name,this==window);
},10);
})(i);
}
}
</script>
html内容代码
<input type="button" value="点我触发事件" id="btn" name="">
F12(打开控制台)--->F8(解析器执行代码)-->ctrl+F5(刷新页面)--->F10(逐步执行代码,每按一次,就往下执行一次)
未设置断点情况跑一遍程序.gif
设置断点.gif
从上面的代码先从未断点调试代码执行过程到设置断点调试一目了然,注意你在实际操作中,要注意看右侧栏CallStack,scope等数值的变化,其中有两种插入断点的方法,就是一旦页面进行加载或刷新后,执行到特定的代码行时,页面就会暂停,可以由你来控制该位置javascript代码的运行情况,在代码中插入断点的第一种技术是添加一行代码,以此来迫使在代码文件的该行位置暂停执行,要实现这一点,你可以在你想要的执行代码的位置上添加debugger;语句,在代码执行时,开发者工具将会在这一位置暂停,使你能控制执行的流程,还能在代码执行的某一时刻观察任一全局或变量的值,注意你在正式发布上传代码前,要去掉这个debugger语句,另外一种设置断点的方式就是上面的gif图所示,在代码区块内,选中代码行号表示设置断点,在点一下表示取消断点,在你所希望暂停的位置上代码执行暂停的位置,直接在代码的行号上单击鼠标左键即可,它的标记会出现在该代码行号的旁边,这表示已经设置了一个断点,执行就会暂停,等待你进行下一步操作,断点设置之后,大多数浏览器开发者工具都可以让你右击该断点,可以编辑应用至该断点的条件,可以使你指定触发该断点前,应用程序处于何种确切的状态, 如果你想要在一段循环语句中设置断点,但又只希望当代码到达该循环的某一特定的迭代次数时才让断点暂停代码的执行,那么断点的条件设置就显得特别有用
在代码执行过程中,当在断点上暂停时,你可以检查由该短短包含的代码内的任何变量的值,直接把鼠标悬停在变量名的上方,对于被高亮显示的变量,会有一个提示框出现,当中显示着变量的值,而且还让你拓展对象,来展示当中各项属性的值,当暂停时,你也是可以在js控制台,并使用数据输入区域,在当前断点的运行坏境下,执行额外的代码,或查询特定变量的值,此方法对于强行使函数返回不同值的情况以及确保特定的条件语句在代码中运行的流程中被执行的情况来说是很有用的
当出现断点暂停时,在右方的面板中就会显示出执行的watch，call stack,scope等列表菜单,可查看包括当前暂停所进入的调用函数的名称,全局变量和该函数局部作用域内的变量列表,以及这些变量当前值,比如,当在一个函数内暂停时,你可以访问在该函数内声明的所有比那辆以及一些特殊的变量,比如一些参数,会显示出执行时所有传给该函数的参数,这使得开发者是非常清楚代码的执行过程的,可以判断出这些变量是否符合预期,在需要的时候,进行深度的调试
执行一旦暂停,你也会发现开发者工具窗口里所显示的js代码上方的工具栏中,continute按钮已经处于可访问状态了(类似一个播放的按钮F8键盘可快速调出执行),当点击该按钮时,代码将会恢复执行,直到下一个断点,注意它的右边还有五个step动作按钮,在上方的代码调试截图中也有说明,它们能够使你在不必要设置两外的断点的情况下就能逐条语句的继续执行,进而使你看到在变量上所实施的操作,即使你事先不懂程序的执行流程,从代码的断点调试中也能看出js解析器所得出代码执行的整个过程,Parse script execution(F8快捷键,解析脚本执行),Step Over next function call(F10快捷键,下一个函数调用),step into next function call(F11快捷键),step out of current function(shift+F11),Deactiveable/Activate breakpoints(禁用/激活断点,Ctrl+F8)
注意遇到函数的调用,它不会进入被调用的函数体内,如果你更关心所调用的函数的返回值,而不是该函数体内的代码,那么这个功能也是很有用的,另一个按钮在执行下一条语句时,如果遇到函数调用,它会进入到函数体内,并暂停在该函数的调用(使你的代码流程进入函数体)的下一条语句上,通过以上五个按钮的使用,可以跟踪代码的执行流程,同时观察局部变量和全局变量中所保存的值的情况,以帮助在当前浏览器所运行的网页页面的上下文坏境中找出该代码中所存在的问题,并实现调试

小结:注意事项

• 打断点,其实很简单,最主要的问题是在打断点的基础上进行排查出有问题代码,定位Bug,并修复
• 如上图所示,是一个点击按钮的操作,如果点击按钮,页面没有反应,一些数据或等js效果没有出来,首先想到的是,获取元素是否是准确,获取id,document.getElementById("id名");注意要与jQuery区别,jQuery中获取Id名前要加#号,获取标签名document.getElementsByTagName("标签名");若用jQuery中获取class,有点号与无点号的区别,点击事件是否用得正确,原生js中对象.onclick = function(){},若是jQuery,$("对象").click(function(){});想要验证,那么可以在点击事件函数体内打断点,注意不要在添加事件函数处打断点,然后在点击按钮时结合console.log(),分析输出结果,若依然有问题,那么就要逐一的检查选择器,语法是否正确
• 注意在你进行断点测试完后,一定要把所要测试的代码块断点标记给去掉的,否则你有时困惑怎么刚刚数据还加载进来了,进行断点调试后,浏览器却什么都没有,一片空白的,其实是你刚设置的断点标记没有取消掉,进入断点调试坏境后,是不会从服务器端加载数据进来的,这在做Ajax前后端联调的时候是要格外注意的,否则就会被有些孤傲的同事所鄙视的,让他对你的能力产生怀疑
• 在实际情况开发下,遇到问题是很正常的,首先自行在脑海中排查问题,找出最有可能出现问题点，如果没有办法迅速的排查出问题，那么你可以使用最靠谱的方法，就是“逐行执行语句”将整个相关的js依次去执行一遍，在执行的过程中,注意看右侧菜单栏或者自己控制台console.log()进行测值,理清问题,注意代码中变量的值以及选择器选中的元素是否正确,基本上问题挨个的排查,bug也就差不多了的,不断接近真理的,首先,js是否成功的执行进来,是加载顺序,还是从页面外链引入问题,路径等问题,另外,js是否存在逻辑问题(大部分都是逻辑问题,这也是一道坎)，变量问题(全局还是局部)，参数问题(实参数与形参数不一致)等等,最后检查语法问题,中英文符号,结束符等,如果解决不了,那么就先Google,后一些博客园csdn,IT等社区,最后在百度,在最后,就是请教大神,若公司里有些同事不愿意告诉你,让你尽折腾的,那么此刻赶紧向万能的群友,老师或者一些优质的社区提问吧,最陌生的永远是路人,最热心的永远是网友,键盘侠.

查找内存泄露

什么是内存泄露

直白解释:随着时间的推移,某些不在需要的变量一直长期驻扎在内存当中,没有被释放,这就意味着,浏览器可用剩余的空间会越来越小,直至没有多余的内存剩余,浏览器进程被崩溃,页面响应迟钝,数据延迟显示加载等诸多问题
造成内存泄露的主要三个原因:

1. 使用console对象那个在浏览器开发者工具的javascript控制台里输出对象的值,会引发内存泄露,虽然代码库的其余内容可能已经不在需要访问该对象,但这会使得在内存中一直保持对输出对象的引用,这可能会导致在开发过程中出现内存泄露,若一旦在最后的发布代码中将这些消息输出方法调用移除,它就不会在出现了(当有的客户打开网页很慢,或者卡得不行时,听得程序员说得最多的一句就是清除缓存(ctrl+shift+delete)在试试的,所谓清除缓存就是把历史记录给清空的,给浏览器释放空间,减少它的负担压力)
2. 处理DOM事件的时候,某些操作时,引用计数,引用了你代码中其他位置的某个对象中的属性,那么,即使在某个时刻后,你的代码已不在需要或不在使用该对象,实际上该闭包仍存在被执行的可能性,因而保持着对该对象的引用,也就是说,只要该事件处理器仍然有效,该对象就会一直保持在内存中,因此要确保DOM元素上使用removeEventLister()方法或者将该对象使用完后为null,以保证将不在需要使用的对象引用及时移除并释放所占用的内存
3. 内存泄露源于两个或者多个对象之间所存在的循环引用,虽然应用程序已经不在需要这些对象了,但是这些对象依然保持着所分配的内存,通常解决办法是:减少内存泄露发生机会的最好办法就是,将来自于其他对象的数据引用以独立的局部变量的形式保存为一份副本

在chrome浏览器中进行内存分析

shift+Esc(任务管理器)-->鼠标右键-->勾选javascript使用的内存或者点击右上角菜单栏三个小点-->更多工具-->任务管理器,如下gif图所示

chromeTaskManner.gif

在chrome浏览器中查看javascript所消耗的内存情况,通过工具栏中的Memory-->profiles,可以显示查看内存的使用情况,这样,就可以看到你的网页应用程序的javascript部分所使用的内存情况的,这样就可以与其他网页应用程序进行比较了
如果你需要随时观察确切的内存使用情况,你可以使用chrome开发者工具的Profiles标签页中的Heap Snapshot,各个获取对象的内存的快照的使用情况快照,选择Take Heap Snap Snapshot单选按钮,并单击Take Snapshot,各个快照结果将会显示在左方的面板上,你可以单击某个快照,以列表的形式显示出所创建的对象的摘要,列表将按照对象进行实例化时所使用的构造函数或者js的内建数据类型进行组织排列,显示出每一项所占用的内存数量,可以从中找出哪些对象正在占用着比预期更多的内存,从而帮助你修改那些对象中可能存在的特定的问题,如果想要在一个特定的时间周期内比较你的网页应用程序的整个内存的使用情况,在开发者工具中的Profiles标签页中选择Record Heap Allocations单选按钮,单击start按钮,开发者工具的左上方会显示一个公色的只是图标,表示现在正对内存使用情况进行记录,当你认为已经收集到足够的相关数据时,请单击该指示图标,以停止记录,从你开始记录的到停止记录的时刻,在此期间内的内存使用情况,将在开发者工具的主面板中的图表上绘制出来,内存的使用出现变化的对象清单,在图表上方的时间段内,可以用鼠标拖选某一个时间段,以筛选出更细的范围,观察期间发生的内存使用事件情况,从而帮助自己找出是哪些对象的变化引起了大量的内存占用变化并加以关注,这样你就可以想办法改进自己的应用程序的过多内存的使用情况了
在浏览器的开发者工具中的Performance性能分析,老版本的浏览器是Timeline,里面有Memory时间轴的工具,要运行内存时间轴检查,只需要在刷新页面(F5)开始记录测量数据保持Performance标签页处于打开状态,当页面加载事件完成之后,一个图形将会呈现,当中会显示你所运行的页面内存消耗情况,在图形之下,是记录清单,显示了所发生的影响应用程序使用的每一个事件,当中包括一些完整的详细信息,如事件的类型,文件名称以及影响内存使用操作的行号,在图形上滑动器选择一段时间范围,可以在下方的记录清单中筛选出该时间范围内的记录(可能在你注意到在内存使用情况中出现了很高的细长柱状标志的位置,但是并没有消耗很多的内存),以此来辅助进行调试,找出那些初始化并运行后使得应用程序消耗很多的内存的操作,是一个正在运作的内存时间轴,当中的内容包括:随着时间的进行而产生的内存使用情况,引起内存分配变化的事件清单,记录生效的DOM节点个数和事件监听器个数的计数器(在网页应用程序中,这两者往往会是内存泄露的原因)

• Take Heap Snapshot:采取堆快照

  • Heap snapshot profiles show memory distribution among your page's javascript objects and related DOM nodes:堆快照配置文件显示页面的JavaScript对象和相关DOM节点之间的内存分配

• Record Allocation Profile:记录配置概要文件资料

  • Allocation profiles show memory allocations from your javascript functions:分配配置问及那显示了javascript函数的内存分配

• Record Allocation Timeline 记录分配时间

  • Allocation timelines show memory allocations from your heap over time,Use this profile type to isolate memory leaks 分配时间线显示随着时间的推移从堆中的内存分配，使用此配置文件类型来隔离内存泄漏

• Take Snapshot:拍快照

• Load:加载
  如下测试代码:
  * 原型模式:通过使用原型继承克隆已存在的对象创建出新的对象,即原型继承是js贯穿创建过程的继承类型
  * 实现方式:2种:第一种:使用一个已经存在的对象prototype属性,在js中创建类时所使用的 第二种:使用Ecmascript5的Object.create()方法,但是该方法需要更好的浏览器支持才能使用
  *
  * @global variable{textField,emailField}
  * @constructor Field
  * @param {type,displayText}
  * @method getElement
  * @return field
  * @Instanties objects {textField,emailField}
  * @将实例化对象添加到body中
  *
  */
  var textField,
  emailField;
  // 定义一个Field类,用于创建input表单元素
  function Field(type,displayText){
  this.type = type || "";
  this.displayText = displayText || "";
  }
  // 使用prototype属性来实现原型模式,所定义的方法将会应用于所有继承于此类的对象
  Field.prototype = {
  getElement:function(){
  var field = document.createElement("input");
  field.setAttribute("type",this.type);
  field.setAttribute("placeholder",this.displayText);

                return field;
            }
         };
         // 创建2个对象实例,二者都从prototype中获得了getElement方法
         textField = new Field("text","请输入你的地止");
         emailField = new Field("email","请输入你的Email地止");
  
         // 一旦页面加载完成,便把这些对象中所保存的元素添加至当前页面
         window.onload = function(){
             var bodyElement = document.body;
  
                 bodyElement.appendChild(textField.getElement());
                 bodyElement.appendChild(emailField.getElement());
         }
  

profiles.gif
记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗.gif

其中上面的那个Heavy(Bottom up)自底向上/tree to Down显示结果一样/,chart以图表展示

performance记录并分析在网站的生命周期内所发生的各类事件,分析渲染,js执行的每个阶段.gif
利用以上的开发者工具进行分析代码,performance性能,Memory,javascript Profiler工具,可以分析哪些函数代码运行的周期所耗用的时间,进行性能调优,从而尝试用更高效的写法,比如说,if..else语句,用三目运算符性能就比它高等来实现相同的操作并得到相同的结果,但是前提还是在实现功能的条件下,心有余力时在寻找更优的解决方案,否则一味的追求性能分析,核心功能代码没有实现,后面的性能优化都是徒劳而费时的,不要本末倒置了的,至少我觉得这需要一定的代码功力和算法领域,数据结构的知识

Application:记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies,Frames）、缓存数据、字体、图片、脚本、样式表等,有时候我们扣一个网站的具体图片,除了通过审查元素鼠标探测方式保存图片,这种方式也是可以的

Application.gif

Security:判断当前网页是否安全

Security.gif

Audits:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件，Audit present State审计状态,Reload Page and Audit on Load重载页面和负载审计

Audits进行网络利用呢性能优化建议.gif

总结:

如果您能坚持读完或者听我讲完,那么我已经非常感动了,如果读的同时,能够进行测试的话,我相信应该理解起来会更加深刻,毕竟动手测试跟浮光掠影阅读那感觉是不一样的,从开始的chrome浏览器下常用的热键,以及windows下的一些常用键,通过他们两者的强强联手,熟练的驾驭这些软技能,瞬间就能碾压鼠标手了,是通向一个优秀键盘侠必经之路吧,平常的工作中是否看到有那种一个主显示器,好几个显示屏之间飞快的进行切换工作的coder?往往萌妹子看到此景,除了崇拜还是崇拜,但是以身相许还是差那么点,因为颜值也是很重要的嘛,紧接着就是对开发者工具的Element,着重的console,Sources,Network面板使用,断点工具的介绍及使用,更重要的是打了断点后如何排查bug并修复,对代码执行流程的分析,这是很重要的,断点分析对理解this,上下文坏境,监测变量的实时变化是很有帮助的,通过查找内存泄露,什么是内存泄露,以及造成内存泄露的三个主要原因,以及怎么避免和解决的,最后就是在chrome浏览器中进行内存分析,perfermance,Memory,javascript Profiler,Application,Security,Audius进行代码测试,以及gif过程的动画演示,当然我这里没有演示firefox,IE等其他浏览器,其实都差不多,我只是觉得chrome浏览器用的顺手一些罢了,其实很多浏览器(360,2345)是IE内核与chrome浏览器-webkit的杂交体,与chrome浏览器操作调试手段都大同小异,你可以分别在各个浏览器自行测试一下进行佐证的,哪里不会,就立马Google嘛,至于开发者工具更多的调试技巧与知识,我也一直在学习当中,以后有新的体会在分享出来的

以下是本篇提点概要

• 主流浏览器下各快捷键的使用,chrome浏览器下的热键,以及windows下的常用热键
• javascript控制台及面板工具,Element,console,Sources,NetWork,perfermance,Memory,javascript Profilter,Application,Security,Audits
• Element面板使用
• console面板使用(面试笔试的时候有时候会考到)
• Sources控制面板使用
• 观察正在运行的js代码,分析流程,并打断点分析调试
• 查找内存泄露,什么是内存泄露,造成它的三大主要原因,以及怎么处理的
• 在chrome浏览器中进行内存分析

更多内容尽在微信itclanCoder公众号.jpg