text: (window.webpackJsonp=window.webpackJsonp||[]).push([[151],{215:function(t,s,v){"use strict";v.r(s);var _=v(28),r=Object(_.a)({},(function(){var t=this,s=t.$createElement,v=t._self._c||s;return v("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[v("h1",{attrs:{id:"开发者工具"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#开发者工具"}},[t._v("#")]),t._v(" 开发者工具")]),t._v(" "),v("h2",{attrs:{id:"dom技巧"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#dom技巧"}},[t._v("#")]),t._v(" DOM技巧")]),t._v(" "),v("p",[v("strong",[t._v("1.元素对应的DOM")])]),t._v(" "),v("p",[t._v("ctrl + shift + c 然后鼠标移到对应的元素上即可，"),v("strong",[t._v("这种方法可以用来找到一些事件触发才出现的DOM，比如mouseover这种，使用面板上的那个按钮很难操作，使用快捷键就可以很方便的选中了,如果需要让mouseover显示的元素暂时展示，可以在body上激活breakon选项，这样就可以让这个节点暂时显示")])]),t._v(" "),v("p",[v("strong",[t._v("2.将视图滚动到元素所在位置")])]),t._v(" "),v("p",[v("img",{attrs:{src:"https://user-gold-cdn.xitu.io/2019/8/11/16c7f44b1d16b4f6?w=742&h=529&f=png&s=90868",alt:""}})]),t._v(" "),v("p",[v("strong",[t._v("3.在Elements面板使用选择器选取DOM")])]),t._v(" "),v("p",[v("img",{attrs:{src:"https://user-gold-cdn.xitu.io/2019/8/11/16c7f479d3963c76?w=632&h=446&f=png&s=64153",alt:""}})]),t._v(" "),v("p",[t._v("看到工具的tips了吗，可以使用选择器来获取DOM，至于支持哪些选择器，本人没有仔细试过，"),v("strong",[t._v("不过这个功能有很大妙用，一般你需要使用JQ来选择元素，这时候需要刷新运行才知道选择的结果，而且出来的结果还是JQ的对象，需要展开才知道选择了什么，使用这里的选择器，可以很直观看到选择的结果，这个可以用来确认选择的DOM，")]),t._v("，更重要的是"),v("strong",[t._v("可以用来辅助我们检查我们的CSS选择器是否与当前的选择器冲突了。")])]),t._v(" "),v("p",[v("strong",[t._v("4.快速展开DOM结构")])]),t._v(" "),v("p",[t._v("alt + click")]),t._v(" "),v("h2",{attrs:{id:"css技巧"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#css技巧"}},[t._v("#")]),t._v(" CSS技巧")]),t._v(" "),v("p",[v("strong",[t._v("1.编辑")])]),t._v(" "),v("p",[v("img",{attrs:{src:"https://user-gold-cdn.xitu.io/2019/8/11/16c7f4e7864d21f2?w=1019&h=265&f=png&s=56519",alt:""}})]),t._v(" "),v("p",[t._v("在Elements的styles可以查看css作用的结果，css来源，以及可以随意编辑这些CSS")]),t._v(" "),v("p",[v("strong",[t._v("2.激活伪类")])]),t._v(" "),v("p",[v("img",{attrs:{src:"https://user-gold-cdn.xitu.io/2019/8/11/16c7f507216d0bc9?w=1000&h=402&f=png&s=83924",alt:""}})]),t._v(" "),v("p",[t._v("这里勾选对应的伪类，即可激活伪类")]),t._v(" "),v("p",[v("strong",[t._v("3.查看CSS最终计算结果")])]),t._v(" "),v("p",[t._v("styles会展示全部的CSS，没有生效的CSS会带有删除线效果，但是不便于查看，而computed可以展示计算后的最终结果，可以在这里筛选自己想看的属性的生效值，比如rem的时候，你就可以看到具体是多少px")]),t._v(" "),v("p",[v("img",{attrs:{src:"https://user-gold-cdn.xitu.io/2019/8/11/16c7f5338f6ef316?w=983&h=555&f=png&s=116621",alt:""}})]),t._v(" "),v("h2",{attrs:{id:"事件技巧"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#事件技巧"}},[t._v("#")]),t._v(" 事件技巧")]),t._v(" "),v("p",[v("strong",[t._v("1.查看DOM节点上绑定的事件")])]),t._v(" "),v("p",[v("img",{attrs:{src:"https://user-gold-cdn.xitu.io/2019/8/11/16c7f575d548583e?w=902&h=603&f=png&s=118068",alt:""}})]),t._v(" "),v("p",[t._v("可以看到DOM节点绑定的所有事件，点击事件名，可以看到事件绑定的代码的文件名，可以跳转进去查看")]),t._v(" "),v("p",[t._v("介绍一下事件面板上两个关键的选项")]),t._v(" "),v("p",[v("img",{attrs:{src:"https://s2.ax1x.com/2019/10/20/KMILmF.png",alt:"KMILmF.png"}})]),t._v(" "),v("p",[v("strong",[t._v("Ancestors")])]),t._v(" "),v("p",[t._v("祖先，代表父级的事件，其实这个用处我就想到是用来查看事件委托的")]),t._v(" "),v("p",[v("strong",[t._v("framework listeners")])]),t._v(" "),v("p",[t._v("JQuery vue等框架添加的事件")]),t._v(" "),v("p",[t._v("中间那个all有两个选项，一个是blcok，一个是passive，是用来告知浏览器是否等待默认行为发生")]),t._v(" "),v("h2",{attrs:{id:"数据-network-技巧"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#数据-network-技巧"}},[t._v("#")]),t._v(" 数据(Network)技巧")]),t._v(" "),v("p",[v("strong",[t._v("1.查找指定资源")])]),t._v(" "),v("p",[t._v("这里讲一个特殊的，我们怎么快速确定一个文件被加载了呢，当然是查找加载列表里有没有这个资源")]),t._v(" "),v("p",[v("img",{attrs:{src:"https://user-gold-cdn.xitu.io/2019/8/11/16c7f5ad50d97edf?w=1028&h=899&f=png&s=178148",alt:""}})]),t._v(" "),v("p",[t._v("点击network，然后ctrl + p 输入文件名即可查看结果，是不是很快呢")]),t._v(" "),v("p",[v("strong",[t._v("2.阻塞文件加载")])]),t._v(" "),v("p",[t._v("当你想验证，是否是这个文件影响了什么，当时是不加载它呢，使用下面的操作即可实现。")]),t._v(" "),v("p",[v("img",{attrs:{src:"https://user-gold-cdn.xitu.io/2019/8/11/16c80475396457c2?w=1070&h=360&f=png&s=41620",alt:""}})]),t._v(" "),v("h2",{attrs:{id:"代码技巧"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#代码技巧"}},[t._v("#")]),t._v(" 代码技巧")]),t._v(" "),v("p",[v("strong",[t._v("1.快速跳转到方法所在文件")]),t._v("\n如果我们知道方法名字，可以快速跳转到代码所在位置喔")]),t._v(" "),v("p",[v("img",{attrs:{src:"https://user-gold-cdn.xitu.io/2019/8/11/16c7f63630b67528",alt:""}})]),t._v(" "),v("p",[t._v("在console中输出方法名称，点击输出结果即可跳转到代码位置")]),t._v(" "),v("p",[v("strong",[t._v("2.格式化压缩代码")])]),t._v(" "),v("p",[t._v("压缩的代码格式化，一般线上代码都是经过了压缩，没法看，我们可以格式化一下")]),t._v(" "),v("p",[v("img",{attrs:{src:"https://user-gold-cdn.xitu.io/2019/8/11/16c7f655ff44dec1?w=694&h=916&f=png&s=33218",alt:""}})]),t._v(" "),v("h2",{attrs:{id:"调试技巧"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#调试技巧"}},[t._v("#")]),t._v(" 调试技巧")]),t._v(" "),v("p",[v("strong",[t._v("1.清空控制台")])]),t._v(" "),v("p",[t._v("嘻嘻，我一般是使用这个清除的")]),t._v(" "),v("p",[v("img",{attrs:{src:"https://user-gold-cdn.xitu.io/2019/8/11/16c8033faf3a3c8d?w=897&h=259&f=png&s=19936",alt:""}})]),t._v(" "),v("p",[t._v("一直在找快捷键，诶，没想到人家按钮的hover效果上就告诉你了怎么快捷键 "),v("strong",[t._v("ctrl + l")]),t._v(" ,再也不用拿出手去用鼠标了")]),t._v(" "),v("p",[v("strong",[t._v("2.使用断点")])]),t._v(" "),v("p",[t._v("随着前端项目越来越复杂，使用像后台语言java断点方式调试再也常见不过，也就是这个断点，帮助我面对一个面向几百万人的项目时，可以快速上手，可以"),v("strong",[t._v("在源代码sources面板的对于文件处，点击对应的行，即可插入debugger断点")])]),t._v(" "),v("p",[v("strong",[t._v("3.使用条件断点")])]),t._v(" "),v("p",[v("strong",[t._v("右键单击该断点，并点击Edit breakpoint(编辑断点)。在文本字段中输入你的条件，并按Enter键，即可在指定条件下运行断点")]),t._v("，在循环调试这种非常有用")]),t._v(" "),v("p",[v("strong",[t._v("4.调试面板介绍")])]),t._v(" "),v("p",[v("img",{attrs:{src:"https://user-gold-cdn.xitu.io/2019/8/11/16c80408f8940ce8?w=381&h=94&f=png&s=7437",alt:""}})]),t._v(" "),v("ol",[v("li",[v("p",[t._v("跳过此断点")])]),t._v(" "),v("li",[v("p",[t._v("执行该行，不进入语句内部(比如函数)，直接移动到下一行")])]),t._v(" "),v("li",[v("p",[t._v("执行该行，进入语句内部，比如是函数就会进入到函数定义处")])]),t._v(" "),v("li",[v("p",[t._v("跳出当前函数")])]),t._v(" "),v("li",[v("p",[t._v("还真不知道")])]),t._v(" "),v("li",[v("p",[t._v("禁用所有断点")])]),t._v(" "),v("li",[v("p",[t._v("当异常发生时自动暂停代码")])])]),t._v(" "),v("h2",{attrs:{id:"总结"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#总结"}},[t._v("#")]),t._v(" 总结")]),t._v(" "),v("p",[t._v("由于工作面对着庞大的项目，代码非常之多，目前也在改造成SSR结合Vue的技术架构，所以平时对于工具的应用汇比较多，本来想用gif来展示的，懒("),v("em",[t._v("^__^")]),t._v(")，等过段时间学习了更多的开发者工具知识，再来个高清重置版。")])])}),[],!1,null,null,null);s.default=r.exports}}]);