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

相关文章

来自专栏hbbliyong

RadioButtonList数据项不改变依然执行改变事件

问题:使用RadioButtonList导航到其他页面,当点击一数据项出现新页时候,关闭新页,再点击此数据项,由于数据项没有改变,所以不能触发他的Selecte...

2383
来自专栏xingoo, 一个梦想做发明家的程序员

【前端开发系列】—— 利用选择器添加内容

  上文讲到了CSS3的选择器,通过after和before选择器,在元素前后添加内容。   也可以通过变量来实现自定义的标题 1     h1:before{...

1805
来自专栏河湾欢儿的专栏

伪元素

:first-letter 伪元素的样式将应用于元素文本的第一个字(母)。 :first-line 伪元素的样式将应用于元素文本的第一行。 :befor...

713
来自专栏十月梦想

Vue同时使用transition(过渡)和animate.css(动画库)

    解决第一次出现没有动画新增apper属性点添加apper-active-class,同时使用过渡和动画,可以在class中新增过渡的calss,v-en...

601
来自专栏一个小程序员的成长笔记

<script>元素在XHTML中的用法

  编写XHTML代码的规则要比编写HTML严格得多,例如如下代码: 1 <script type="text/javascript"> 2 fun...

3226
来自专栏Small Code

Python中strptime的简单使用

strptime是python datetime库中的函数,用于将一个日期字符串转成datetime日期格式便于后期处理,使用格式为datetime.strpt...

1778
来自专栏十月梦想

html元素居中情况分类

内联元素,也叫行内元素(inline):(,a,input,span,b,i,u....)默认不会进行换行,不能设置宽度和高度.

443
来自专栏IMWeb前端团队

探究position:fixed在css动画过程中的行为~

补充: 是指transform动画 想要的效果 ? 原本buttom_submit是通过position:fixed; bottom:0px;来定位到底部的, ...

1986
来自专栏前端儿

字符串替换

每行数据是一个字符串,长度不超过1000  数据以EOF结束输出对于输入的每一行,输出替换后的字符串样例输入

662
来自专栏十月梦想

Vue使用animation.css动画库

由于使用第三方库,需要使用指定class,所有要之定义class值,使用enter-active-class和leave-active-class,必须包括an...

602

扫码关注云+社区