14个你可能不知道的JavaScript调试技巧

9. 樊篱不相干代码

如今，我们经常在应用中惹人几个库或框架。个中大年夜多半都经由优胜的测试且相对没出缺点。然则，调试器仍然会进入与调试义务无关的文件。解决筹划是樊篱不须要调试的脚本。当然可以包含你本身的脚本。在这篇文┞仿中浏览更多关于调试不相干代码(https://raygun.com/blog/javascript-debugging-with-black-box/)

10. 在复杂的调试过程中寻找重点

在更复杂的调试中，我们有时欲望输出很多行。可以做的就是保持优胜输出构造，应用更多控制台函数，例如, console.log, console.debug, console.warn, console.info, console.error等等。然后，可以在控制台中快速浏览。但有时刻，某些JavaScrip调试信息并不是你须要的。如今，可以本身美化调试信息了。在调试JavaScript时，可以应用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’);

输出：

例如：

有时应用浏览器更轻易。

11. 不雅察特定函数的调用及参数

在Chrome控制台中，可以不雅察特定的函数。每次调用该函数，就会打印出传入的参数。

var func1 = function(x, y, z) { 
//.... 
};

输出：

在console.log()中，可以用%s设置字符串，%i设置数字，%c设置自定义样式等等，还有很多更好的console.log()应用办法。如不雅应用的是单页应用框架，可认为视图(view)消息创建一个样式，为模型(models)，集合(collections)，控制器(controllers)等创建另一个样式。也许还可以像wlog，clog和mlog一样发挥想象力!

这是查看传入函数参数的好办法。然则，如不雅控制台提示我们形参的数量就更好了。在膳绫擎的例子中，func1期望3个参数，然则只有传入了2个参数。如不雅在代码中没有处理这个参数，就很可能掉足。

12. 在控制台中快速拜访元素

控制台中比querySelector更快的办法是应用美元符号，$('css-selector')将返回CSS选择器的第一个匹配项。$$('css-selector')将返回所有匹配项。如不雅多次应用一个元素，可以把它保存为一个变量。

很多开辟人员应用Postman查看ajax请求。Postman真的很优良。但打开一个新的窗口，写入请求对象，然后再来测试它们，显得很麻烦。

当你应用浏览器查看时，如不雅请求一个暗码验证页面，不须要担心身份验证的cookie。下面看，在Firefox中若何编辑并从新发送请求。

打开控制台并切换到network选项卡。右击所需的请求，然后选择编辑并从新发送。如今可以改变任何想要的改的。更改标题并编辑参数，然后点击从新发送。

下面我用不合的属性提议的两次请求：

14. 中断节点更改

DOM是一个有趣的器械。有时刻它会改变，你并不知道为什么。然则，当您调试JavaScript时，Chrome可以在DOM元素产生更改时暂停。你甚至可以监督它的属性。在Chrome控制台中，右击该元素，然后在设置中选择中断：

console.time('Timer1'); 	
			 3/4   首页 上一页 1 2 3 4 下一页 尾页	
			

　　推荐阅读
　　机房配电柜、配电箱在安装时应该注意哪些“禁忌”
            
            
                
                    
                
                媒介：机房配电柜配电箱经常会出现一些问题，而大年夜多半问题的根源都是在安装过程中操作欠妥，导致问题频发>>>详细阅读


本文标题：14个你可能不知道的JavaScript调试技巧
地址：http://www.17bianji.com/lsqh/38584.html
 1/2    1