来自 服务器&运维 2019-12-13 05:44 的文章
当前位置: 澳门威尼斯人平台 > 服务器&运维 > 正文

可以用来调试JavaScript错误的解决方案_javascript技巧_脚本之家

前言

关于JavaSctipt的兼容性,最懒的办法就是用jQuery的工具函数。尽量不要用那些什么ECMAScript之类的函数,因为很多浏览器都会报找不到函数的错误。下面列出一些在开发过程中碰到过的javascript问题。

A 使用alert 方法监视变量值 如果要中断代码的运行,监视变量的值,则使用alert() 方法; 如果需要查看的值很多,则使用document.write() 方法,避免反复单击“确定”按钮; B 使用window.onerror 事件 当页面出现异常时,onerror 事件会在window 对象上触发。它能在一定程度上告诉开发者相关的错误信息。 示例: 复制代码 代码如下:

前言

调试技巧,在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧,必定能在工作中起到事半功倍的效果。譬如,快速定位问题、降低故障概率、帮助分析逻辑错误等等。而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要。

1、参数列表多个逗号。

注意:在IE 中,触发error 事件后,正常的代码会继续运行,所有的变量和数据都会保存下来,在其onerror 事件处理方法中可以正常访问到;而在Firefox 中,触发error 事件后,一切都结束,所有的变量和数据都将被销毁。 C 使用 try...catch 语句找错误 示例: 复制代码 代码如下:

对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻断JavaScript程序的执行,从而造成副作用;

本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会填补空白。

$.ajax方法,非常熟悉了吧,但是在IE中有个小地方要注意,如果你在拼接参数列表的时候最后一个也加了逗号,那么毫无疑问,IE下全部JS失效。

注意:try...catch 并不能很好的处理JavaScript 的语法错误。 示例: 复制代码 代码如下:

alert弹出框需要点击确认比较麻烦,而console.log()仅在控制台中打印相关信息,因此不会造成类似的顾虑。

一、‘debugger;'

缺少标识符、字符串或数字

该示例并没有进入catch 块中。 D 使用相关调试器 在IE 和Firefox 浏览器中,可以使用相关的调试器或插件对JavaScript 进行调试。 ● 在Firefox 浏览器中,可以使用其自带的“错误控制台”。操作步骤如下: 打开Firefox 浏览器 → 在菜单条“工具”中 → 选择“错误控制台”即可。 在没有其他插件的情况下,其自带的“错误控制台”是一个非常不错的选择。 另外,在Firefox 浏览器中,还有一些很不错的调试器,如:Venkman、Firebug 等。 Venkman 调试器安装后,可以在Firefox 浏览器 → 在菜单条“工具”中 → 选择“JavaScript Debugger ”命令启用; Firebug 调试器安装后,可以在Firefox 浏览器 → 在菜单条“工具”中 → 选择“Firebug”→ 选择“打开 Firebug”即可; ● 在IE 浏览器中,可以使用 Microsoft Script Debugger 调试器 Microsoft Script Debugger 是微软随IE 4 一同发布的一个IE插件,可以从微软的官方网站上免费下载。 下载安装以后,必须将IE 浏览器的调试选项打开才能使用。操作步骤如下: 1> 打开IE 浏览器 → 选择菜单栏的“工具”→ “Internet 选项”命令 → “高级”选项卡 → 将“禁用脚本调试”复选框中的勾去掉即可。 2> 当IE 浏览器正在浏览页面时,运行Microsoft Script Debugger 调试器工具即可进行调试。 在Microsoft Script Debugger 调试器的 Running Document 面板中选择开启的页面文件,然后按F9 可以设置断点调试。另外,其Command Window 面板也是一个很有用的功能,它能在代码断点停止时,在其中输入变量名并回车,便可看到此时变量的值;Command Window 面板甚至可以接受简单的JavaScript 命令。但Microsoft Script Debugger 调试器自身还存在一个bug 问题。

最重要的是alert只能输出字符串,不能输出对象里面的结构,console.log()可以接受任何字符串、数字和JavaScript对象,可以看到清楚的对象属性结构,在ajax返回json数组对象时调试很方便。

除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者Java里面打断点。你也可以在一些条件控制中插入该调试语句,譬如:

data: { S_Id: Subject_Id, level: $.attr, --如果写上这个逗号,IE会报错,火狐谷歌正常。},
//兼容Firefox/IE/Opera使用console.logif{window.console = {log : function(){}};}window.console = window.console || {}; console.log || (console.log = opera.postError);
if  { debugger;}

2、var str; 与 var str=""的区别

下面分享两张打印出来的信息图片:

二、将Objects以表格形式展示

  var Str1; for (var i = 0; i < 3; i++) { Str1 += "xxx" } alert; var Str2 = ""; for (var i = 0; i < 3; i++) { Str2 += "xxx" } alert; 

上面简单的介绍了console.log调试,下面本文将给大家分享一个JavaScript中console.log调试的小技巧,话不多说,来一起看看详细的介绍:

有时候我们需要看一些复杂的对象的详细信息,最简单的方法就是用console.log然后展示成一个列表状,上下滚动进行浏览。不过似乎用console.table展示成列表会更好呦,大概是介个样子:

两次输出结果分别如下:

console出正确的值

var animals = [ { animal: 'Horse', name: 'Henry', age: 43 }, { animal: 'Dog', name: 'Fred', age: 13 }, { animal: 'Cat', name: 'Frodo', age: 18 }]; console.table;

一个变量,如果定义时不赋值,那么就是undefined。再加字符串就是undefined + "要加的字符串"。如果这样给HTML元素赋值。undefined也是会显示出来的,怎么注意你懂的。

我们直接来看这一段代码

三、多屏幕尺寸测试

3、IE缓存JS的调试

var obj = { name: '小傻子', age: 12}console.logobj.name = '大傻子'

Chrome有一个非常诱人的功能就是能够模拟不同设备的尺寸,在Chrome的Inspector中点击toggle device mode按钮,然后就可以在不同的设备屏幕尺寸下进行调试咯:

今天调试的时候,发现IE8的JS缓存,非常非常霸气。刷新,清空缓存都无效。搞得刷新到鼠标左键都快碎了,还是不刷新。

很明显我在第四行的位置添加了console是想查看obj在第四行的时候的值。

本文由澳门威尼斯人平台发布于服务器&运维,转载请注明出处:可以用来调试JavaScript错误的解决方案_javascript技巧_脚本之家

关键词: