Как дублировать на сайт всю информацию с консоли браузера?

Я делаю сайт на React JS.
Необходимое требование, чтобы выводились логи браузера (все абсолютно: ошибки, предупреждения, cors ошибки и т.д.) в модалке на сайте, в реальном времени.
Это требуется при невозможности открыть консоль, когда сидим на сайте через телефоны, планшеты

Основной упор необходимо сделать на cors ошибки

Дополнительно:

Содержание

1 Дополнительно:
2 Ответы:

Ну..
Для ошибок оборачивать всё в try catch, очевидно.
Для предупреждений это конечно же не сработает.
Для console.log() и тд можно сделать "декоратор".

Будет ли это работать для выбрасываемых самим браузером сообщений - надо пробовать.

https://stackoverflow.com/questions/6604192/showin...

Вадим, Да, в try - catch обернул всё, что можно. Эти ошибки я могу отобразить.
А вот браузерные и т.п. - которые не могут быть обёрнуты или отловлены в try-catch - уже не знаю как.

LookyLoos, ну мой эксперимент показывает что даже если сделать декоратор над console.methodName то браузерные выводы он перехватывать не будет. То есть cors не отловится, например.

Так что без прослойки, мне кажется, это не реализуемо на просто js

Вадим, Эх, жаль. А что за прослойка?

LookyLoos, Ну какая именно прослойка это уже не ко мне. Что-то, что отлавливает сетевую активность, логи браузера и даёт до этого доступ.
Ещё можно посмотреть в сторону service worker

Вадим, Понятно, спасибо за уделённое время) Буду искать что-нибудь подобное

Ответы:

К чему эти извращения?
https://developer.chrome.com/docs/devtools/remote-...

LookyLoos, ну и для ios это тоже возможно.
Начать можно отсюда:
https://medium.com/@haroonabbasi/remote-debugging-...
https://github.com/HimbeersaftLP/ios-safari-remote...
Требования такие, ну и уже стало очень интересно - как это можно осуществить без отладок с подключением к компьюетру
LookyLoos, Странные требования. Скорее всего вы просто не знали об удаленной отладке, и не пробовали её.
Но в принципе, такие требования могут быть. Например на codepen реализована собственная веб-консоль. Я не знаю как именно там сделано, но вы можете просто переопределить системный объект console.

https://habr.com/ru/articles/116852/
Сергей delphinpro, Интересная статья, почитаю

Если нужно прям что-то своё, уникальное, то вам достаточно переинициализировать console.log своей функцией, например console.log = () => {}, ну и по такой же схеме console.error и т.д.

А если вам нужно только для отладки, то рекомендую https://github.com/liriliri/eruda, это эмулятор dev tools

Ошибки вы сможете перехватить в window.onerror например, но только те которые не обвёрнуты в try catch, тут нужно будет самостоятельно обрабатывать каждый try catch

Хм, на сколько мне известно, window.onerror показывает ошибки только, если html блок не удалось отобразить. Идея интересна, но к сожалению не отлавливает то, что мне нужно.
console.log = () => {} - тоже прикольная тема, но при условии, если в коде мы сами пытаемся обратиться к console.log.
Только не "переинициализировать", а переопределить)
LookyLoos, window.onerror показывает все ошибки, которые ни кто не обрабатывает, https://learn.javascript.ru/exception#poslednyaya-..., правда CORS не отловит, тут вручную придётся

import React, { useEffect, useState } from 'react';  const ConsoleLog = () =&gt; {   const [logs, setLogs] = useState([]);    useEffect(() =&gt; {     const consoleLog = console.log;     console.log = (message) =&gt; {       setLogs((prevLogs) =&gt; [...prevLogs, message]);       consoleLog.apply(console, arguments);     };   }, []);    return (     &lt;div&gt;       &lt;button onClick={() =&gt; setLogs([])}&gt;Clear logs&lt;/button&gt;       {logs.map((log, index) =&gt; (         &lt;p key={index}&gt;{log}&lt;/p&gt;       ))}     &lt;/div&gt;   ); };  export default ConsoleLog;

1

import React, { useEffect, useState } from 'react'; const ConsoleLog = () => { const [logs, setLogs] = useState([]); useEffect(() => { const consoleLog = console.log; console.log = (message) => { setLogs((prevLogs) => [...prevLogs, message]); consoleLog.apply(console, arguments); }; }, []); return ( <div> <button onClick={() => setLogs([])}>Clear logs</button> {logs.map((log, index) => ( <p key={index}>{log}</p> ))} </div> ); }; export default ConsoleLog;

Прикольная штука, к сожалению она отображает только те логи, которые мы пишем в коде вручную и только первую часть: console.log("это отображается", это уже нет, просто символами)

+ Заказать

Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

Есть ответ
07.04.2024

Ответить

Для дублирования всей информации с консоли браузера на сайт можно воспользоваться JavaScript. Для этого необходимо использовать метод console.log() для вывода информации в консоль браузера и затем передать эту информацию на страницу сайта.

Пример кода на JavaScript для дублирования информации с консоли на сайт:

// Сохраняем оригинальный метод console.log()
var originalLog = console.log;

// Переопределяем метод console.log()
console.log = function(message) {
  // Выводим информацию в консоль браузера
  originalLog.apply(console, arguments);
  
  // Дублируем информацию на странице сайта
  var logElement = document.createElement('div');
  logElement.textContent = message;
  document.body.appendChild(logElement);
};

1

2

3

4

5

6

7

8

9

10

11

12

13

// Сохраняем оригинальный метод console.log()

var originalLog = console.log;

// Переопределяем метод console.log()

console.log = function(message) {

// Выводим информацию в консоль браузера

originalLog.apply(console, arguments);

// Дублируем информацию на странице сайта

var logElement = document.createElement('div');

logElement.textContent = message;

document.body.appendChild(logElement);

};

Этот код переопределяет метод console.log(), чтобы он выводил информацию как в консоль браузера, так и на странице сайта. Теперь при вызове console.log() информация будет дублироваться на странице.

Примечание: Помните, что использование этого метода может быть полезным для отладки, но не рекомендуется использовать его на продакшен сайте из-за потенциальных проблем с безопасностью и производительностью.

Как дублировать на сайт всю информацию с консоли браузера?

Дополнительно:

Ответы:

Оставить комментарий Отменить

Ответы

Ежедневно, круглосуточно

Как дублировать на сайт всю информацию с консоли браузера?

Дополнительно:

Ответы:

Оставить комментарий Отменить

Ответы

Метки

Ежедневно, круглосуточно