代码执行器 hook console.log 方案

这个需求是我在做代码执行器技术文中直接执行代码，我实现了时遇到的问题，在代码执行器中需要把 console.log 输出到一个自定义的视图上。做这个需求需要解决两个问题：

1、能够接收到 console.log 要输出的内容，也就是获取 console.log(args) 的参数 args；

2、不影响原有 console.log 的正常功能；

console 是一个全局对象，它包含了很多方法，比如：

console.log();
console.error();

其实 console.log 就是一个函数，它的用法如下：

// 可以输出多个对象
console.log(obj1 [, obj2, ..., objN]);
console.log(msg [, subst1, ..., substN]);

既然是个函数，直接重写这个函数即可。

const reDefineConsoleLog = function (args) {const orgLog = console.log;const calls = [];console.log = (...args) => {// 把要打印的参数转换成字符串，显示到视图上let logs = [];for(let i = 0; i < args.length; i++) {let aLog = args[i];let logStr = JSON.stringify(aLog);if (!logStr) {if (typeof aLog === 'function') {// function can not parse to jsonlogStr = aLog.constructor;}}logs.push(logStr);}let retLog = logs.join(' , ');orgLog(retLog);};
};

但是我想要的效果是能够把字符串、对象、数组、函数等对象转换成字符串，这样在 UI 上就能够把内容显示出来。这个实现不同于浏览器里的实现。

在浏览器中打印一个对象时，它会显示成 Object >，当点击的时候才真正的获取这个对象的值。而我想要的效果其实是直接显示成字符串。最后干脆直接使用 JSON.stringfy 函数把一个对象转换成字符串，这样符合我的预期。效果如下：

这个方案不一定是最完美的，如果你有更好的方案，欢迎留言告诉我。大家加油！

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

代码执行器 hook console.log 方案相关推荐

三行代码隐藏所有console.log
我们基本上使用console.log()在JS项目中检查代码是否正常工作,或者debugger代码中的错误或问题.没有日志很费时,也很难找到问题. 但是这些日志只供开发人员使用,您不想向最终用户显示这 ...
vue-cli3.0 生产包去除console.log
目前负责的公众号又迭代了一个版本,之前打生产包,配置总是和测试包搞混,所以使用了vue-cli3.0的环境变量来控制配置. 但是又发现了一个新问题,写代码的过程中写了很多console.log 来调试 ...
javascript 和 jq 的调试用console.log() 函数
对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻断javascript程序的执行,从而造成副作用:而conso ...
Android中获取WebView加载的html中console.log输出的内容
场景 Android中使用WebView加载本地html并支持运行JS代码和支持缩放: Android中使用WebView加载本地html并支持运行JS代码和支持缩放_BADAO_LIUMANG_QI ...
vuecli3+webpack4优化实践（删除console.log和配置dllPlugin）
本文主要介绍如何在vuecli3生成的项目中,打包输出时删除console.log和使用dllplugin,并记录了配置过程中踩到的坑. (本人水平有限-希望大家多多指出有误的地方) 一.生产环境中删 ...
log解析工具 px4_console.log(console.log) = ?
在开始今天的内容之前,先想一下 console.log(console.log) 的结果是啥. 前面有一篇文章别担心把 console 带到线上介绍了关于 console 在线上不打印的操作,今天 ...
javascript教程：console.log 详解
对应WEB程序员,console.log 可以说是神器,极大地方便了程序开发.程序猿:学习了,用Console写日志比alert方便多了. console.log(object[, object, . ...
扩展：js控制台输出，除了 console.log还有哪些？
介绍: js的console你可以在firefox的firedbug或者ie和google的f12调试模式下看到,这些主流浏览器的调试模式的控制可以输出一些信息,你的一些js代码测试可以直接在cons ...
JavaScript console.log导致错误：“不赞成在主线程上使用同步XMLHttpRequest…”
本文翻译自:JavaScript console.log causes error: "Synchronous XMLHttpRequest on the main thread is de ...

代码执行器 hook console.log 方案

代码执行器 hook console.log 方案相关推荐

最新文章

热门文章