console 进行 JS 调试的小技巧和手机端vconsole调试

console JS 调试的小技巧

基础用法

console.log(‘Hello World!’);
console.info(‘Something happened…’);
console.warn(‘Something strange happened…’);
console.error(‘Something horrible happened…’);

console.trace()

获取带有记录数据的堆栈跟踪。堆栈的相关信息。

console.time() && console.timeEnd()

测试性能问题。console.time()开始计算时间。然后使用console.timeEnd()进行打印。

console.memory

如果正在寻找一个隐匿的内存泄漏。可以理由console.memory属性检查你的堆状态 console.log(console.memory);

console.profile(‘profileName’) & console.profileEnd(‘profileName’)

从代码中启动和结束浏览器性能工具 - “performance profile”

console.count(“STUFF I COUNT”)

计算代码被读取的次数。很实用的。

console.dir

直接将该DOM结点以DOM树的结构进行输出，可以详细查对象的方法等等

console.assert(false, “Log me!”)

console.assert(condition, msg)对输入的表达式进行断言，只有为false才会输出。

console.group(‘group’) & console.groupEnd(‘group’)

组织你的日志。使用控制台组，将控制台日志组织在一起，每个分组在层次结构中创建另一个级别。调用groupEnd()减少一个级别(回到上一个层级)。

console.table()

console.table()打印出表格。将数组打印为表格更清晰。

vconsole手机端看日志

特性

查看 console 日志
查看网络请求
手动执行 JS 命令行

使用方法

1.到官网下载最新js文件[<font size=3 color=#111>http://show.webdevs.cn/</font>](https://github.com/Tencent/vConsole/releases/tag/v3.1.0)
2.在页面中引入
1
2
3
4
5 <script src="path/to/vconsole.min.js"></script>
<script>
console.log('Hello world');
// 然后点击右下角 vConsole 按钮即可查看到 log
</script>