chrome调试js，一个变量出现了两个不同的值

来源：蜘蛛抓取(WebSpider) 时间：2021-07-18 09:22 标签：

由于最近需要搞一个自定义表单需要调试很多js，因此转载一篇技术文章

, console.error等等然后，可以在控制台中快速浏览但有时候，某些JavaScrip调试信息并不是你需要的现在，可以自己美化调试信息了在调试JavaScript时，可以使用CSS并自定义控制台信息： 

 

 
 

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

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

 

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

 
 

 这是查看传入函数参数的好方法但是，如果控制台提示我们形参的數目就更好了在上面的例子中，func1期望3个参数但是只有传入了2个参数。如果在代码中没有处理这个参数就很可能出错。

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

 

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

 
 

 许多开发人员使用Postman查看ajax请求。Postman真的很优秀但打开一个新的窗口，写入请求对象然后再来测试它们，显得很麻烦囿时使用浏览器更容易。当你使用浏览器查看时如果请求一个密码验证页面，不需要担心身份验证的cookie下面看，在Firefox中如何编辑并重新发送请求打开控制台并切换到network选项卡。右击所需的请求然后选择编辑并重新发送。现在可以改变任何想要的改的更改标题并编辑参数，然后点击重新发送下面我用不同的属性发起的两次请求：
 
 

 
 

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

我要回帖

 

随机推荐