今天分享一些不常用但总有一天你会用到的浏览器调试技巧。先来看一个H5页面，下面是地址http://liticool.info/wsvist/i...在微信中打开liticool.info/wsvist/index.html#/?sharekey=0a4384df4f65b6b47a74f76f8f3f3e1d&source=wxd56b51346bc8cbfc）在微信中看到了这个H5场景，看到了里面炫酷的动画。我就是想看看这个效果是怎么实现的，然后把地址复制到浏览器里，我的踩坑之路就开始了。坑一：我把链接复制到浏览器后，发现浏览器里一直显示一个loading。无法正常观看。思考：为什么微信可以，浏览却不行？然后我立马想到用微信开发者工具打开，果然成功了。你可以看到很酷的动画。然后我F12打开调试工具并选择其中一个dom元素。准备看看它的css代码。但是问题又来了。坑2：dom元素一直动，css代码一直变。经过高手指导：点击关闭按钮旁边的三个点->Moretools->Animation。你会发现一个新的面板出现了，点击暂停按钮。你会发现css动画停止了。如图所示。坑3：dom过段时间被删除。一个新的场景出现了（渲染了一个新的dom元素）。我应该怎么办？虽然动画停止了，但是dom的删除是js控制的。js还在运行。几秒钟后，页面重新呈现其他dom元素。如何让js停止执行？首先想到的是设置断点，但问题是在哪里断点。dom还没有渲染出来，打错地方可能代码就跑不进去了。于是高手又出来指点：可以在dom节点上打断点：选中一个dom元素，右击->打断->节点移除。这样，当dom节点被删除时，程序就会停止。如图所示。这样我们就可以轻松的找到我们要看的css代码了。补充：还有一种方法可以防止js执行，就是禁用javascript。或者点击三个点->Settings->Debugger->DisableJavaScript打勾。这样js就不会执行了，dom元素也不会被删除。如图：彩蛋：介绍一种在浏览器中全局搜索代码的方法，点击Sources面板，左边会看到目录结构，右键目录结构->Searchinallfiles。这使得在所有文件中搜索代码成为可能。这在开发中还是很有用的。如图：小扩展：还有一种场景：某个页面会向后台请求字体包，字体包会在某个时刻通过js添加到style标签中。但是我们不知道是哪一段js代码执行了这个操作。现在我想找到这段代码，怎么办？方法：样式标签断点：样式标签右键->BreakOn->subtreemodifications这样在样式中插入@font-face时，会直接停在执行插入的js代码处.图片作者：易启修——海森
