Chrome开发者工具不完全指南.pdfVIP

目 录 一、基础功能篇 二、进阶篇 三、性能篇 四、性能进阶篇 五、移动篇 六、插件篇 本文档使用 看云 构建 - 2 - 一、基础功能篇 一、基础功能篇 原文 ：http///constantince/p/4565261.html 就算你不是一名前端开发工程师 ，相信你也不会对Chrome浏览器感到陌生。根据最新的一份 （2015/06 ）的浏览器市场占有率报告 ，Chrome近乎占有浏览器天下的半壁江山。简单、快捷使它成为 了新时代人们的新宠。如果你是一名web开发人员 ，我推荐你使用Chrome。作为前端开发的IDE ，你只 需要搭配一个编辑器就能完成几乎所有的开发任务了。关于它的使用和功能分析要么都是大而不全 ，要么 是巨细糜烦。本系会比较详细地分享卤煮的一些Chrome （F12开发者功能 ）使用经验 ，从一些基础的功 能开始到它的一些高级性能分析器 （Timeline、Profiles ）,在最后 ，将会推荐几款好的插件 ，希望对您的 开发工作有些许的作用。如果你对一些面板模块功能已经很了解可以直接跳过去阅读你感兴趣的部分。 一、Elements 在Element中主要分两块大的部分 A ：HTML结构面板 B ：操作dom样式、结构、时间的显示面板 1.在A中 ，每当你的鼠标移动到任何一个元素上 ，对应的html视图中会给该元素蓝色的背景。 本文档使用 看云 构建 - 3 - 一、基础功能篇 2.如果你单击选中一个元素 ，在A部分的底部 ，会显示该元素在html结构中的位置关系 3.然后你可以在B部分的styles选项中编辑该元素的样式 ，并且看到html结构的实时更新 （大大的福利 ） 4.你可以在B界面中切换到Event Listeners选项 ，观察该元素绑定的事件。 本文档使用 看云 构建 - 4 - 一、基础功能篇 click 是事件名称 .div1 事件是索引名称 （也就是通过什么绑定的 ） attachment 事件来源 handler里面包含事件的毁掉主体内容 useCapture表示该事件是否向上冒泡 5.选中一个元素 ，右击鼠标 ，你会看到有一个弹出窗口出现 ，里面有若干选项 Add attribut 为该元素添加属性 本文档使用 看云 构建 - 5 - 一、基础功能篇 Edit attribute ：修改该元素的属性 Force element state ： 为元素激活某种状态 （主要用在可以几乎的元素比如a、input、button等 ） Edit as HTML ：编辑该元素 （你可以重写它的整个content ）甚至修改它的标签名称 中间简单的掠过 Break on ：为该元素添加dom操作事件监听。包含三个选项 （树结构改变、属性改变、节点移除 ）。这个 选项的作用是帮助我们监控和定位操作元素的代码。请参看下图事例 ： 6.在A界面的弹出选项窗口中选择node removal ，在B界面切换到DOM Breakpoints 选项 ，可以看到有 注册信息。然后我们点击click me按钮触发删除div3的事件 ，可以看到浏览器自动为我们定位删除该元素 的代码部分 ，并且停止执行js代码 ： 7.在B界面中切换到Properties选项 ，可以看到选中元素的各种信息 （英文单词里面的介绍比较简单 ，就不 一一介绍了 ）。 本文档使用 看云 构建 - 6 - 一、基础功能篇 8.点击A界面的任意地方 ，按快捷键ctrl+F可以看到底部有输入框 ，在输入框中输入你想要查找的任何内 容 ，如果匹配到了 ，都回在A面板中高亮显示 本文档使用 看云 构建