这篇文章主要介绍了关于使用javascript控制台如何改进工作的流程,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
作为Web开发人员,很有必要了解如何调试代码。后台开发我们经常使用外部库来记录日志,并在某些情况下格式化显示日志,前端我们会使用断点和控制台,但是我们浏览器的控制台比我们想象的要强大得多。
当我们考虑控制台时,首先想到的是console.log,对吧?但是它比我们想像中使用的方法多得多。现在我们来看一下如何充分利用控制台,我将为您提供一些技巧,使这些方法更具可读性
JavaScript控制台是现代浏览器中的内置功能,它在类似shell的界面中带有开箱即用的开发工具。它允许开发人员:
查看网页上发生的错误和警告的日志。
立即学习“Java免费学习笔记(深入)”;
使用JavaScript命令与网页交互。
调试应用程序并直接在浏览器中遍历DOM。
检查和分析网络活动
基本上,它使您能够在浏览器中编写,管理和监控JavaScript。
Console.log,Console.error,Console.warn和Console.info
这些可能是最常用的方法。您可以将多个参数传递给这些方法。每个参数都在由空格分隔的字符串中进行计算和连接,但是对于对象或数组,您可以在它们的属性之间导航。
![1531536883180589.png 2401779713-5b4951629b436_articlex[1].png](https://img.php.cn//upload/image/184/888/103/1531536883180589.png)
在检查代码逻辑和流程时我们可能会使用很多的console.log()来检测,但是你会发现控制台打印出来的非常多。此方法允许您在可折叠的组下对一系列console.log(以及错误信息等)进行分组。语法非常简单:只需console.log在之前输入我们想要分组的所有内容console.group()(或者console.groupCollapsed()如果我们希望它默认关闭)。然后console.groupEnd()在末尾添加一个关闭组。![1531536895315947.png 1762661918-5b495162bba1d_articlex[1].png](https://img.php.cn//upload/image/739/572/678/1531536895315947.png)
![1531536902179703.png 3949379758-5b495162653a7_articlex[1].png](https://img.php.cn//upload/image/773/509/514/1531536902179703.png)
如果您是新用户,请直接将本程序的所有文件上传在任一文件夹下,Rewrite 目录下放置了伪静态规则和筛选器,可将规则添加进IIS,即可正常使用,不用进行任何设置;(可修改图片等)默认的管理员用户名、密码和验证码都是:yeesen系统默认关闭,请上传后登陆后台点击“核心管理”里操作如下:进入“配置管理”中的&ld
0
自从我发现console.table我的生活都发生了改变。在一个内部显示JSON或非常大的JSON数组console.log是一种不好的体验。这console.table允许我们在一个漂亮的表中可视化这些结构,我们可以在其中命名列并将它们作为参数传递。
![1531536909301281.png 2519782439-5b4951624400f_articlex[1].png](https://img.php.cn//upload/image/441/974/878/1531536909301281.png)
非常好,在调试中非常有用:
![1531536917967296.png 566971357-5b495161e5862_articlex[1].png](https://img.php.cn//upload/image/903/838/837/1531536917967296.png)
Console.count,Console.time和Console.timeEnd
对于需要调试的每个开发人员来说,这三种方法都是瑞士军刀。该console.count计数和输出是的次数count()已被调用在同一行,并用相同的标签。该console.time开始用指定为输入参数的名称定时器,可以运行多达10,000个特定网页上同时定时器。启动后,我们使用调用来console.timeEnd停止计时器并将经过的时间打印到控制台。
![1531536969745363.png 3280010134-5b495161db5f2_articlex[1].png](https://img.php.cn//upload/image/354/870/251/1531536969745363.png)
输出将如下所示:
![1531536943467824.png 3818912015-5b495161e8f67_articlex[1].png](https://img.php.cn//upload/image/530/827/914/1531536943467824.png)
这些方法只是从调用它的代码位置,打印堆栈跟踪。想象一下,您正在创建一个JS库,并希望通知用户生成错误的位置。在这种情况下,这些方法非常有用。该console.assert是喜欢console.trace,但是只打印条件不符合的。
![1531536977297579.png 3814615792-5b495161dcfe3_articlex[1].png](https://img.php.cn//upload/image/752/769/283/1531536977297579.png)
正如我们所看到的,输出正是React(或任何其他库)在生成异常时向我们展示的内容。
![1531536987354423.png 3361322073-5b495161b3b8d_articlex[1].png](https://img.php.cn//upload/image/675/381/261/1531536987354423.png)
以上就是使用JavaScript控制台如何改进工作的流程的详细内容,更多请关注php中文网其它相关文章!
java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号