javascript简单的调试技巧
来源:互联网 发布:linux arp防火墙关闭 编辑:程序博客网 时间:2024/06/05 15:09
1、debugger
在你的js代码中,添加debugger; 则当代码执行到这一行的时候,会自动停下,对于调试js来说是比较方便的,这意味着你不必浏览器打开并等待其执行完一遍以后,才在 开发者工具页面的source出,为代码打断点。
2、console.table()
json是常作为前后台交互的一种数据格式,当json中的信息比较复杂(如对象内还嵌套了其他的对象的时候),直接使用console.log()进行打印输出,似乎不是那么的直观,这个时候就可以使用console.table()。
这个方法可以将json格式的内容,转化为表格的形式,这样也便于查看,例如有如下一段代码:
<script type="text/javascript"> var obj = { "name":"mike", "age":18, "school":"a", "grade":{ "math":"88", "english":"90" } } console.table(obj);</script>
输出的结果(有的浏览器可能不支持这样的打印),在火狐浏览器上,
得到的记过如上。
3、console.time() & console.timeEnd()
当实现的功能已经可以满足基本的需求,而性能方面的结果还不尽如人意,就需要知道耗时是出在哪个地方了。使用 console.time() 与 console.timeEnd() 这2个函数,可以打印出期间的代码执行耗时情况。
console.time("time1");for (var i = 1000000000; i >= 0; i--) { // 不做任何处理}console.timeEnd("time1");
在控制台上可以看到,执行1E次的耗时为1.8s(具体机器耗时可能不同);
4、美化调试的信息
控制台调试信息的输出是一件十分常见的事情,有的时候,对于调试信息增加颜色样式可能更加显眼一些
console.todo=function(msg){ console.log('%c %s %s %s ','color:white;font-weight:bold;background-color:black;', '-',msg,'-'); }console.todo("hello");
执行后在控制台可以看到如下的结果
在console.log()
中,%c
可以设置自定义的样式,使用的属性类似css,%s
用来设置字符,%i
用来设置数字
还有其他一些调试的技巧,但很多都和浏览器有关,在浏览器的开发者工具上使用。因此在此不进行赘述了。
阅读全文
0 0
- javascript简单的调试技巧
- javascript的调试技巧
- 调试javascript的技巧
- 几个简单的JavaScript技巧
- javascript :简单的小技巧
- 最全面的JavaScript调试技巧总结
- 关于JavaScript调试的十来个小技巧
- 10+ 实用的 JavaScript 调试小技巧
- 10+ 实用的 JavaScript 调试小技巧
- 10+ 实用的 JavaScript 调试小技巧
- 最全面的JavaScript调试技巧总结
- JavaScript在浏览器上的调试技巧
- 最全面的JavaScript调试技巧总结
- 最全面的JavaScript调试技巧总结
- chrome调试的JavaScript官方技巧
- 关于JavaScript调试的十来个小技巧
- 最全面的JavaScript调试技巧总结
- 简单的vs内存泄露调试技巧
- 云平台监听及性能优化
- 面试若干总结
- 云星数据---Scala实战系列(精品版)】:Scala入门教程008-Scala数组详解007
- 第十三周项目二-线性表的折半查找
- IJKPlayer 一句话搞定简单视频播放
- javascript简单的调试技巧
- CentOS7搭建Kodexplorer文件资源管理器
- raspberry pi system build
- 基数排序
- web 图片加载慢 影响打开速度 图片后加载 滚动加载
- LruCache源码解析
- Spring boot应用启动原理分析
- Android一个Activity套四个Fragment代码
- estore简版商城