chrome开发者工具小技巧

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 条评论
登录 后参与评论

相关文章

来自专栏木子昭的博客

React组件内事件传参 实现tab切换

1065
来自专栏前端知识分享

第78天:jQuery事件总结(一)

     现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery。

632
来自专栏Micro_awake web

CSS position &居中(水平,垂直)

css position是个很重要的知识点: 知乎Header部分: ? 知乎Header-inner部分: ? position属性值: fixed:生成绝对...

4059
来自专栏mySoul

微信小程序自定义组件

其中,components为组件目录,nodemodules为模块目录,pages为小程序的页面目录,utils为一些基础功能的封装。好比安装的第三方百度统计功...

1563
来自专栏老马寒门IT

06Vue.js快速入门-Vue组件化开发

组件其实就是一个拥有样式、动画、js逻辑、HTML结构的综合块。前端组件化确实让大的前端团队更高效的开发前端项目。而作为前端比较流行的框架之一,Vue的组件和也...

2335
来自专栏iOS开发日记

iOS开发系列——Storyboard

到目前为止我们还没有解释我们的程序是如何显示默认视图界面的。做过WinForm程序的朋友都知道每个Window窗口界面都有一个设计器(对应一个设计文件),其实在...

3234
来自专栏技术博客

ExtJs三(实现验证码图片控制器)

在Extjs二(实现登录)http://www.cnblogs.com/aehyok/archive/2013/04/18/3028739.html,今天紧跟上...

713
来自专栏Modeng的专栏

Vue2.5笔记:Vue中的模版

我们在上一篇说到如何把 Vue 实例中的数据显示到视图中,就会需要用到我们的模版,我们只是简单的使用了一些,模版其实还有很多其他的特性。今天我们就来看看模版的其...

611
来自专栏沈唁志

php中删除html标签和标签内内容的方法

1443
来自专栏web前端-

HTML基础知识

  属性的作用就是就为元素提供更多的信息,大多数元素都可以拥有属性    属性的语法:<标签 属性1=参数1>   注意空格的使用

733

扫码关注云+社区