javascript设置技巧

Web前端工程师应该知道的JavaScript使用小技巧

1. debugger

2. 用表格显示对象

有时， 有一组复杂的对象要查看。可以通过console.log查看并滚动浏览，亦或者使用console.table展开，更容易看到正在处理的内容！

var animals = [。

    { animal: 'Horse', name: 'Henry', age: 43 },。

    { animal: 'Dog', name: 'Fred', age: 13 },。

    { animal: 'Cat', name: 'Frodo', age: 18 }。

];console.table(animals);。

3. 使用不同屏幕尺寸

在桌面上安装不同移动设备模拟器非常棒，但现实确是不可行的。如何调整窗口大小呢？Chrome提供了所需的一切。跳到控制台并点击‘切换设备模式’按钮。观察窗口变化即可!。

4. 使用 console.time() 和 console.timeEnd() 测试循环。

要得知某些代码的执行时间，特别是调试缓慢循环时，非常有用。 甚至可以通过给方法传入不同参数，来设置多个定时器。来看看它是怎么运行的：

console.time('Timer1');var items = [];for(var i = 0; i < 100000; i++){。

   items.push({index: i});。

}console.timeEnd('Timer1');。

javascript常用的技巧

今天小编要跟大家分享的文章是关于Web前端工程师应该知道的JavaScript使用小技巧。任何一门技术在实际中都会有一些属于自己的小技巧。同样的，在使用JavaScript时也有一些自己的小技巧，只不过很多时候有可能容易被大家忽略。而在互联网上，时不时的有很多同行朋友会总结(或收集)一些这方面的小技巧。

今天在这篇文章中，小编会整理一些大家熟悉或不熟悉的有关于JavaScript的小技巧，希望能够对大家的学习和工作有所帮助。

一、数组

先来看使用数组中常用的一些小技巧。

01、数组去重

ES6提供了几种简洁的数组去重的方法，但该方法并不适合处理非基本类型的数组。对于基本类型的数组去重，可以使用...new。

Set()来过滤掉数组中重复的值，创建一个只有唯一值的新数组。

constarray=[1,1,2,3,5,5,1]。

constuniqueArray=[...newSet(array)];。

console.log(uniqueArray);。

>Result:(4)[1,2,3,5]。

这是ES6中的新特性，在ES6之前，要实现同样的效果，我们需要使用更多的代码。该技巧适用于包含基本类型的数组：undefined、null、boolean、string和number。如果数组中包含了一个object,function或其他数组，那就需要使用另一种方法。

除了上面的方法之外，还可以使用Array.from(newSet())来实现：

constarray=[1,1,2,3,5,5,1]。

Array.from(newSet(array))。

>Result:(4)[1,2,3,5]。

另外，还可以使用Array的.filter及indexOf()来实现：

constarray=[1,1,2,3,5,5,1]。

array.filter((arr,index)=>array.indexOf(arr)===index)。

>Result:(4)[1,2,3,5]。

注意，indexOf()方法将返回数组中第一个出现的数组项。这就是为什么我们可以在每次迭代中将indexOf()方法返回的索引与当索索引进行比较，以确定当前项是否重复。

02、确保数组的长度

在处理网格结构时，如果原始数据每行的长度不相等，就需要重新创建该数据。为了确保每行的数据长度相等，可以使用Array.fill来处理：

letarray=Array(5).fill('');。

console.log(array);。

>Result:(5)["","","","",""]。

03、数组映射

不使用Array.map来映射数组值的方法。

constarray=[

ame:'大漠',

email:'w3cplus@#'。

},

ame:'Airen',

email:'airen@#'。

constname=Array.from(array,({name})=>name)。

>Result:(2)["大漠","Airen"]。

04、数组截断

如果你想从数组末尾删除值(删除数组中的最后一项)，有比使用splice()更快的替代方法。

例如，你知道原始数组的大小，可以重新定义数组的length属性的值，就可以实现从数组末尾删除值：

letarray=[0,1,2,3,4,5,6,7,8,9]。

console.log(array.length)。

>Result:10

array.length=4

console.log(array)。

>Result:(4)[0,1,2,3]。

这是一个特别简洁的解决方案。但是，slice()方法运行更快，性能更好：

letarray=[0,1,2,3,4,5,6,7,8,9];。

array=array.slice(0,4);。

console.log(array);。

>Result:[0,1,2,3]。

05、过滤掉数组中的falsy值。

如果你想过滤数组中的falsy值，比如0、undefined、null、false，那么可以通过map和filter方法实现：

constarray=[0,1,'0','1','大漠','#',undefined,true,false,null,'undefined','null',NaN,'NaN','1'+0]。

array.map(item=>{。

returnitem

}).filter(Boolean)。

>Result:(10)[1,"0","1","大漠","#",true,"undefined","null","NaN","10"]。

06、获取数组的最后一项

数组的slice()取值为正值时，从数组的开始处截取数组的项，如果取值为负整数时，可以从数组末属开始获取数组项。

letarray=[1,2,3,4,5,6,7]。

constfirstArrayVal=array.slice(0,1)。

>Result:[1]

constlastArrayVal=array.slice(-1)。

>Result:[7]

console.log(array.slice(1))。

>Result:(6)[2,3,4,5,6,7]。

console.log(array.slice(array.length))。

>Result:[]

正如上面示例所示，使用array.slice(-1)获取数组的最后一项，除此之外还可以使用下面的方式来获取数组的最后一项：

console.log(array.slice(array.length-1))。

>Result:[7]

07、过滤并排序字符串列表

你可能有一个很多名字组成的列表，需要过滤掉重复的名字并按字母表将其排序。

在我们的例子里准备用不同版本语言的JavaScript。

保留字的列表，但是你能发现，有很多重复的关键字而且它们并没有按字母表顺序排列。所以这是一个完美的字符串列表(数组)来测试我们的JavaScript小知识。

varkeywords=['do','if','in','for','new','try','var','case','else','enum','null','this','true','void','with','break','catch','class','const','false','super','throw','while','delete','export','import','return','switch','typeof','default','extends','finally','continue','debugger','function','do','if','in','for','int','new','try','var','byte','case','char','else','enum','goto','long','null','this','true','void','with','break','catch','class','const','false','final','float','short','super','throw','while','delete','double','export','import','native','public','return','static','switch','throws','typeof','boolean','default','extends','finally','package','private','abstract','continue','debugger','function','volatile','interface','protected','transient','implements','instanceof','synchronized','do','if','in','for','let','new','try','var','case','else','enum','eval','null','this','true','void','with','break','catch','class','const','false','super','throw','while','yield','delete','export','import','public','return','static','switch','typeof','default','extends','finally','package','private','continue','debugger','function','arguments','interface','protected','implements','instanceof','do','if','in','for','let','new','try','var','case','else','enum','eval','null','this','true','void','with','await','break','catch','class','const','false','super','throw','while','yield','delete','export','import','public','return','static','switch','typeof','default','extends','finally','package','private','continue','debugger','function','arguments','interface','protected','implements','instanceof'];。

因为我们不想改变我们的原始列表，所以我们准备用高阶函数叫做filter，它将基于我们传递的回调方法返回一个新的过滤后的数组。回调方法将比较当前关键字在原始列表里的索引和新列表中的索引，仅当索引匹配时将当前关键字push到新数组。

最后我们准备使用sort方法排序过滤后的列表，sort只接受一个比较方法作为参数，并返回按字母表排序后的列表。

在ES6下使用箭头函数看起来更简单:。

constfilteredAndSortedKeywords=keywords。

.filter((keyword,index)=>keywords.lastIndexOf(keyword)===index)。

.sort((a,b)=>a。

这是最后过滤和排序后的JavaScript保留字列表：

console.log(filteredAndSortedKeywords);。

>Result:['abstract','arguments','await','boolean','break','byte','case','catch','char','class','const','continue','debugger','default','delete','do','double','else','enum','eval','export','extends','false','final','finally','float','for','function','goto','if','implements','import','in','instanceof','int','interface','let','long','native','new','null','package','private','protected','public','return','short','static','super','switch','synchronized','this','throw','throws','transient','true','try','typeof','var','void','volatile','while','with','yield']。

08、清空数组

如果你定义了一个数组，然后你想清空它。通常，你会这样做：

letarray=[1,2,3,4];。

functionemptyArray(){。

array=[];

emptyArray();

但是，这有一个效率更高的方法来清空数组。你可以这样写:。

letarray=[1,2,3,4];。

functionemptyArray(){。

array.length=0;。

emptyArray();

09、拍平多维数组

使用...运算符，将多维数组拍平：

10、从数组中获取最大值和最小值。

可以使用Math.max和Math.min取出数组中的最大小值和最小值：

constnumbers=[15,80,-9,90,-99]。

constmaxInNumbers=Math.max.apply(Math,numbers)。

constminInNumbers=Math.min.apply(Math,numbers)。

console.log(maxInNumbers)。

>Result:90

console.log(minInNumbers)。

>Result:-99

另外还可以使用ES6的...运算符来完成：

constnumbers=[1,2,3,4];。

Math.max(...numbers)。

>Result:4

Math.min(...numbers)。

>>Result:1。

二、对象

在操作对象时也有一些小技巧。

01、使用...运算符合并对象或数组中的对象。

同样使用ES的...运算符可以替代人工操作，合并对象或者合并数组中的对象。

//合并对象

constobj1={

ame:'大漠',

url:'#'

constobj2={

ame:'airen',

age:30

constmergingObj={...obj1,...obj2}。

>Result:{name:"airen",url:"#",age:30}。

//合并数组中的对象

constarray=[

ame:'大漠',

email:'w3cplus@#'。

},

ame:'Airen',

email:'airen@#'。

constresult=array.reduce((accumulator,item)=>{。

return{

...accumulator,。

[item.name]:item.email。

},{})

>Result:{大漠:"w3cplus@#",Airen:"airen@#"}。

02、有条件的添加对象属性

不再需要根据一个条件创建两个不同的对象，以使它具有特定的属性。为此，使用...操作符是最简单的。

constgetUser=(emailIncluded)=>{。

return{

ame:'大漠',

blog:'w3cplus',。

...emailIncluded&&{email:'w3cplus@#'}。

constuser=getUser(true)。

console.log(user)。

>Result:{name:"大漠",blog:"w3cplus",email:"w3cplus@#"}。

constuserWithoutEmail=getUser(false)。

console.log(userWithoutEmail)。

>Result:{name:"大漠",blog:"w3cplus"}。

03、解构原始数据

你可以在使用数据的时候，把所有数据都放在一个对象中。同时想在这个数据对象中获取自己想要的数据。

在这里可以使用ES6的Destructuring特性来实现。比如你想把下面这个obj中的数据分成两个部分：

constobj={

ame:'大漠',

blog:'w3cplus',。

email:'w3cplus@#',。

joined:'2019-06-19',。

followers:45

letuser={},userDetails={}。

({name:user.name,email:user.email,...userDetails}=obj)。

>{name:"大漠",blog:"w3cplus",email:"w3cplus@#",joined:"2019-06-19",followers:45}。

console.log(user)。

>Result:{name:"大漠",email:"w3cplus@#"}。

console.log(userDetails)。

>Result:{blog:"w3cplus",joined:"2019-06-19",followers:45}。

04、动态更改对象的key

在过去，我们首先必须声明一个对象，然后在需要动态属性名的情况下分配一个属性。在以前，这是不可能以声明的方式实现的。不过在ES6中，我们可以实现：

constdynamicKey='email'。

letobj={

ame:'大漠',

blog:'w3cplus',。

[dynamicKey]:'w3cplus@#'。

console.log(obj)。

>Result:{name:"大漠",blog:"w3cplus",email:"w3cplus@#"}。

05、判断对象的数据类型

使用Object.prototype.toString配合闭包来实现对象数据类型的判断：

constisType=type=>target=>`[object${type}]`===Object.prototype.toString.call(target)。

constisArray=isType('Array')([1,2,3])。

console.log(isArray)。

>Result:true。

上面的代码相当于：

functionisType(type){。

returnfunction(target){。

return`[object${type}]`===Object.prototype.toString.call(target)。

isType('Array')([1,2,3])。

>Result:true。

或者：

constisType=type=>target=>`[object${type}]`===Object.prototype.toString.call(target)。

constisString=isType('String')。

constres=isString(('1'))。

console.log(res)。

>Result:true。

06、检查某对象是否有某属性

当你需要检查某属性是否存在于一个对象，你可能会这样做：

varobj={

ame:'大漠'

if(obj.name){

console.l

北大青鸟设计培训：JavaScript编程开发技巧？

1) 使用!!将变量转换成布尔类型。

有时，我们需要检查一些变量是否存在，或者它是否具有有效值，从而将它们的值视为true。对于做这样的检查，你可以使用||（双重否定运算符），它能自动将任何类型的数据转换为布尔值，只有这些变量才会返回false：0，null，""，undefined或NaN，其他的都返回true。我们来看看这个简单的例子：

function Account(cash) {。

this.cash = cash;。

this.hasMoney = !!cash;。

var account = new Account(100.50); 。

console.log(account.cash); // 100.50 。

console.log(account.hasMoney); // true。

var emptyAccount = new Account(0); 。

console.log(emptyAccount.cash); // 0 。

console.log(emptyAccount.hasMoney); // false 。

在这个例子中，如果account.cash的值大于零，则account.hasMoney的值就是true。

2) 使用+将变量转换成数字

这个转换超级简单，但它只适用于数字字符串，不然就会返回NaN（不是数字）。看看这个例子：

function toNumber(strNumber) {。

return +strNumber;。

console.log(toNumber("1234")); // 1234 。

console.log(toNumber("ACB")); // NaN 。

这个转换操作也可以作用于Date，在这种情况下，它将返回时间戳：

console.log(+new Date()) // 1461288164385 。

3) 短路条件

如果你看到过这种类似的代码:

if (conected) {。

login();

那么你可以在这两个变量之间使用&&（AND运算符）来缩短代码。例如，前面的代码可以缩减到一行：

conected && login(); 。

你也可以用这种方法来检查对象中是否存在某些属性或函数。类似于以下代码：

user && user.login(); 。

4) 使用||设置默认值

在ES6中有默认参数这个功能。为了在旧版浏览器中模拟此功能，你可以使用||（OR运算符），并把默认值作为它的第二个参数。如果第一个参数返回false，那么第二个参数将会被作为默认值返回。看下这个例子：

function User(name, age) {。

this.name = name || "Oliver Queen";。

this.age = age || 27;。

var user1 = new User(); 。

console.log(user1.name); // Oliver Queen 。

console.log(user1.age); // 27。

var user2 = new User("Barry Allen", 25); 。

console.log(user2.name); // Barry Allen 。

console.log(user2.age); // 25 。

5) 在循环中缓存array.length。

这个技巧非常简单，并且在循环处理大数组时能够避免对性能造成巨大的影响。基本上几乎每个人都是这样使用for来循环遍历一个数组的：

for (var i = 0; i < array.length; i++) {。

console.log(array[i]);。

如果你使用较小的数组，那还好，但是如果处理大数组，则此代码将在每个循环里重复计算数组的大小，这会产生一定的延迟。为了避免这种情况，你可以在变量中缓存array.length，以便在循环中每次都使用缓存来代替array.length：

var length = array.length; 。

for (var i = 0; i < length; i++) {。

console.log(array[i]);。

为了更简洁，可以这么写：

for (var i = 0, length = array.length; i < length; i++) {。

console.log(array[i]);。

6) 检测对象中的属性

当你需要检查某些属性是否存在，避免运行未定义的函数或属性时，这个技巧非常有用。如果你打算编写跨浏览器代码，你也可能会用到这个技术。例如，我们假设你需要编写与旧版Internet Explorer 6兼容的代码，并且想要使用document.querySelector()来通过ID获取某些元素。 但是，在现代浏览器中，这个函数不存在。所以，要检查这个函数是否存在，你可以使用in运算符。看下这个例子：

if ('querySelector' in document) {。

document.querySelector("#id");。

} else {

document.getElementById("id");。

在这种情况下，如果在document中没有querySelector函数，它就会使用document.getElementById()作为代替。

JavaScript如何调试有哪些建议和技巧附五款有用的调试工具

随着互联网的不断发展，关于JavaScript编程开发语言的使用也被广大程序员掌握。

而今天我们就一起来了解一下，JavaScript编程开发的一些技巧都有哪些。

JSON.stringify我们平时经常会用到JSON对象，比如当我们要实现对象的深拷贝时，我们可以用JSON对象的JSON.stringify和JSON.parse来拷贝一个完全一样的对象，而不会对原对象产生任何引用关系。

在使用localStorage时，也会用到它，因为localStorage只能存储字符串格式的内容，所以，我们在存之前，将数值转换成JSON字符串，取出来用的时候，再转成对象或数组。

参数：value：将要被序列化的变量的值replacer：替代器。

可以是函数或者是数组，如果是一个函数，则value每个属性都要经过这个函数的处理，该函数的返回值就是后被序列化后的值。

如果是一个数组，则要求该数组的元素是字符串，且这些元素会被当做value的键(key)进行匹配，后序列化的结果，是只包含该数组每个元素为key的值。

space：指定输出数值的代码缩进，美化格式之用，可以是数字或者字符串。

如果是数字(大为10)的话，代表每行代码的缩进是多少个空格。

如果是字符串的话，该字符串(多前十个字符)将作显示在每行代码之前。

用Set来实现数组去重在ES6中，引入了一个新的数据结构类型：Set。

而Set与Array的结构是很类似的，且Set和Array可以相互进行转换。

数组去重，也算是一个比较常见的前端面试题了，方法有很多种，这里不多赘述。

下面我们看看用Set和...(拓展运算符)可以很简单的进行数组去重。

用块级作用域避免命名冲突在开发的过程中，通常会遇到命名冲突的问题，就是需要根据场景不同来定义不同的值来赋值给同一个变量。

下面昌平IT培训http://www.kmbdqn.cn/介绍一个使用ES6中的块级作用域来解决这个问题的方法。

函数参数值校验我们知道，在ES6中，为函数增加了参数默认值的特性，可以为参数设定一些默认值，可以让代码更简洁，可维护。

帮助Web前端初学者快速掌握JavaScript技术的方法

浏览器开发者工具

我个人最喜欢Chrome开发者工具。虽然Safari和Firefox无法达到Chrome那么高的标准，但它们也在逐渐改善。在Firefox中，可以将Firebug和Firefox开发者工具组合使用。如果Firefox小组在改进内置开发者工具方面继续表现优异的话，Firebug有一天可能会被淘汰。

先把个人偏好放在一边，你应该能够在目标浏览器中对任意代码进行试验和调试。你的目标浏览器可能包括著名的IE8，也可能不包括。

要熟悉你自己选择的开发者工具。你还可以从IDE（集成开发环境）或者第三方软件获得额外的调试支持。

在各种调试工具中，调试的基础知识是相通的。事实上，我是在90年代从Borland的C开发者环境中学习的调试基础。断点、条件断点、监视与最新版Chrome开发者工具是完全相同的。2000年左右，我在Java中捕获到第一例异常。堆栈跟踪（Stack traces）的概念依然适用，即使JavaScript术语将其称作错误（Error），检查堆栈跟踪仍然和以前一样有用。

有些知识点是前端开发特有的。例如：

DOM检查

DOM断点

调试事件

内存泄露分析

断点

使用debugger语句可以在源代码中增加断点。一旦到达debugger语句，执行中断。当前作用域的上下文出现在控制台中，还有所有的局部变量和全局变量。将鼠标光标移到变量上可以查看变量的值。

在代码中还可以创建条件断点：

JavaScript

if (condition) { debugger;}。

还可以根据自己需要在开发者工具中插入断点和条件断点。在Chrome开发者工具中，在Sources视图中点击行号即可增加断点。如果在断点上点击右键并选择“编辑断点（Edit Breakpoint）”，你还可以增加断点条件。

节点变化的断点

如果你的任务是调试垃圾代码，你可能会有这样的问题：为什么DOM节点在执行过程中发生了改变。Chrome开发者工具提供了一种方便的断点，可用来检测元素树中的节点变化。

在Elements视图中，右键点击一个元素，从右键菜单中选择“Break on…”。

节点变化的断点

DOM断点的类型可能包括：

选定节点树状子目录（sub-tree）中的节点变化，

选定节点的属性发生变化，

节点被删除。

避免记录引用类型

当记录对象或数组时，原始类型的值在引用对象记录中可能会发生变化。当查看引用类型时一定要记住，在记录和查看期间，代码执行可能会影响观测到的结果。

例如，在Chrome开发者工具中执行以下代码：

JavaScript

var wallets = [{ amount: 0 }];setInterval( function() { console.log( wallets, wallets[0], wallets[0].amount ); wallets[0].amount += 100;}, 1000 );。

记录的第二个和第三个属性的值是正确的，第一个属性中对象引用的值是不可靠的。当你第一次在开发者工具中显示这个属性时，amount域的值就已经确定了。无论你对同一个引用关闭并重新打开多少次，这个值都不会变化。

记录参考类型

永远记得你在记录什么。记录原始类型时，使用带断点的watch表达式。如果是异步代码，避免记录引用类型。

表格记录

在一些开发者工具中，你可以用console.table在控制台中记录对象数组。

尝试在你的Chrome开发者工具中执行下列代码：

JavaScript

console.table( [ { id: 1, name: 'John', address: 'Bay street 1' }, { id: 2, name: 'Jack', address: 'Valley road 2.' }, { id: 3, name: 'Jim', address: 'Hill street 3.' } ] );。

输出是非常好看的表格。所有原始类型都立刻显示出来，它们的值反应记录时的状态。也可以记录复杂类型，显示内容为其类型，内容无法显示。因此，console.table只能用来显示具有原始类型值的对象构成的二维数据结构。

XHR断点

有时你可能会遇到错误的AJAX请求。如果你无法立刻确认提交请求的代码，XHR断点可以帮你节省时间。当提交某一特殊类型的AJAX时，XHR断点将会终止代码的执行，并将提交请求的代码段呈现给用户。

在Chrome开发者工具的Sources标签页中，其中一个断点类型就是XHR断点。点击+图标，你可以输入URL片段，当AJAX请求的URL中出现这个URL片段时，JavaScript代码将会中断。

事件监听器断点

Chrome开发者工具可以捕获所有类型的事件，当用户按下一个键、点击一下鼠标时，可以对触发的事件进行调试。

异常时暂停

Chrome开发者工具可以在抛出异常时暂停执行JavaScript代码。这可以让你在Error对象被创建时观察应用的状态。

异常时暂停

代码片段

Sources标签页左侧面板上有一个代码片段（Snippet）子标签页，可用于保存代码片段，帮你调试代码。

如果你坚持使用控制台调试，反复写相同的代码，你应该将你的代码抽象成调试片段。这样的话，甚至还可以把你的调试技巧教给你的同事。

Paul Irish发布过一些基本的调试代码片段，例如在函数执行前插入断点。审查这些代码片段，并在网上搜索其他代码片段，这是很有价值的。

在函数执行前插入断点

如果你可以得到函数调用的源代码，你还可以在函数调用前插入断点来终止函数的执行。如果你想调试f函数，用debug(f)语句可以增加这种断点。

Unminify最小化代码

（译者注：unminify 解压缩并进行反混淆）

尽可能使用 source map。有时生产代码不能使用source map，但不管怎样，你都 不应该直接对生产代码进行调试。

（译者注：sourcemap 是针对压缩合并后的web代码进行调试的工具）

如果没有source map的话，你最后还可以求助于Chrome开发者工具Sources标签页中的格式化按钮（Pretty Print Button）。格式化按钮{}位于源代码文本区域的下方。格式化按钮对源代码进行美化，并改变行号，这使得调试代码更加方便，堆栈跟踪更加有效。

格式化按钮只有在不得已时才会使用。从某种意义上来说，丑代码就是难看，因为代码中的命名没有明确的语义。

DOM元素的控制台书签

Chrome开发者工具和Firebug都提供了书签功能，用于显示你在元素标签页（Chrome）或HTML标签页（Firebug）中最后点击的DOM元素。如果你依次选择了A元素、B元素和C元素，

$0 表示C元素

$1 表示B元素

$2 表示A元素

如果你又选择了元素D，那么$0、$1、$2和$3分别代表D、C、B和A。

访问调用栈

JavaScript

var f = function() { g(); } var g = function() { h(); }var h = function() { console.trace('trace in h'); }f();。

Chrome开发者工具中的Sources标签页也在Watch表达式下面显示调用栈。

性能审查

性能审查工具通常是很有用的。这些工具可以用于防止内存泄露，还可以检测到你的网站哪里需要优化。由于这些工具并不了解你的产品，你可以忽略其某些建议。通常来说，性能分析工具能够有效范围，可以使你的网站显著优化。

审查工具举例：

Chrome开发者工具的Audit标签页。

YSlow

熟能生巧

你可能熟悉某些调试技巧，其他技巧也会帮你节省不少时间。如果你开始在实践中使用这些技巧，我建议你几周之后重新阅读本文。你将会惊奇地发现，你的关注点在几周内就发生了变化。

五个常用的js调试工具

JavaScript被称作以原型(prototype)为基础的语言。这种语言有很多特色，比如动态和弱类型，它还有一等函数（first class function）。另一个特点是它是一个多范型(multi-paradigm)语言，支持面向对象、声明式、函数式的编程风格。

JavaScript最初被用作客户端语言，浏览器实现它用来提供增强的用户接口。JavaScript在很多现代的网站和Web应用程序中都有应用。JavaScript的一个很棒的功能也很重要，就是我确实可以用它来提高或改善网站的用户体验。JavaScript也可以提供丰富的功能和交互的组件。

JavaScript在这技术高速发展的同时变得非常受欢迎。因为受欢迎JavaScript也改进了许多，修改JavaScript脚本有很多事要做。这次我们为开发者带来了几个非常有用的JavaScript调试工具。

1）Drosera

可以调试任何WebKit程序，不仅仅是Safari浏览器。

2)Dragonfly

源代码视图有语法高亮，可以设置断点。强大的搜索功能，支持正则表达式。

3）Getfirebug

可以在任何网页编辑、调试和实时监视CSS、HTML和JavaScript。

4)Debugbar

5)Venkman

Venkman是Mozilla的JavaScript调试器名称。它旨在为以Mozilla为基础的浏览器（Firefox, Netscape 7.x/9.x and SeaMonkey）提供一个强大的JavaScript调试环境。

原文地址：http://www.qianchusai.com/fondulif.html