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

Question

[alex0176]

Есть функция:

function dataDebug($data, $flag=false) {

			echo '<div class="mc__debugger">';
			echo '<div class="debug-entry">';
			if( !$flag ) {
				echo '<pre>';				
				print_r($data);
				echo '</pre>';
			}
			else {
				echo '<pre>';
				var_dump($data);
				echo '</pre>';
			}
			echo '</div>';
			echo '</div>';
	}
}

Она может вызывается несколько раз на странице. В качестве параметра передаются данные, которые затем эта функция отображает на экран с помощью print_r($data);. Возможно ли как то реализовать данный функционал, чтобы при вызове этой функции создавался только один контейнер <div class="mc__debugger"></div> с содержимым, которое будет накапливаться внутри него?
Сейчас, если если эта функция вызывается несколько раз, то она создает несколько отдельных контейнеров:

<div class="mc__debugger">Content HTML...</div>
<div class="mc__debugger">Content HTML...</div>
<div class="mc__debugger">Content HTML...</div>

А мне нужно, чтобы контейнер был только один, а вот внутреннее содержимое контейнера заполнялось по мере вызовов данной функции. Например:
Первый вызов функции - результат:

<div class="mc__debugger">
Content HTML 1
</div>

Второй вызов функции - результат:

<div class="mc__debugger">
Content HTML 1
Content HTML 2
</div>

Answer 1

[Алексей Уколов]

Должно сработать нечто подобное (раз уж в тегах JS указан):

function dataDebug($data, $flag = false)
{
    echo '<div class="debug-entry">';
    echo '<pre>';
    if (!$flag) {
        print_r($data);
    } else {
        var_dump($data);
    }
    echo '</pre>';
    echo '</div>';

    echo <<<JS
    <script>
    if (!window.debug_entries_moved) {
        window.debug_entries_moved = true;
    
        const $container = document.createElement(`div`);
        $container.classList.add(`mc__debugger`);
    
        [...document.querySelectorAll(`.debug-entry`)].forEach(($entry) => {
            $container.appendChild($entry);
        });
    
        document.body.appendChild($container);
    }
    </script>
    JS;
}

Comments

[ksnk]

Ну, типа, debugEntry можно вызвать много раз, не правда ли? Каждый раз будет добавляться новый элемент и новый Скрипт? Надо бы статической переменной ограничить вывод debug-entry и генерировать в какой-нибудь глобальной переменной броузера нужный дамп

[alex0176]

Да, скрипты добавляться множество раз и это не есть хорошо... Но вопрос: как скрестить РНР и JS. Здесь нужно или чистым РНР или чистым JS реализовывать.
На текущий момент у меня вот что вышло:

function debugEntries( $data, $flag=false )
	{
		if( !$flag ) {
			echo '<pre class="debugCode">';
			print_r($data);
			echo '</pre>';
		}
		else {
			echo '<pre class="debugCode">';
			var_dump($data);
			echo '</pre>';
		}
		?>
	    <script>
            window.addEventListener("load", () => {
                if ( !window.debug_entries_moved ) {
                    window.debug_entries_moved = true;

                    const $container = document.createElement(`div`);
                    const $debugEntry = document.createElement(`div`);
                    const $button = document.createElement(`div`);
                    $container.classList.add(`mc__debugger`);
                    $debugEntry.classList.add(`debug-entry`);
                    $button.classList.add(`control-button`);                    

                    $container.appendChild($button);

                    [...document.querySelectorAll(`.debugCode`)].forEach(($entry) => {
                        $debugEntry.appendChild($entry);
                    });

                    $container.appendChild($debugEntry);
                    document.body.appendChild($container);
                }
            });

	    </script>
        <?php
	}

Оно работает корректно, но скриптов добавляется много) Возможно есть более правильное решение.

[Алексей Уколов]

Да, это самое кривое, но и самое простое решение. "Лишние" скрипты вам абсолютно никак не мешают.

Конечно, можно это сделать куда лучше, но это потребует существенных доработок (и ещё неизвестно удастся ли их вкостылить в приложение). Тогда уж проще полноценную библиотеку для дебага поставить, в которой всё это уже есть.

[Алексей Уколов]

ksnk, если исходить из того, что где-то в конце будет вызываться какая-то отдельная функция, которая, собственно, выведет накопленное, то да. А если оставить только одну функцию, то от N скриптов всё равно никак не избавиться.
Ну или да, глобальную переменную использовать. Но как по мне, уж лучше так.

[ksnk]

Алексей Уколов, Не совсем лучше. Этот дебуг будет вызываться в случайном месте генерации html (шаблонизатор же мы не используем, правда?) Так что не факт, что мы не выведем скрипты с дивами при генерации атрибута или имени класса.
Так что более разумно выводить код чем-то, типа ob_ функций, сохранять отладочный вывод в статике php, хотя бы в статике функции debugEntries, и вставлять отладочный вывод в нужное место при отдаче кода наружу.

[Алексей Уколов]

ksnk, да, про это я не подумал.
Но, как я сказал, как только мы выходим за пределы использования одной функции, нет смысла писать велосипед — надо брать что-то готовое.

[ksnk]

В общем - да. Хотя register_shutdown_function сейчас, вроде как, работает достаточно корректно и всегда вызывается в разумных случаях, так что можно навесить вывод на него. Получится что-то такое. Можно было бы и дальше украшать, навесив стили и накрутив скриптовые свистелки-показывалки, но если функция занимает больше 100 строк - значить что-то идет не так :)

<?php

class debug
{
    /**
     * Функция оставляет человекочитаемый вывод функции в html потоке
     * Работоспособна в режиме cli
     * @param mixed $msg - вывод информации
     * @param string $title - иногда удобно подписывать что тут выводится
     * @param array $options - статически сохраняемый массив параметров.
     * - root - корень проекта, минимизируем название файла, обрезая корень default: SERVER['DOCUMENT_ROOT'] или __DIR__
     * - type - [var_dump|print_r|var_export:default]
     * @return void
     */
    static function _($msg, $title = '', $options = [])
    {
        static $notafirsttime, $debug_options = [], $debug_dump = [];
        if (!empty($options)) {
            $debug_options = array_merge($debug_options, $options);
        }
        if (!empty($msg)) {
            $raw_backtrace = debug_backtrace();

            if (!isset($debug_options['root'])) {
                if (isset($_SERVER) && isset($_SERVER['DOCUMENT_ROOT']) && !empty($_SERVER['DOCUMENT_ROOT'])) {
                    $debug_options['root'] = $_SERVER['DOCUMENT_ROOT'];
                } else {
                    $debug_options['root'] = __DIR__;
                }
            }
            $backtrace = [];
            foreach ($raw_backtrace as $bt) {
                $line = str_replace($debug_options['root'], '~', $bt['file']) . ':' . $bt['line'];
                if (isset($bt['class'])) {
                    $backtrace[] = $bt['class'] . '::' . $bt['function'] . ' ' . $line;
                } elseif (isset($bt['function'])) {
                    $backtrace[] = $bt['function'] . ' ' . $line;
                }
            }
            if (isset($debug_options['type']) && $debug_options['type'] == 'var_dump') {
                ob_start();
                var_dump($msg);
                $msg = ob_get_clean();
            } elseif (isset($debug_options['type']) && $debug_options['type'] == 'print_r') {
                $msg = print_r($msg, true);
            } else {
                $msg = var_export($msg, true);
            }
            $debug_dump[] = [$title, implode("\n", $backtrace), $msg];
        }
        if (empty($notafirsttime)) {
            $notafirsttime = true;
            register_shutdown_function(function () use (&$debug_dump) {
                if (!empty($debug_dump)) {
                    $headers = headers_list();
                    if (empty($headers)) {
                        $method = 'plain';
                    } else {
                        $method = 'none';
                    }
                    if (isset($_SERVER) && isset($_SERVER['HTTP_ACCEPT']) && preg_match('~text/html~', $_SERVER['HTTP_ACCEPT'])) {
                        $method = 'html';
                    }
                    foreach ($headers as $h) {
                        if (preg_match('~Content\-type\: text/html~')) $method = 'html';
                    }
                    if ($method == 'plain') {
                        foreach ($debug_dump as $dl) {
                            echo $dl[0] . ' ' . $dl[1] . ': ' . "\n" . $dl[2] . "\n";
                        }
                        // var_export($debug_dump);
                    } else {
                        $tpl = <<<'HTML'
<style>
div.mc__debugger {
    position:fixed; top:0;right:0;
    width:40%; height:100%;
    background: lightgray;
    overflow:auto;
}
div.mc__debugger.hidden {
    width:2em; height:1.5em;
    overflow: hidden;
}
div.control-button {
    position:fixed; top:0;right:0;
    width:2em; height:1.5em;
    background: red;
}
</style>
<script>
    const $container = document.createElement(`div`);
    const $debugEntry = document.createElement(`div`);
    const $button = document.createElement(`div`);
    $container.classList.add(`mc__debugger`);
    $container.classList.add(`hidden`);
    $debugEntry.classList.add(`debug-entry`);
    $button.classList.add(`control-button`);                    
    $container.appendChild($button);
    for (let x of {{json_data}}){
        let $pre = document.createElement(`pre`);
        $pre.innerText=x;
        $debugEntry.appendChild($pre);
    }
    $container.appendChild($debugEntry);
    document.body.appendChild($container);
    $button.addEventListener("click", () => {
        $container.classList.toggle("hidden");
    });
</script>
HTML;
                        echo preg_replace_callback('/{{\s*([^}]+)\s*}}/', function ($m) use ($debug_dump) {
                            switch ($m[1]) {
                                case 'json_data':
                                    return json_encode($debug_dump, JSON_UNESCAPED_UNICODE);
                            }
                            return '';
                        }, $tpl);
                    }
                }
                $debug_dump = [];
            });
        }
    }
}

ну и пример использования

<?php

include 'debug.php';

// тестируем
class testclass
{
    function testfunc()
    {
        debug(4, 'step4');
    }
}

$x = 1;
echo $x;
debug($x, 'step1', ['type' => 'var_export', 'root'=>__DIR__]); // root=>$_SERVER['DOCUMENT_ROOT']
$x++;
echo $x;
debug([1,2,3,[4,5,6,[7,8,9]]], 'step2');
$t = new testclass();
$t->testfunc();
die();
$x++;
echo $x;
debug($x, 'step3');