Онлайн-тестеры PHP, JS и CSS кода

Online Tester code

Полезные инструменты в складчину программиста, веб-разработчика, тестировщика. Эти онлайн-тестеры помогут протестировать ваш веб-код еще до внедрения на сайте, найти ошибки и «пофиксить» в реальном времени. Есть возможность симулировать любую версию PHP и даже фреймворки, а также протестировать и другой код, например CSS или Java Script.

PHPTester

Онлайн-тестеры PHP, JS и CSS кода

Позволяет протестировать свой php-код в режиме онлайн прямо в вашем браузере без использования веб-сервера. Поддерживаемые версии PHP: 5.5, 5.6, 7.0

Ссылка: //phptester. net/

PHP Sandbox

Онлайн-тестеры PHP, JS и CSS кода

Отличается от предыдущего только тем, что дает возможность выбрать любую версию PHP — от 4.4.9 до 7.4.

Ссылка: https://sandbox. onlinephpfunctions. com/

PHP Online Test

Онлайн-тестеры PHP, JS и CSS кода

Удобный тестер с приятным пользовательским интерфейсом. Содержит в себе много еще других плюшек, например PHP виджеты, API, декодеры/энкодеры. Мне он очень понравился, рекомендую.

Ссылка: //phpfiddle. org/

PHP syntax checker

Онлайн-тестеры PHP, JS и CSS кода

Осуществляет проверку синтаксиса в PHP-коде. Позволяет загрузить и проверить код из файла. Поддерживает версий PHP: 5.3, 5.4, 5.5, 5.6, 7.1

Ссылка: https://extendsclass. com/php-tester. html

JS. DO — Online JavaScript Editor

Онлайн-тестеры PHP, JS и CSS кода

Название говорит за себя — этот сервис тестирует ваш JS-код. После регистрации можно указать URL-адрес файла с кодом и проверить в реальном времени, не выходя из браузера. Есть возможность симулировать фреймворки — jQuery, Bootstrap.

Ссылка: https://js. do/

CSSDesk

Онлайн-тестеры PHP, JS и CSS кода

Замечательный онлайн-сервис. Позволяет поэкспериментировать с CSS-кодом в реальном времени и сразу просматривать результат. Готовый код вы можете скачать. А главное, сервис простой и дружелюбный. Новичку, однозначно понравится!

Отладка JavaScript кода

Ошибки делятся на два типа:

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

Поиск синтаксических ошибок

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

Неправильно расставить кавычки вообще маловероятно, потому что в текстовых редакторах текст в кавычках обычно выделяется своим цветом.

Найти незакрытую скобку также помогут текстовые редакторы для программирования. В Notepad++ если поставить курсор после открывающей скобки, то она и соответствующая ей закрывающая скобка будут выделены красным цветом. Это работает со всеми видами скобок.

Цвет кода

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

Поиск алгоритмических ошибок

Искать алгоритмические ошибки намного сложнее, потому что они никак не проявляются. Искать такую ошибку нужно так: выбрать значимое место скрипта. Это могут быть последние строки программы или отдельной функции. Затем нужно ответить на два вопроса:

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

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

Средства отладки JavaScript кода

Панель инструментов

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

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

Ошибка скрипта

Результат будет выглядеть так:

Информация в консоли

Справа указана строка, которая вывела эту информацию.

В консоли DOM-объект выглядит так:

Отображение объекта в консоли

Вкладка «Отладка» панели инструментов позволяет приостановить выполнение скрипта на любой строке и посмотреть, какие значения имеют переменные на этом этапе. Вкладка разделена на три части. В левой части показаны файлы, в которых содержатся скрипты.

Скрипты

Кликните на нужном файле и в средней части вкладки отобразиться код файла. Строки кода пронумерованы. Можно кликнуть на номерах нужных строк и они будут выделены синим цветом. На этих строках выполнение скрипта будет приостанавливаться. Такие строки называются точки останова. Они перечислены также в правой части вкладки.

Код cкрипта

Когда вы выбрали нужные строки, запустите страницу заново. Скрипт остановится на первой выбранной строке и можно будет посмотреть, как выглядит страница в этот момент. Также можно узнать какие значения имеют переменные. В правой части вкладки нужно нажать «+», написать имя переменной и нажать Enter. Затем можно добавить другую переменную.

Добавление переменной

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

Продолжение работы

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

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

Источники:

https://krasheninin. tech/php/onlajn-testery-php-js-i-css-koda/

https://basecourse. ru/javascript/debug. php

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: