灵活应用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 DOM学习第八章 表单错误提示
Feb 19 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
使用JavaScript 实现各种跨域的方法
May 08 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 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
星际争霸任务指南——人族
2020/03/04 星际争霸
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
基于python中theano库的线性回归
2018/08/31 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
用Python实现职工信息管理系统
2020/12/30 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
交通安全月活动总结
2015/05/08 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL
MYSQL如何查看进程和kill进程
2022/03/13 MySQL