灵活应用js调试技巧解决样式问题的步骤分享
更新时间：2012年03月15日 01:11:01 作者：
在很多时候，前端开发人员使用JS脚本，对页面Dom结构或者是样式做出了修改，会造成一些意想不到的bug
由于种种原因，例如：代码逻辑复杂、时间久了遗忘处理细节、或者根本就是接手修改别人遗留的bug，在这种情况下，debug就会变成一件头疼的事情。
在此分享一些JS调试方面的技巧，针对各种疑难杂症，往往能起到较好的效果。
Step 1：检查服务器直接render出来的内容
使用查看源文件的方式，这一步首先明确，页面HTML片段是否在服务器端就已经不正常了。
Step 2：比较实际的HTML内容和服务器render出来的原始内容之间的差异
可以使用一些前端工具（例如：IE下的开发人员工具、Firebug、Chrome的开发人员工具等），实时查看当前HTML片段内容
Step 3：在合适的位置增加debugger
例如：先找出大概可能出问题的js代码，在合适的地方加debugger，或者是使用工具增加类似于“在属性被修改时中断”的断点，例如实际的HTML比原始内容多出了一个width属性
Step 4：运行你的页面，进入中断，并检查js调用堆栈（关键的一步）
推荐使用IE支持的Visual Studio调试器（需要先设置IE：取消“禁用脚本调试”），这时基本就能确定是哪个js方法修改了样式
在此分享一些JS调试方面的技巧，针对各种疑难杂症，往往能起到较好的效果。
Step 1：检查服务器直接render出来的内容
使用查看源文件的方式，这一步首先明确，页面HTML片段是否在服务器端就已经不正常了。
Step 2：比较实际的HTML内容和服务器render出来的原始内容之间的差异
可以使用一些前端工具（例如：IE下的开发人员工具、Firebug、Chrome的开发人员工具等），实时查看当前HTML片段内容
Step 3：在合适的位置增加debugger
例如：先找出大概可能出问题的js代码，在合适的地方加debugger，或者是使用工具增加类似于“在属性被修改时中断”的断点，例如实际的HTML比原始内容多出了一个width属性
Step 4：运行你的页面，进入中断，并检查js调用堆栈（关键的一步）
推荐使用IE支持的Visual Studio调试器（需要先设置IE：取消“禁用脚本调试”），这时基本就能确定是哪个js方法修改了样式
相关文章
这篇文章主要为大家详细介绍了原生js实现对Ajax的封装，模仿jquery，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
layui问题之自动滚动二级iframe页面到指定位置的方法
今天小编就为大家分享一篇layui问题之自动滚动二级iframe页面到指定位置的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了JavaScript实现Excel表格效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
同一个标示符，先后用var和function声明它。最后它是什么呢2012-03-03
TypeScript 凭借其强大的类型系统,提供了一项称为泛型的功能,它使开发人员能够编写可重用和类型安全的代码,泛型允许您创建可以处理多种类型（而不是单个类型）的组件,本文深入探讨了 TypeScript 泛型,提供了详尽的解释和代码示例来说明它们的用法和好处2024-02-02
这篇文章主要介绍了JavaScript实现时间倒计时跳转(推荐)的相关资料,涉及到settimeout和setinterval方法的介绍，非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要介绍了利用aotu.js实现微信自动添加通讯录中的联系人,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-05-05
这篇文章主要介绍了javascript实现微信分享，非常的实用，小伙伴们参考下吧2014-12-12
相信大家都知道在SVG中添加文本是使用text元素。但这个元素不能够自动换行，超出的部分就显示不出来了，怎么办呢？下面通过这篇文章来给大家详细介绍下实现的过程。2016-10-10
JavaScript html5 canvas画布中删除一个块区域的方法
这篇文章主要介绍了JavaScript html5 canvas画布中删除一个块区域的方法,涉及JavaScript结合html5操作canvas画布图形绘制的技巧,需要的朋友可以参考下2016-01-01
最新评论