实用浏览器调试技巧动画节点删除节点增加

10次阅读

共计 1213 个字符,预计需要花费 4 分钟才能阅读完成。

今天分享一些平时不常用,但总有一天你会用到的浏览器调试技巧。先来看一个 H5 页面,下面是地址
http://liticool.info/wsvist/i…(订阅号里无法跳转外部链接的话请复制此链接在微信中打开 liticool.info/wsvist/index.html#/?sharekey=0a4384df4f65b6b47a74f76f8f3f3e1d&source=wxd56b51346bc8cbfc)我是在微信中看到这个 H5 场景的,看到了里面酷炫的动画。就想看看这个效果是怎么实现的,然后我把地址复制到了浏览器中,我的踩坑之路也就此开始了。

坑 1: 当我把链接复制到浏览器之后,发现在浏览器中一直显示一个 loading。不能正常观看。

思考:为啥在微信中可以,在浏览中就不行呢?然后立马想到了用微信开发者工具打开,果然好使。可以看到酷炫的动画了。然后我 F12 打开调试工具,选取其中一个 dom 元素。准备看它的 css 代码。但是问题又来了。

坑 2:dom 元素一直在动,css 代码也一直在变。

经过高人指点:点击关闭按钮旁边的三个点 ->Moretools->Animation. 你会发现出现一个新的面板,点击那个暂停按钮。你会发现 css 动画停止了。如图。
坑 3:dom 动一会儿就被删除了。出现了新的场景(渲染了新的 dom 元素)这该如何是好.

动画虽然停止了,但是 dom 的删除是 js 控制的。js 的还在运行。过几秒之后又页面又重新渲染了其他 dom 元素。怎么让 js 也停止执行呢,首先想到的是打个断点,但问题是去哪里打断点呢。打的早了 dom 还没渲染出来,打的地方不对代码可能不走那里。于是高人又出来指点了:可以在 dom 节点上打断点:选取一个 dom 元素,右键 ->Break On->node removal. 这样在此 dom 节点被删除的时候,程序就会停下来。如图。
如此这般,我们就可以轻松找到想要看的 css 代码了。
补充: 还有一种阻止 js 执行的办法,就是禁用 javascript。还是点击三个点 ->Settings->Debugger->Disable JavaScript 打勾就可以了。这样 js 就不会执行了,dom 元素也不会被删掉了。如图:
彩蛋: 介绍一个在浏览器中全局搜索代码的方法,点击 Sources 面板,会看到左侧有目录结构,右键目录结构 ->Search in all files。这样就可以在所有文件中搜索代码了。这个在开发中还是很有作用的。如图:
小扩展: 还有一个场景:一个页面会从后台请求字体包,字体包会在某个时刻通过 js 加入到 style 标签中。但是我们不知道是哪段 js 代码执行了这个操作。现在想找到这个代码,应该怎么办呢?方法:给 style 标签打断点:右键 style 标签 ->Break On->subtree modifications 这样,在 style 中插入 @font-face 时,就会直接停在执行插入的那一段 js 代码处。如图

 作者:易企秀——Hison

正文完
 0