灵活应用js调试技巧解决样式问题的步骤分享


Posted in Javascript onMarch 15, 2012

由于种种原因,例如:代码逻辑复杂、时间久了遗忘处理细节、或者根本就是接手修改别人遗留的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方法修改了样式

Javascript 相关文章推荐
JavaScript 设计模式学习 Singleton
Jul 27 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
Jun 03 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 Javascript
3款实用的在线JS代码工具(国外)
Mar 15 #Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 #Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 #Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 #Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 #Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 #Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 #Javascript
You might like
php&mysql 日期操作小记
2012/02/27 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
如何在PHP中读写文件
2020/09/07 PHP
JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
2009/08/03 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
Textarea输入字数限制实例(兼容iOS&安卓)
2017/07/06 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
利用Python批量生成任意尺寸的图片
2016/08/29 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
Python高并发和多线程有什么关系
2020/11/14 Python
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
国际会议邀请函范文
2014/01/16 职场文书
机电一体化应届生求职信范文
2014/01/24 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
晚会闭幕词
2015/01/28 职场文书