javascript

首先得强调一下调试前端javascript的基本命令：console.log(obj)，用来在浏览器控制台输出对象。其实除了console.log，还有各种console.error、console.warn、console.info、console.assert等命令。console代表的是浏览器控制台，firefox与chrome的console命令大部分是通用的，更详细的命令介绍可以参考：Chrome Console API Reference （ps：在旧版本的ie，比如ie9，如果在js代码中使用了console.log，那么只有在打开F12，即ie的开发者工具时候，才能识别console对象。如果没有打开ie的开发者工具，会导致脚本无法识别console，js代码无法执行😰   @20171029） 原文地址：10+ 实用的 JavaScript 调试小技巧   1. debugger 除了console.log，debugger就是另一个我很喜欢的快速调试的工具，将debugger加入代码之后，Chrome会自动在插入它的地方停止，很像C或者Java里面打断点。你也可以在一些条件控制中插入该调试语句，譬如： if (thisThing) { debugger; } 2. 将Objects以表格形式展示 有时候我们需要看一些复杂的对象的详细信息，最简单的方法就是用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有一个非常诱人的功能就是能够模拟不同设备的尺寸，在Chrome的Inspector中点击toggle device mode按钮，然后就可以在不同的设备屏幕尺寸下进行调试咯： 4. 在Console快速选定DOM元素 在Elements选择面板中选择某个DOM元素然后在Console中使用该元素也是非常常见的一个操作，Chrome Inspector会缓存最后5个DOM元素在它的历史记录中，你可以用类似于Shell中的$0等方式来快速关联到元素。譬如下图的列表中有‘item-4′, ‘item-3’, ‘item-2’, ‘item-1’, ‘item-0’这几个元素，你可以这么使用： 5. 获取某个函数的调用追踪记录 JavaScript框架极大方便了我们的开发，但是也会带来大量的预定义的函数，譬如创建View的、绑定事件的等等，这样我们就不容易追踪我们 自定义函数的调用过程了。虽然JavaScript不是一个非常严谨的语言，有时候很难搞清楚到底发生了啥，特别是当你需要审阅其他人的代码的时候。这时 候console.trace就要起作用咯，它可以帮你进行函数调用的追踪。譬如下面的代码中我们要追踪出car对象中对于funcZ的调用过程： var car; var func1 = function() { func2(); } var func2 = function() { func4(); } var func3 = function() { } var func4 = function() { car = new Car(); car.funcX(); } var Car = function() { this.brand = ‘volvo’; this.color = ‘red’; this.funcX = function() { this.funcY(); } this.funcY = function() { this.funcZ(); } this.funcZ = function() { console.trace(‘trace car’) } } func1(); 这边就可以清晰地看出func1调用了func2，然后调用了func4，func4创建了Car的实例然后调用了car.funcX。 6. 格式化被压缩的代码 有时候在生产环境下我们发现了一些莫名奇妙的问题，然后忘了把sourcemaps放到这台服务器上，或者在看别人家的网站的源代码的时候，结果就 看到了一坨不知道讲什么的代码，就像下图。Chrome为我们提供了一个很人性化的反压缩工具来增强代码的可读性，大概这么用： 7. 快速定位调试函数 当我们想在函数里加个断点的时候，一般会选择这么做： 在Inspector中找到指定行，然后添加一个断点 在脚本中添加一个debugger调用 不过这两种方法都存在一个小问题就是都要到对应的脚本文件中然后再找到对应的行，这样会比较麻烦。这边介绍一个相对快捷点的方法，就是在console中使用debug(funcName)然后脚本会在指定到对应函数的地方自动停止。这种方法有个缺陷就是无法在私有函数或者匿名函数处停止，所以还是要因时而异： var func1 = function() { func2(); }; var Car = function() { this.funcX = function() { this.funcY(); } this.funcY = function() { this.funcZ(); } } var car = new Car(); 8. 禁止不相关的脚本运行 当我们开发现代网页的时候都会用一些第三方的框架或者库，它们几乎都是经过测试并且相对而言Bug较少的。不过当我们调试我们自己的脚本的时候也会一不小心跳到这些文件中，引发额外的调试任务。解决方案呢就是禁止这部分不需要调试的脚本运行，详情可见这篇文章：: javascript-debugging-with-black-box。 9. 在较复杂的调试情况下发现关键元素 在一些复杂的调试环境下我们可能要输出很多行的内容，这时候我们习惯性的会用console.log, console.debug, console.warn, console.info, console.error这些来进行区分，然后就可以在Inspector中进行过滤。不过有时候我们还是希望能够自定义显示样式，你可以用CSS来定 义个性化的信息样式： console.todo = function(msg) { console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘); } console.important = function(msg) { console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘); } console.todo(“This is something that’ s need to be fixed”); console.important(‘This is an important message’); 在console.log()中你可以使用%s来代表一个字符串 , %i 来代表数字， 以及 %c 来代表自定义的样式。 10.…

1. 原始类型和对象类型 javascript的数据类型分为两类，原始类型（primitive type）和对象类型（object type）。原始类型包括javascript已定义的数值、字符串、布尔值。对象类型包括用户定义的对象以及函数（对，函数在javascript中其实也是一种对象）。原始类型的赋值是传值赋值，对象类型的赋值是引用赋值。在下面的例子可以看出来。 var n = 10; var m = n; // 传值赋值，m的值等于n m = 13; console.log('n = %d, m = %d.', n, m); // n = 10, m = 13. var onePerson = {}; // 新建一个空对象 onePerson.fullname = 'HarryPotter'; // 为对象新建属性fullname onePerson.age = 21; // 为对象新建属性age onePerson.talk = function () { console.log('Hi, my name is %s. My age is %d.', this.fullname, this.age); } // 为对象新建方法talk，在对象的方法中，this指向该对象 var otherPerson = onePerson; // 对象赋值是引用赋值，otherPerson就是onePerson，二者共同指向一块内存地址。 otherPerson.fullname = 'Kate'; // 等同于修改了onePerson.fullname onePerson.talk(); // Hi, my name is Kate. My age is 21. 2. 将函数作为构造函数 javascript的函数主要有三种调用方式。作为函数直接调用，作为对象的方法调用，作为对象的构造函数调用。 function Person() { global_firstname = 'funway'; // 定义一个全局变量，无法被对象继承 var local_lastname = 'wang'; // 定义一个局部变量，无法被对象继承 this.fullname = 'funway.wang'; // 定义一个继承属性，可以被对象继承 console.log('In Person function as a constructor.'); } Person(); // 直接作为函数调用，打印 "In Person function as a constructor." AA = new Person(); // 作为构造函数调用, 同样会打印 "In Person function as a constructor." console.log(global_firstname); // "funway" console.log(AA.global_firstname); // undefined console.log(AA.local_lastname); // undefined console.log(AA.fullname); // "funway.wang" 上面的代码中，我们通过将Person函数作为构造函数创建了一个新的对象AA，用C++的面向对象来看，函数名Person就相当于一个类名。 实际上，Person作为一个javascript函数，默认有一个prototype属性。prototype属性值是一个对象，我们叫做原型对象。当函数作为构造函数被调用时候，该prototype原型对象就会被当作新对象的原型，所有新创建的对象均有一个__proto__对象，指向该原型对象。另外，prototype原型对象内部有一个constructor属性，指向构造函数Person，这个constructor负责调用构造函数对新对象进行初始化。可以这么说，AA = new Person() 相当于执行了以下三步： AA = {}; // 创建空对象 AA.__ptoto__ = Person.prototype; 执行AA.__proto__.constructor指向的函数对AA进行初始化，创建AA对象的属性 上图中的Object与Function这俩个底层的概念这里就不多解释了，javascript的Object与Function的关系看到哭。。。＝。＝＃ 3. prototype原型，原型链与动态继承 从上面可以看出，由Person构造函数构造的对象，都有一个默认的__proto__属性指向Person.prototype，那么我对Person.prototype的修改都会实时的传递到所有Person对象上。另外，对象可以直接通过.属性名／.方法名访问到其原型对象的属性或者方法，前提是该对象本地没有重名的属性/方法。这就是javascript动态继承的基础。而原型链的意义就是，要访问一个对象x的属性/方法的时候，会先查找对象本地空间，没有，则查找x.__proto__空间，然后再x.__proto__.__proto__。这样递归直到找到所要的属性/方法或到达底层的Object基本对象。 function Person(name) { this.name = name? name : 'noname'; } bill = new Person('bill'); // 创建新对象 kate = new Person('kate'); // 创建新对象 console.log(bill.name); // "bill" console.log(bill.age); // undefined，bill对象没有该属性 Person.prototype.age = 18; // 增加age属性，所有的Person对象都自动拥有该属性。 Person.prototype.sayHi = function() { console.log('hi, my name is %s, i am %d yeas old.', this.name, this.age); } // 增加sayHi方法，所有的Person对象都自动拥有该方法 bill.sayHi(); // "hi, my name is bill, i am 18 yeas old." kate.sayHi(); // "hi, my name is kate, i am 18 yeas old." bill.age = 25; // 给bill对象添加了一个本地属性age，之后bill.age将不再访问bill.__proto__.age console.log(bill.age); // 25，访问的是bill.age（不会再跳进去访问bill.__proto__.age了）…