Показать консоль браузера на странице HTML - PullRequest
Новая
       22

Показать консоль браузера на странице HTML

1 голос
/ 17 июня 2020

Edit: я нашел код, который использует Stack Overflow: https://github.com/gh-canon/stack-snippet-console

Я нашел кучу ответов, которые показывают, как вывести консоль на веб-страницу, но я Я пытаюсь сделать так, чтобы сообщения также записывались в консоль. По иронии судьбы, если вы запускаете сниппеты в Stack Overflow, они делают то, что я пытаюсь сделать. 

// This causes a stack overflow
var native = window;
native.console = {
    log: function(message){
        $('ul.messages').append('<li>Log: ' + message + '</li>');
        console.log(message);
    },
    error: function(message){
        $('ul.messages').append('<li>Error: ' + message + '</li>');
        console.error(message);
    },
    warn: function(message){
        $('ul.messages').append('<li>Warn: ' + message + '</li>');
        console.warn(message);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="messages"></ul>

Ответы [ 2 ]

3 голосов
/ 17 июня 2020

Я думаю, вам просто нужно кэшировать исходные методы console и вызывать их из кеша - теперь он вызывает ваш зарезервированный log, что вызывает бесконечную рекурсию (и, следовательно, переполнение стека): 

$(document).ready(function(){
    console.log('You should know...');
    console.error('Something went wrong...');
    console.warn('Look out for this...');
})


// This should work
var native = window;
var originalConsole = native.console;
native.console = {
    log: function(message){
        $('ul.messages').append('<li>Log: ' + message + '</li>');
        originalConsole.log(message);
    },
    error: function(message){
        $('ul.messages').append('<li>Error: ' + message + '</li>');
        originalConsole.error(message);
    },
    warn: function(message){
        $('ul.messages').append('<li>Warn: ' + message + '</li>');
        originalConsole.warn(message);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>messages</h3>
<ul class="messages"></ul>
1 голос
/ 17 июня 2020

Вы можете создать функцию-оболочку, которая принимает функцию и выводит вашу измененную функцию. 

const wrapper = (fn, name) => {
  return function(msg) {
    $('ul.messages').append(`<li>${name}: ${msg}</li>`);
    fn(msg);
  };
}

$(document).ready(() => {
  window.console.log = wrapper(console.log, "Log");
  window.console.warn = wrapper(console.warn, "Warn");
  window.console.error = wrapper(console.error, "Error");
});
...