Chrome DevTools：之二：Element面板

    左边可以看到dom结构。这个dom结构不是网页源代码中的结构，而是经过你的js处理之后的结构，比如你用js添加了一些东西在页面上。也就是说你在这里看到的结构，并不是你右键 -> 查看源代码所看到的结构。

    可以看到，快捷键Ctrl + F(Mac:CMD+F),试试在搜索栏输入ID选择符或者类选择符或者XPath就可以定位到元素啦

	选中dom节点，可以右键选择编辑HTML或者属性，当然也可以删除节点。支持ctrl+z恢复操作。同时也可以为dom节点添加断点。当dom节点发生变化的时候，代码会停在修改这个dom节点的js代码的位置。 :activity :hover :focus :visited 上述四个选项是触发强制样式。例如:hover选中之后，对应的元素就一直显示为hover状态下的样式。这样方便对CSS进行调试。 小技巧： 择一个DOM元素，按下Alt键并且鼠标双击选择DOM元素前面的箭头，就会展开该DOM元素下的所有字节点元素. 在元素面板中你可以拖拽一个元素来改变他在父类中的位置，或者将它移动到文档中一个完全不同的地方。
	Styles Tab 用鼠标选中某个节点，就可以在右边看到它所有的样式。包括内联样式以及引入的样式。单独为其写的样式和继承过来的样式。 这些样式会按照优先级从高到低排列。 可以看到下面的很多样式都被划上了删除横线。多半是因为优先级低样式被覆盖。 另外样式前面有很多选择框，把前面的√点掉，这个样式就失效了。 这些样式可以编辑，而且编辑完成之后是直接表现在页面上的。 CSS 属性的自动完成 开发者工具支持 CSS 属性以及值的自动完成（包括那些需要前缀的），这对于决定为当前元素设置什么属性是很有帮助的。 当你开始为属性或者值输出一个名称的时候就会弹出建议，而且你也可以使用右键在可用的属性列表中滚动。要知道，选中的选项会直接应用到页面样式表中因此它的效果是可以直接看到的。 如果你想要展示所有支持的属性，你可以使用 Ctrl + space 来展示一个建议列表。 +号为New style rule，可以为当前标签添加新的样式。 :activity :hover :focus :visited 作用类似于前面的Force Element Satte一样的。 Style Tab 滚动到最底下可以看到直观的图形展示了盒子模型的margin、border、padding部分。这一块样式可以动态修改的。 小技巧： Style编辑器中，点击颜色十六进制编码前的小色块，会弹出一个调色板： 可以自定义颜色值，也可以使用拾色器进行取色.调色板下方可以选择Material Design的主要色系.
	Computed Tab 展示所有的CSS按照优先级计算之后得到的最终结果。 同样有一个盒模型的展示，一样可以修改。

Event Listeners Tab 可以查看绑定在元素上的事件，在事件中如果包含了函数，还可以跳转到函数定义或者存成去全局变量在Console里调用。 但是Chrome的查看绑定事件不是很好用，比Firefox差多了。针对Jquery绑定的事件，只能跳转到Jquery绑定事件的那部分源码，而不能跳转到真正执行的业务逻辑函数。那么查看绑定事件就变得非常鸡肋了。 上面的第二幅图是Firefox的开发工具，可以看到事件是直接定位到业务逻辑函数的，而跳过了绑定事件的Jquery源码。 为了解决Chrome中这个问题： https://stackoverflow.com/questions/2008592/can-i-find-events-bound-on-an-element-with-jquery In modern versions of jQuery, you would use the $._data method to find any events attached by jQuery to the element in question. Note, this is an internal-use only method: // Bind up a couple of event handlers $("#foo").on({     click: function(){ alert("Hello") },     mouseout: function(){ alert("World") } }); 控制台直接敲 $._data(dom, "events"), 其中 dom 是原生 dom 对象. 这种方法在任何浏览器下都可以用. The result from $._data will be an object that contains both of the events we set. Then in Chrome, you may right click the handler function and click "view function definition" to show you the exact spot where it is defined in your code. 同时，为了调试的时候跳过 Jquery代码，可以跳过Jquery，可以使用上文提到过的blackboxing机制。 https://stackoverflow.com/questions/20366823/event-listeners-in-chrome-with-jquery Chrome Developer Tools > Settings (F1) > General > Manage framework blackboxing... Check the Blackbox content scripts to disable breaking points on Chrome extensions, and add /.*jquery.*\.js$ to the URI patterns that should be blackboxed. Now in the Sources tab in the developer tools open Event Listener Breakpoints list on the right, and check the event you want to break the script at, this will stop the script execution on the script you've written to attach the event using jQuery. Another quick way to blackbox a library is by right clicking its name in the Call Stack in the Sources tab. It will show up when you add an event listener break point. http://www.360doc.com/content/15/0424/09/10504424_465600053.shtml 从jquery2的源码的注释中发现,$._data会在之后的新版本中废除。所以要有个备用方法。 直接进入控制台，构造一个包含jQuery的对象，以便在控制台里查看jQuery。 比如输入var o={j:$}，这样做的好处是，你执行后能在控制吧里查看jQuery的所有属性。 然后在控制台展开jQuery（这里是j）对象，找到_queueHooks这个方法，看到它的代码大概是“return L.get(a,c)||L.access…”这种，记住这个L也可能是不是L）jq2Detect2 展开任意一个j下面首层的对象，比如就是上面的_queueHooks，找到展开，再展开下面的Closure,找到前面的那个“L”对句，对着它后面的字母右键，选择“Store as Global”。 然后控制台里就打出一个tempX的对象，它就那个装着cache的东东。假设它叫temp1。 那个temp1有个get方法可以直接获取它的cache对象。 假如你要查看绑定事件的对象的id叫clickMe。那执行temp1.get($('#clickMe').get(0))（或者temp1.get(document.querySelector('#clickMe'))） 除了上面的解决办法之外，还有就是使用JQuery Audit | Visual Event插件，不过我试过了，都不是很好用。还是FF的实现比较优雅。 https://github.com/zertosh/jquery-audit https://github.com/DataTables/VisualEvent https://developers.google.cn/web/updates/2015/05/get-and-debug-event-listeners 找到函数，并打断点 var targetFun = function() {XXX} debug(targetFun) // 那么在调用的时候就会跳转进该函数，跟打断点效果一样。但是有时候找不到函数定义在哪，这个方法就很好了。 undug(targetFun) // 取消Debug某个函数

	在DOM元素上右键，有 “Break On” 选项，针对三种不同的DOM操作可以打断点。 在DOM Breakpoints Tab 中可以看到这些断点。
	Properties Tab用来查看所有的属性