- 浏览: 3322994 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具(开发)使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563:
感谢作者分享~请教下,http://www.lisa33xia ...
CSS基础:text-overflow:ellipsis溢出文本 -
u012206458:
$.ajax的error,complete,success方法 -
DEMONU:
谢谢,虽然不能给你赞助,但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes:
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础:text-overflow:ellipsis溢出文本 -
zenmshuo:
用过SpreadJS,也包含数据可视化的图表
推荐几个web中常用js图表插件
作者:zccst
2014-11-20
再次思考一个调试的流程:
但实际上找到错误的方式和路径是并行的,一条路不同,换条路走,比如
a, 查看报错信息,然后用console.log()和console.dir()。
b. 设置断点调试。比如,在当前行或前后设置断点,逐行运行,查看数据是否符合预期。有时代码甚至没走你的逻辑。通过这种方式也能发现一些问题。
c. 全局搜索关键字。比如IE7小页面左下角一直出现取消二字(其他浏览器没有),直接寻找费力的情况下,可以试试搜索,并且重点看标签是否封闭,立马发现问题。
d. 最绝的是,注释掉出错代码前面的代码,直至找到错误。这一招真的很灵,今天又遇到了,在找jQuery给select添加option,立即又设置select的默认值时,就特别管用。
2014-11-13
讲想查看的那一行代码,复制到firebug里,查找到,然后设置断点。
还记得加班到很晚吗?
2014-9-3 解决问题的思路和步骤:
1,看报错行
2,console.log
一般情况下,这样就能解决问题了,至少能解决80%以上的问题。当然这些都是基础问题,对于一些稍难的问题,该怎么办呢?
3,设断点
(1)看堆栈变量赋值情况
(2)层层跟进
批注:设置断点调试一直是我的软肋,遇到问题死都想不到断点调试,已经很多次了,每次请教高手时,他们都说设个断点试试。
2014-6-11
掌握新的调试方法:设断点,看arguments的值。
结论1:如果是一个点击事件函数function(arg1, arg2){},那么该函数的arguments的第三个参数一定是event对象。也就是默认的event对象放在了arguments的最后一个,此乃一大发现。
结论2:设断点虽然很早就知道了,但实际中使用较少,所以还是不够熟练,不能充分利用设置断点来解决问题。
结论3:得好好学习一下控制台的使用
2011-10-12
1. 使用alert
2. 使用地址栏
使用地址栏,输入javascript: doSomething(),可以在Runtime时输出或者执行一些代码。输出东西时也使用alert,例如在地址栏输入:
javascript: alert(document.getElementsByTagName("a").length);
可以输入当前的document下的链接数量。如果想执行已经加载的自定义函数,可以输入例如:javascript: deleteFirstChildNode();
3. 错误查看器
最快捷的错误查看器当属Firefox的错误控制台,快捷键ctrl+shift+j。在你觉得脚本执行不正常时,首先按一下这个快捷键,往往能立刻知道哪里出了问题,并且点一下就能到问题脚本所在的位置,非常方便,强烈推荐!
4. 用浏览器的扩展或插件查看错误
这个话题比较大,一时说不完,所以先说说用扩展或插件来查看错误。对我来讲,Firebug一般就够用了,比较常见,就不截图了。启用Firebug控制台后,如果页面上js脚本错误,就会立刻在右下角显示出来,点击可以查看错误。有一点需注意,我的Firebug有时会报这个带乱码的错误:
我一直不清楚这个为什么会乱码,但我知道这个是跨域的错误,比较常见。
其他浏览器的错误查看器,在这里我也简单总结一下:
Chrome:菜单 – 开发人员 – JavaScript控制台,下方可以看到类似于Firebug的console,在这里可以看到错误和警告信息。
Opera:菜单 – 工具 – 高级 – Error Console,功能比较强大,可以查看各类错误。
Safari:4.0版跟Chrome查看方式一样。Chrome/Opera/Safari都可以在Develope Tools里看到错误信息。
IE8:非常不好用,但是也有。开发人员工具 – Script标签 – 点击右边的console。在这个console里可以看到错误信息,但是不太友好。
5. console.log
在代码中使用console.log,也就是类似于alert,只不过把想要的信息输出到console里。console对象在Firefox、Chrome、Safari里都可以使用。除了console.log,还有console.error,console.info等等。详见Firebug的console API。
6. Console
最后正式介绍一下Console,也就是控制台。Life is short, use console!以Firebug的console为例,把几个常用功能介绍总结一下:
查看js对象
输入一个名字,例如window,window对象就会出现在结果中。这时可以点击这个window对象!点击以后就可以在DOM标签中查看这个对象的所有属性。那么现在应该能看到window下的全局变量了,方便吧!
查看DOM对象
输入document.getElementById(“el_id”),这时el_id这个元素就会出现在结果中,点击可以看到它的详情,例如看看它当时的HTML代码。
在Runtime执行脚本
输入任何的js代码,立刻执行。这样可以很方便地测试页面上的脚本了。也可以在多行模式中执行输入的js。
关于这个console,在输入js脚本时,别忘了按tab键进行代码自动补齐哦!代码补齐和提示功能,在Chrome、Safari和Opera里同样有效,IE8就惨点了。Chrome和Safari做的也非常好,大家可以试一下啊。
简而言之,掌握快速定位,可以迅速解决JavaScript开发中的琐碎问题,以上办法中,我的建议是,遇到问题先用错误查看器看一下,不行再使用Console,基本上就能很快定位问题原因了!
2014-11-20
再次思考一个调试的流程:
但实际上找到错误的方式和路径是并行的,一条路不同,换条路走,比如
a, 查看报错信息,然后用console.log()和console.dir()。
b. 设置断点调试。比如,在当前行或前后设置断点,逐行运行,查看数据是否符合预期。有时代码甚至没走你的逻辑。通过这种方式也能发现一些问题。
c. 全局搜索关键字。比如IE7小页面左下角一直出现取消二字(其他浏览器没有),直接寻找费力的情况下,可以试试搜索,并且重点看标签是否封闭,立马发现问题。
d. 最绝的是,注释掉出错代码前面的代码,直至找到错误。这一招真的很灵,今天又遇到了,在找jQuery给select添加option,立即又设置select的默认值时,就特别管用。
2014-11-13
讲想查看的那一行代码,复制到firebug里,查找到,然后设置断点。
还记得加班到很晚吗?
2014-9-3 解决问题的思路和步骤:
1,看报错行
2,console.log
一般情况下,这样就能解决问题了,至少能解决80%以上的问题。当然这些都是基础问题,对于一些稍难的问题,该怎么办呢?
3,设断点
(1)看堆栈变量赋值情况
(2)层层跟进
批注:设置断点调试一直是我的软肋,遇到问题死都想不到断点调试,已经很多次了,每次请教高手时,他们都说设个断点试试。
2014-6-11
掌握新的调试方法:设断点,看arguments的值。
结论1:如果是一个点击事件函数function(arg1, arg2){},那么该函数的arguments的第三个参数一定是event对象。也就是默认的event对象放在了arguments的最后一个,此乃一大发现。
结论2:设断点虽然很早就知道了,但实际中使用较少,所以还是不够熟练,不能充分利用设置断点来解决问题。
结论3:得好好学习一下控制台的使用
2011-10-12
1. 使用alert
2. 使用地址栏
使用地址栏,输入javascript: doSomething(),可以在Runtime时输出或者执行一些代码。输出东西时也使用alert,例如在地址栏输入:
javascript: alert(document.getElementsByTagName("a").length);
可以输入当前的document下的链接数量。如果想执行已经加载的自定义函数,可以输入例如:javascript: deleteFirstChildNode();
3. 错误查看器
最快捷的错误查看器当属Firefox的错误控制台,快捷键ctrl+shift+j。在你觉得脚本执行不正常时,首先按一下这个快捷键,往往能立刻知道哪里出了问题,并且点一下就能到问题脚本所在的位置,非常方便,强烈推荐!
4. 用浏览器的扩展或插件查看错误
这个话题比较大,一时说不完,所以先说说用扩展或插件来查看错误。对我来讲,Firebug一般就够用了,比较常见,就不截图了。启用Firebug控制台后,如果页面上js脚本错误,就会立刻在右下角显示出来,点击可以查看错误。有一点需注意,我的Firebug有时会报这个带乱码的错误:
我一直不清楚这个为什么会乱码,但我知道这个是跨域的错误,比较常见。
其他浏览器的错误查看器,在这里我也简单总结一下:
Chrome:菜单 – 开发人员 – JavaScript控制台,下方可以看到类似于Firebug的console,在这里可以看到错误和警告信息。
Opera:菜单 – 工具 – 高级 – Error Console,功能比较强大,可以查看各类错误。
Safari:4.0版跟Chrome查看方式一样。Chrome/Opera/Safari都可以在Develope Tools里看到错误信息。
IE8:非常不好用,但是也有。开发人员工具 – Script标签 – 点击右边的console。在这个console里可以看到错误信息,但是不太友好。
5. console.log
在代码中使用console.log,也就是类似于alert,只不过把想要的信息输出到console里。console对象在Firefox、Chrome、Safari里都可以使用。除了console.log,还有console.error,console.info等等。详见Firebug的console API。
6. Console
最后正式介绍一下Console,也就是控制台。Life is short, use console!以Firebug的console为例,把几个常用功能介绍总结一下:
查看js对象
输入一个名字,例如window,window对象就会出现在结果中。这时可以点击这个window对象!点击以后就可以在DOM标签中查看这个对象的所有属性。那么现在应该能看到window下的全局变量了,方便吧!
查看DOM对象
输入document.getElementById(“el_id”),这时el_id这个元素就会出现在结果中,点击可以看到它的详情,例如看看它当时的HTML代码。
在Runtime执行脚本
输入任何的js代码,立刻执行。这样可以很方便地测试页面上的脚本了。也可以在多行模式中执行输入的js。
关于这个console,在输入js脚本时,别忘了按tab键进行代码自动补齐哦!代码补齐和提示功能,在Chrome、Safari和Opera里同样有效,IE8就惨点了。Chrome和Safari做的也非常好,大家可以试一下啊。
简而言之,掌握快速定位,可以迅速解决JavaScript开发中的琐碎问题,以上办法中,我的建议是,遇到问题先用错误查看器看一下,不行再使用Console,基本上就能很快定位问题原因了!
发表评论
-
[正则]改变URL中的参数值
2015-05-20 20:37 4429作者:zccst 如果一个URL是:http://www.e ... -
理解JavaScript的单线程运行机制及setTimeout(fn,0)
2015-03-30 17:56 5606zccst整理 阮老师的链接 ... -
延迟自定义函数
2015-03-26 14:02 1069作者:zccst 如果函数内又定义了一个跟自己同名的函数,执 ... -
js语句和表达式
2015-03-11 11:21 714作者:zccst 一直觉得语句和表达式很简单,不需要专门留意 ... -
再次学习try catch finally
2015-03-10 11:26 1797作者:zccst 一、基本介绍 JavaScript的错误 ... -
[201502]封装
2015-02-07 11:59 821作者:zccst 我理解的封装是建立在熟悉面向对象和继承的基 ... -
js运算符优先级
2015-01-26 10:39 2632作者:zccst js运算符优先级也是一个巨大的坑。有时候你 ... -
《JavaScript模式》读书笔记
2015-01-23 11:59 895作者:zccst 第四章:函 ... -
js判断复合数据类型的两种方式(typeof不奏效了)
2014-11-07 17:47 2520作者:zccst typeof认为所有的复合数据类型都是&q ... -
js-闭包(权威指南版)
2014-10-27 18:42 1395作者:zccst //1,闭包是 ... -
js数据类型转换
2014-10-22 10:53 6675作者:zccst 2015-3-27 类 ... -
html5的onhashchange和history历史管理
2014-09-20 08:18 4769作者:zccst 现在的开发,越来越倾向于页面内跳转,这种情 ... -
Javascript语言精粹-毒瘤和糟粕
2014-09-16 18:37 1216作者:zccst Javascript是一门语言,用久了肯定能 ... -
[夏天Object]运行时程序执行的上下文堆栈(一)
2014-07-01 22:26 1575作者:zccst 时间:2014-07-01 这已经是第二 ... -
[Object]继承(经典版)(五)封装
2014-06-18 22:21 1141作者:zccst 封装已经上升到写插件的水平了,与多重继承属 ... -
[Object]继承(经典版)(四)多重继承和组合继承
2014-06-18 22:16 1591作者:zccst 一、多重继承 不得不说,这又是异常精彩的 ... -
[Object]继承(经典版)(三)继承理论总结
2014-06-18 22:15 1275作者:zccst 更新:在JavaScript模式中,作者 ... -
[Object]继承(经典版)(二)原型链(原型继承)
2014-06-18 22:05 1088作者:zccst 毫不夸张的说,这节是继承的核心所在。是重中 ... -
[Object]继承(经典版)(一)对象冒充和Call
2014-06-18 21:51 2555作者:zccst 先臆想一下这种方法 var a = ... -
[Object]面向对象编程(高程版)(0)属性和方法
2014-06-16 23:04 972zccst转载+原创 function Person() ...
相关推荐
3. **查看变量值**:在执行过程中,可以查看并修改变量的实时值,帮助快速定位问题。 4. **调用栈分析**:查看函数调用的层级关系,理解代码的执行流程。 5. **异常捕获**:自动捕获并显示运行时错误,便于找出...
- **异常处理**:当发生JavaScript异常时,Venkman会自动暂停执行,并显示异常信息,帮助你快速定位问题所在。 - **性能分析**:虽然Venkman的主要功能是调试,但也可以进行基本的性能分析,如查看函数执行时间。 #...
本文档将详细介绍几种在JavaScript中实现快速定位的方法,帮助开发者提高调试效率。 #### 二、使用`alert` 1. **基本用途**:在调试时,可以在代码的关键位置插入`alert`语句来输出变量的值或状态,这有助于快速...
总之,熟练掌握JavaScript调试技巧和工具,不仅可以快速定位和修复问题,还能帮助你更好地理解和优化代码,提高整体开发质量。不断实践和探索,你将发现JavaScript调试其实并不复杂,反而能成为一种乐趣。
调试技巧是开发过程中不可或缺的一部分,它可以帮助开发者快速定位和解决问题,提升网页应用的质量和性能。以下是一些关于火狐浏览器调试技巧的详细说明: 1. **开发者工具**:火狐浏览器内置了强大的开发者工具...
掌握 Chrome DevTools 的 JavaScript 调试技巧,将极大地提升你在前端开发中的效率,帮助你快速定位和修复问题,优化代码性能。在实际使用中,不断探索和实践,你会发现更多实用的功能和快捷操作。
2. **异常处理**:在可能抛出异常的代码块周围增加try-catch语句,捕获异常并记录详细信息,有助于快速定位问题根源。 3. **性能监控**:使用XPages的内置性能监测工具或第三方工具,分析代码执行效率,识别瓶颈,...
这有助于快速定位和解决异常问题。 6. **性能分析**:除了基本的代码调试,这些工具还提供了性能分析功能,如CPU剖析和内存快照,可以帮助开发者发现性能瓶颈,优化代码。 7. **源码映射**:在处理压缩或者通过...
JavaScript调试工具是开发过程中不可或缺的一部分,它们帮助开发者追踪代码中的错误,优化性能,以及理解代码的执行流程。本文将深入探讨JavaScript调试工具的使用,并基于提供的文件信息进行讲解。 首先,...
JavaScript是Web开发中不可或缺的一部分,它是一种轻量级的...总之,掌握JavaScript调试技巧和选择合适的IDE是提升开发效率的关键。不断学习和实践,你将能够更好地驾驭JavaScript,创建出更加健壮和高效的Web应用。
### Firebug:JavaScript调试详解 #### 一、Firebug简介 Firebug是一款强大的网页调试工具,主要用于Firefox浏览器,虽然现在支持更多浏览器版本,但最初它专门为Firefox设计。它集成了多个功能模块,包括HTML检查...
此外,学会使用正则表达式搜索和替换功能可以帮助快速定位和修复代码问题。 总的来说,EditPlus作为一个轻量级的编辑器,其在JavaScript调试方面的功能虽然不如专门的IDE全面,但足以满足日常开发需求。通过熟练...
在这种情况下,使用XHR断点可以快速定位和调试问题代码。通过在Sources面板下设置网络请求相关的断点,当特定的AJAX请求发生时,调试器会自动暂停,这样开发者就可以检查该请求的详细信息,以及它对应用程序状态的...
掌握有效的JS调试技巧对于开发者来说至关重要,可以帮助我们快速定位并解决问题。以下是一些关于JS调试的关键知识点: 1. **浏览器内置调试工具**:大多数现代浏览器(如Chrome、Firefox、Edge)都提供了内置的...
总之,理解和掌握JavaScript调试工具对于提升开发效率、定位和修复问题至关重要。随着技术的发展,调试工具也在不断进化,提供更高效、直观的调试体验。在实际工作中,结合使用各种工具和技巧,将使你成为更优秀的...
JavaScript调试工具是开发过程中不可或缺的一部分,它们帮助开发者追踪代码中的问题、修复错误并...熟练掌握这些工具和技巧,将使你在JavaScript开发过程中游刃有余,快速定位和解决问题,从而提高开发效率和代码质量。
本书不仅涵盖了JavaScript的基础语法,还涉及了如何在网页中嵌入JavaScript代码、调试技巧以及变量、数据类型等核心概念。 ### JavaScript简介 JavaScript是一种广泛使用的脚本语言,主要应用于网页开发,为网页...
总之,JavaScript调试器是开发者不可或缺的利器,通过有效的调试,我们可以快速定位和修复代码问题,提高开发效率,保证软件质量。在不断学习和使用过程中,理解并熟练掌握各种调试技巧,将有助于提升作为一名...