json

2016-01-04 00:32

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,就可以运行了。

0条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。