作者: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,基本上就能很快定位问题原因了!