Как во время выполнения скриптов вывести

Функции вывода

Во время написания программы, а также при её отладке часто возникает необходимость увидеть, как работает программа. Нужно узнать, доходит ли выполнение программы до определённого места и какие значения имеют переменные в этот момент. Для этого существуют функции вывода, которые рассмотрены в данной теме.

Функция alert()

Функция alert() выводит на экран окно с сообщением. Текст сообщения всегда пишется в кавычках. Все функции вывода могут выводить не только текст, но и значения переменных. Пример:

Особенность этой функции заключается в том, что она приостанавливает работу программы. Когда выполнение программы доходит до функции alert() , появляется окно и работа программы прерывается. А когда пользователь нажимает кнопку OK, окно изчезат, а программа продолжает работу. Иногда эта особенность бывает полезна. Она позволяет не только вывести сообщение, но и увидеть, как выглядит страница на данном этапе выполнения программы. Однако, если нужно вывести много сообщений, то использование функции alert() становится неудобным. Ведь при каждом выводе программа прерывается и нужно нажимать кнопку OK. В этих случаях используются другие способы вывода данных.

Метод document.write()

Метод document.write() добавляет текст на страницу. Это может быть не просто текст, но и тэги, они будут работать. Однако, не рекомендуется использовать этот метод для добавления элементов страницы. Они могут отображаться неправильно. Для создания элементов применяются другие методы, которые рассмотрены в этом учебнике. А document.write() используется, в основном, для отслеживания работы программы. Пример:

Метод console.log()

Консоль браузера — это полезный инструмент отладки скриптов. Он позволяет получить важную информацию о работе скрипта. Удобнее всего консоль сделана в браузере FireFox. Она находится в Инструментах разработчика. Для их открытия есть кнопка.

Для консоли в Инструментах разработчика есть своя вкладка.

Метод console.log() позволяет вывести данные в консоль. Он работает не во всех, но в большинстве браузеров. Пример:

Подробнее работа с консолью рассмотрена в теме про отладку скриптов.

Коприрование материалов сайта возможно только с согласия администрации

Источник

Отладка JavaScript для начинающих

В последние несколько лет благодаря появлению различных библиотек, таких как jQuery и Prototype, JavaScript завоевал лидирующее место среди языков для создания скриптов для веб проектов. Растущая популярность и простота использования привела к появлению полноценных приложений, например, Gmail, которые содержат тысячи строк JavaScript, выдвигающих к команде разработчиков повышенные требования к уровню владения инструментарием.

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

В данном уроке проводится краткий обзор возможностей современных инструментов разработчиков, которые помогают сделать отладку JavaScript кода более простым процессом. Основное внимание будет уделяться возможностям браузера Chrome и дополнения Firebug для FireFox, но большинство описанных функций доступны и в других инструментах, например, Dragonfly для Opera.

Консоль — общий взгляд

В большинстве программ для разработчиков самым лучшим другом программиста будет консоль . Многоцелевая панель используется для журналирования сообщений об ошибках, проверки DOM, отладки кода JavaScript и множества других задач. В зависимости от браузера консоль вызывается разными командами (кроме прямого выбора через меню):

• в браузере Chrome и Dragonfly для Opera – Ctrl + Shift + I
• Firebug — F12

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

Данные выводим в консоль

Консоль может не только показывать ошибки в коде скрипта. С помощью Console API и Command Line API можно управлять выводом данных в консоль. Самая известная и полезная команда .log().

При разработке кода формы очень полезно знать значения переменных, чтобы проверять правильность работы кода. Обычной практикой является использование функции alert() для визуального контроля. Однако, использование такого метода блокирует выполнение остальной части кода до нажатия кнопки в окне диалога.

Современным решением является использование метода console.log, который выводит значения переменных на панель консоли:

Метод можно использовать для вывода вычисленных значений:

Преимуществом такого подхода по сравнению с методом использования диалога alert() является то, что выполнение кода не прерывается, и разработчик может несколько раз выводить значения переменных для наблюдения за изменениями данных в реальном времени.

Выделение сообщений

В выше приведенном примере цикл будет выводить много значений переменных в консоль. Однако, часто бывает удобно визуально разделять различные данные, чтобы эффективно выделять в коде места, требующие повышенного внимания. Для решения таких задач Console API имеет несколько методов.

console.info(): выводит иконку «информация» и выделяет цветом представляемую информацию. Данный метод удобно использовать для предупреждения о различных событиях.

console.warn(): выводит иконку «предупреждение» и выделяет цветом представляемую информацию. Удобно использовать для информации о выходе параметров за рамки ограничений.

console.error(): выводит иконку «ошибка» и выделяет цветом представляемую информацию. Удобно использовать для представления информации об ошибках и критических условиях.

Примечание: инструмент разработчика Chrome не имеет средств для различного представления информации в консоли.

Группировка вызовов метода .log()

Использование различных методов для вывода информации в консоль позволяет представить данные в наглядном виде. Представление информации можно улучшить с помощью объединения в блоки. Используется метод console.group():

Данный пример сгруппирует информацию в консоли. Визуально е представление будет различаться в разных браузерах, на рисунке ниже представлен вид в Dragonfly для Opera:

Выше приведенные примеры представляют небольшой список доступных методов из Console API. Имеется много других полезных методов, которые описаны на официальной странице Firebug.

Прерывание хода выполнения скрипта

Вывод информации в консоль является полезным средством, но код может выполняться очень быстро и при этом отслеживать много переменных.

Чтобы облегчить процесс отладки можно прерывать ход выполнения кода в определенной точке с получением доступа к данным. Для этого использутся точки прерывания.

Работаем с точками прерывания

Для установки точки прерывания нужно перейти на закладку ‘ Scripts ‘ и выбрать нужный скрипт из списка. Теперь ищем строку, где нужно прервать ход выполнения скрипта, и жмем на поле с номером строки для активации — появится визуальный индикатор. Теперь перегружаем страницу и выполнение кода прервется в заданной точке:

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

Затем можно продолжить выполнение кода с помощью специальных кнопок , которые располагаются вверху боковой панели:

• “Continue”: продолжает выполнение кода до следующей точки прерывания.

• “Step Over”: выполняет следующую строку кода. Если код вызывает другую функцию, то отладчик не будет «погружаться» в ее код.

• “Step Into”: похоже на «Step over», за исключение того, что при вызове функции, отладчик переходит к первой строке внутри кода функции.

• «Step Out»: если вы вошли в код функции с помощью кнопки «Step Into», то нажатие кнопки «Step out» вызовет выполнение кода функции до конца и переход к родительской функции.

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

Условные точки прерывания

В процессе отладки кода иногда требуется останавливать выполнение кода только при соблюдении определенных условий. Например, если в вашем скрипте есть цикл, каждая итерация которого совершается за 50 миллисекунд, то будет очень неудобно запускать процесс выполнения после остановки на каждом шаге, когда нам нужна лишь 300 итерация. Для таких случаев есть условные прерывания.

В примере на рисунке выполнение кода не будет прерываться до тех пор, пока значение перменной total_photos_diff не станет больше 200.

Для активации условного прерывания нужно нажать правую клавишу мыши на точке прерывания и выбрать пункт ‘Edit Breakpoint’ для вывода диалога редактирования условий формирования прерывания.

Установка точки прерывания в коде

Не всегда удобно устанавливать точки прерывания с помощью интерфейса инструмента разработчика в браузере. Иногда проще запустить отладчик из кода специальной командой. В примере, приведённом ниже, показано, как вы можете прервать выполнение кода при соблюдении определенных условий:

Другие способы прервать выполнение кода

Кроме использования точки прерывания инструмент разработчика предоставляет другие возможности остановить выполнение кода в разных случаях.

Остановка при изменении DOM

Если вам нужно отладить часть кода, которая управляет изменениями DOM, то инструмент разработчика предоставляет в ваше распоряжение способ остановки выполнения кода при изменениях узла DOM.

На панели кода HTML при нажатии правой кнопки мыши на нужном элементе можно выбрать условия остановки кода (изменение атрибутов, добавление/удаление потомков, удаление элемента) при изменении DOM. Перегрузите код и при изменении элементов выполнение кода остановится.

Остановка при появлении всех или необрабатываемых исключений

Большинство инструментов разработчика позволяют останавливать выполнение скрипта при появлении исключений. В Chrome данный функционал может быть включен с помощью иконки ‘ Pause ‘ в нижней строке интерфейса.

Можно выбрать, для каких исключений будет выполняться остановка выполнения кода. Пример, приведенный ниже, демонстрирует одно необрабатываемое и одно обрабатываемое (блок try|catch) исключения:

Введение в стек вызовов

Если ошибка появится при выполнении вашего скрипта, то выше описанные методы помогут остановить программу для анализа ошибки. Но не всегда сразу понятно, где скрывается причина.

Когда выполнение скрипта прерывается, обратите внимание на правую панель, на которой представлена полезная информация, среди которой содержится стек вызовов (Call stack).

Стек вызовов показывает полный путь, который привел к точке появления ошибки и остановки выполнения кода.

На представленном ниже рисунке ошибка намеренно сгенерирована в функции incrementValues(), что привело к остановке выполнения кода. инструмент разработчика показывает полный стек вызовов, что позволяет определить потенциально опасные места.

Заключение

Данный урок является отправной точкой для более детального изучения документации по тому инструменту, которым вы планируете активно пользоваться.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.netmagazine.com/tutorials/javascript-debugging-beginners
Перевел: Сергей Фастунов
Урок создан: 26 Марта 2012
Просмотров: 208664
Правила перепечатки

5 последних уроков рубрики «Разное»

Как выбрать хороший хостинг для своего сайта?

Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Разработка веб-сайтов с помощью онлайн платформы Wrike

Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

20 ресурсов для прототипирования

Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Топ 10 бесплатных хостингов

Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

Источник

Вывод текста в браузер во время выполнения скрипта, а не после завершения

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

По-идее данный пример должен каждую секунду 10 раз выводить слово ‘data’ . Ни на Денвере, ни на хостинге NIC/RU-CENTER данный пример не работает — сначала проходит 10 секунд, потом полностью выводится весь текст. Несколько дней читаю интернет, у половины людей похожие конструкции с flush()/ob_flush() работают, у половины нет. В целом, какой-либо ясности по вопросу нет. Как осуществить постоянный вывод в браузер? Про header(‘Content-Type: text/event-stream’) знаю, это не совсем то, что нужно, хочется чтобы в браузер выводился именно код с форматированием.

4 ответа 4

@copenhagen вопрос не обширный, а очень простой, и современные технологии позволяют это решать. возьми websocket и можешь выводить информацию о работе своего скрипта хоть после каждое его строки. твой вопрос сводится к простому — как заставить сервер быть инициатором сообщений клиенту. ответ — websocket.

Вопрос довольно обширный, но я постараюсь вам ответить.

В чём тут может быть подвох. Сервер: Apache который использует gzip и не отправляет страницу до завершения скрипта или подобные решения на nginx

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

Самым простым решением если нужно просто проконтролировать долгий скрипт, запуск его через консоль. Если же нужен вывод в браузер то стоит попробовать Opera 12 с настройками перерисовывать страницу через 1 секунду

Внимание, велосипед. В процессе выполнения записываем результат в текстовый файл и обновляем его [F5] или скриптом.

Попробуйте использовать конструкцию:

Далее используйте необходимый вывод.

Как сказал @Вадим, правильным ответом будет использование websocket. Сам по себе протокол HTTP не предусматривает такого понятия, как частичный ответ, и то, что временами такой функционал получается реализовать не означает, что первая попавшаяся на пути прокси не зарубит вам весь функционал. Прокотоло websocket-ов же был придуман специально для того, чтобы решить некоторые наболевшие в HTTP проблемы, в том числе, инициацию передачи на стороне сервера и постоянное подключение с не менее постоянным объемом данных. Да, чтобы реализовать желаемое с поддержкой вебсокетов, придется попотеть, но все остальные решения (кроме периодического опроса сервера) довольно печальны и, опять же, могут быть зарублены певой же проксей.

Однако, на мой взгляд туту вообще иная проблема: выполнение тяжелых вычислений внутри одного веб-запроса. Это абсолютно неконтролируемое поведение, которое легко как кладет сервер (если пришло n-цать человек и все ломанулись выполнять тяжелые вычисления), так и сам PHP по таймауту, в результате чего вообще непонятно, зачем он выполнялся. Ответы на HTTP-запросы должны выковываться, как свежие пирожки, с гигантской скоростью и в большом количестве, а сторонние задачи должны оставаться сторонними задачами. Специально для таких вещей придумали различные сервисы сообщения и очередей: от простого gearman, который вкручивается в проект за пятнадцать минут, до реализации AMQP, которая позволит настроить очень гибкий роутинг. Схема с использованием сервиса очередей предполагает, что в момент поступления запроса на тяжелое вычисление сервер скидывает задание в очередь и быстро дает ответ, а где-то в фоновом режиме трудится фиксированное количество рабочих процессов, постепенно разбирающих эту очередь. Такой подход не дает повалить сервис, не дает умереть PHP по таймауту, знатно помогает при масштабировании (рабочие процессы могут быть и на любом другом сервере), и вообще, единственное, что может с ним случиться — это переполнение очереди, которое обычно решается выделением большего количества ресурсов рабочим процессам. В этом случае можно просто сделать отдельный метод, который по айдишнику задачи будет возвращать статус ее выполнения, писать это дело в базу и доставать одним минимальным запросом. Если сделать это правильно, то метод получения данных о ходе выполнения можно будет оббивать аяксом хоть каждые сто миллисекунд, пока он легковесный, с сервисом ничего не случится.

Источник