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

honmaple 发布于2019-08-30 11:11 / 666人阅读

摘要：今天分享一些平时不常用，但总有一天你会用到的浏览器调试技巧。如图彩蛋介绍一个在浏览器中全局搜索代码的方法，点击面板，会看到左侧有目录结构，右键目录结构。如图小扩展还有一个场景一个页面会从后台请求字体包，字体包会在某个时刻通过加入到标签中。

今天分享一些平时不常用，但总有一天你会用到的浏览器调试技巧。先来看一个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代码处。如图

云服务器 GPU云服务器 hbase增加节点云服务器在线增加集群节点删除节点任务图节点删除

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114830.html

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

摘要：今天分享一些平时不常用，但总有一天你会用到的浏览器调试技巧。如图彩蛋介绍一个在浏览器中全局搜索代码的方法，点击面板，会看到左侧有目录结构，右键目录结构。如图小扩展还有一个场景一个页面会从后台请求字体包，字体包会在某个时刻通过加入到标签中。今天分享一些平时不常用，但总有一天你会用到的浏览器调试技巧。先来看一个H5页面，下面是地址http://liticool.info/wsvist/i...

jsbintask 2019-08-23 18:10 评论0 收藏0
实用浏览器调试技巧（动画、节点删除、节点增加）

摘要：今天分享一些平时不常用，但总有一天你会用到的浏览器调试技巧。如图彩蛋介绍一个在浏览器中全局搜索代码的方法，点击面板，会看到左侧有目录结构，右键目录结构。如图小扩展还有一个场景一个页面会从后台请求字体包，字体包会在某个时刻通过加入到标签中。今天分享一些平时不常用，但总有一天你会用到的浏览器调试技巧。先来看一个H5页面，下面是地址http://liticool.info/wsvist/i...

sherlock221 2019-08-30 11:24 评论0 收藏0
实用浏览器调试技巧（动画、节点删除、节点增加）

摘要：今天分享一些平时不常用，但总有一天你会用到的浏览器调试技巧。如图彩蛋介绍一个在浏览器中全局搜索代码的方法，点击面板，会看到左侧有目录结构，右键目录结构。如图小扩展还有一个场景一个页面会从后台请求字体包，字体包会在某个时刻通过加入到标签中。今天分享一些平时不常用，但总有一天你会用到的浏览器调试技巧。先来看一个H5页面，下面是地址http://liticool.info/wsvist/i...

henry14 2019-08-26 18:36 评论0 收藏0
Chrome 调试技巧

摘要：而就是告诉程序在那里停下来进行单步调试，俗称断点。面向，专为异步而生的断点调试功能。中的调试技巧元素的控制台书签开发者工具和都提供了书签功能，用于显示你在元素标签页或标签页中最后点击的元素。写在前面本文包括浏览器调试，不包括web移动端调试。本文调试均在chrome浏览器进行 alert 这个不用多说了，不言自明 console 基本输出想必大家都在用console.log在控制...

luqiuwen 2019-08-02 16:03 评论0 收藏0
Chrome 调试技巧

摘要：而就是告诉程序在那里停下来进行单步调试，俗称断点。面向，专为异步而生的断点调试功能。中的调试技巧元素的控制台书签开发者工具和都提供了书签功能，用于显示你在元素标签页或标签页中最后点击的元素。写在前面本文包括浏览器调试，不包括web移动端调试。本文调试均在chrome浏览器进行 alert 这个不用多说了，不言自明 console 基本输出想必大家都在用console.log在控制...

fantix 2019-08-29 16:38 评论0 收藏0