查看完整视频
小黑屋思过中,禁止观看!
评论并刷新后可见

您需要在视频最下面评论并刷新后,方可查看完整视频

积分观看

您支付积分,方可查看完整视频

{{user.role.value}}
付费视频

您支付费用,方可查看完整视频

¥{{user.role.value}}
专属视频

只允许以下等级用户查看该视频

升级
会员专享

视频选集

Chrome浏览器调试02

  • 视频介绍
  • 视频选集
  • 交流讨论
开发过程中,浏览器的调试非常重要,可以说是必备的技巧,本文我就会分享一些自己掌握的技巧,欢迎补充。

关于页面的直接调试基本都在这个面板里面进行。

点击1.可以选择节点,我们选择2.这个节点,然后就直接进入元素面板了。

快速展开全部子节点的方式 :按住alt再点击节点的展开符号。

节点调试

你可以通过这个方式选择页面中的任意节点来进行调试,也可以直接在右方的元素面板点击切换节点,在任意节点通过鼠标右键都可以激活更多的功能。

编辑节点

在1.这个区域你可以直接编辑节点的属性,比编辑器更为直观和迅速。

拷贝节点

在2.这个区域你可以进行拷贝这个节点的一些东西,比如js选择器,节点样式或者整个节点。

这在查看别人网站效果时非常有用。

操作

在3.这个区域你可以隐藏节点或者修改当前节点的状态,比如聚焦,鼠标移入等操作,同样的这个操作你可以在右方的styles面板直接切换

查看节点事件

当你想知道页面中摸一个节点的变化是哪些JavaScript代码在操控它,可以使用 Break on 来监听页面

比如我想监听这个主题选择面板的切换与显示是谁在控制,我们点击这个红框的元素面板节点

然后右键可以加入监听

此时我们再次去点击切换这个主题面板的显示于隐藏,便会自动跳到JavaScript代码中

辅助

在4.这个区域是对我们操作的一个辅助,比如滑动到其他地方快速定位到当前选择的节点,或者关闭所有已展开的节点

全局变量

点击5.可以将这个节点存储为一个全局变量,可以直接在console面板使用,这个在上面已经提到过

样式调试

直接在浏览器中调试样式也是非常方便的,元素面板的右边部分就是样式面板

编辑样式

可以点击左边选择框来决定这个效果是否展示,还可以直接编辑里面的具体属性

带删除线的效果表示这个效果在这个浏览器不起作用

选择颜色

只要是有颜色的地方可以点击小方块进入可视化选择界面,支持取色和预定义颜色非常方便

选择阴影

可视化的方式去制作一个阴影是不是更加的直观和方便呢

选择动画的绘制曲线

查看数据

点击Computed标签可以查看当前节点的各种样式数据,并可以通过小箭头直接前往这个效果的源代码位置

给TA打赏
共{{data.count}}人
人已打赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
搜索