chrome开发者工具小技巧

本文作者：IMWeb json 原文出处：IMWeb社区 未经同意，禁止转载

Chrome 开发者工具是一款Web开发者们公认的优秀的前端调试工具,本身功能强大，有了这个工具,你可以做很多有趣的事情。

快速编辑HTML元素

在Elements面板,鼠标双击需要打开的DOM元素标签,就可以编辑它，完成之后会自动更新页面和关闭标签。

还是在Elements面板按下ctrl + F 或 F3 ,在搜索栏里输入自己想要查找的内容，如果存在，就会在DOM中，用不同的颜色标出。

快速定位行和列

在sources面板中，选择相应的js或css文件，按下ctrl + O ，在选择指定的文件中使用“:行数:列数”，可以快速定位到相应的行和列。

展开所有子节点

选择”Elements”面板，选择DOM元素，在带有剪头的地点按住Alt +点击鼠标左键,可以展开所有子节点。

多个光标编辑

如图，在js文件中当像同时编辑几个地方时，可以按住ctrl ,鼠标左键点击添加光标，如果添加失误，可以用ctrl + U，撤销最后一个添加的光标。

触发伪类

页面中的hover类，鼠标放上去触发，css有个样式改变，但鼠标移开，又变成原来的样式，这样不好调试。可以在DOM元素上右击鼠标，打开右键菜单，选择“Force Element State”，就可以选择相应的伪类了。

使用$0获取当前元素

在”Element”面板中选择DOM元素,然后在console中输入$0可以获取当前元素

运行预定义的代码片段

在左侧边栏中选择: Sources > Snippets,右键选择New，新建文件，命名后，可以再里面输入代码片段，然后在文件名上右击，在弹出的菜单中选择Run,就可以运行了。