Отладка с помощью Xdebug и Sublime Text 3

Как проверить код на ошибки в sublime text

Отладка — мы все делаем это много. Писать код идеально с первого раза сложно, и лишь немногие (если таковые имеются) преуспевают в этом. Более года назад Шамер написал в SitePoint статью о том, как можно отлаживать приложение с помощью Xdebug и Netbeans. В этой статье мы рассмотрим, как мы можем отлаживать, используя Xdebug в сочетании с Sublime Text.

Начиная

Настройка Xdebug

Нам нужно настроить xdebug, добавив следующее в файл php. ini или, что еще лучше, в файл xdebug. ini как описано здесь в разделе «Практические xdebug. ini по Linux».

В общем, вы будете использовать 127.0.0.1 в качестве хоста. Однако, если вы используете vagrant, например, вы будете использовать что-то вроде 10.0.2.2, в зависимости от того, где Xdebug может найти вашу систему.

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

Не забудьте перезапустить ваш веб-сервер!

Настройка Sublime Text 3

После того, как вы установили управление пакетами, вы должны запустить Sublime Text 3. Откройте командную палитру из меню инструментов и найдите «install package».

Теперь вы можете искать любой пакет, который вам нравится. В нашем случае мы будем искать пакет «Клиент Xdebug».

Последнее, что нам нужно сделать, это настроить проект в Sublime. Самый простой способ сделать это — открыть корневой каталог вашего приложения, перейти к проектам и нажать «сохранить проекты как». Я предлагаю вам сохранить файл в корне вашего приложения, чтобы вы могли сохранить его в своей системе контроля версий, если вы используете какой-либо файл, и вы можете легко настроить его в любое время.

Откройте только что созданный файл проекта. Содержание будет выглядеть так:

Мы собираемся добавить еще несколько строк:

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

Контрольные точки

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

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

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

Стек Xdebug и контекст Xdebug очень интересны. В стеке вы можете видеть всю трассировку стека, через которую прошел ваш вызов.

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

Итак, наше приложение остановилось, и теперь мы можем просматривать определенные переменные. Тем не менее, мы сделали, и мы хотим двигаться дальше. Что теперь? Когда вы снова щелкните правой кнопкой мыши и наведите курсор мыши на меню Xdebug, у вас будет несколько вариантов:

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

Представьте, что вы добавили точку останова к первой строке панели методов. Таким образом, в строке с комментарием точки останова ( // breakpoint ).

С шагом в, отладчик перейдет в метод fooBar и остановится на первой строке. Так что в этом случае отладчик остановится на return array_values($arr); линия.

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

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

Вывод

В этой статье мы увидели, как мы можем интегрировать Xdebug с Sublime, и убедились, что понимаем, как отлаживать. Почти каждая IDE, подходящая для PHP, может интегрироваться с Xdebug. Если вы заинтересованы в такой отладке в Netbeans, посмотрите статью, упомянутую во введении. Вы используете точки останова? Или вы используете функции PHP, такие как var_dump, для получения данных отладки? Дайте нам знать в комментариях ниже!

Sublime Text 3 – топ 75 Sublime плагинов 2021 (PHP, JS, CSS… +тема и русификатор).

Sublime Text 3 – продвинутый мультиплатформенный редактор кода. Он имеет огромное количество плагинов, соответственно функционал редактора можно значительно расширить, чем мы и займемся. Прокачаем ваш Sublime Text 3 для web-разработки по полной. Рассмотрим топ 65 лучших плагинов 2020 – PHP, Python, JS, CSS… и их правильные настройки.

Редактор Sublime Text 3 – распространяется по коммерческой лицензии без особых ограничений. Версия без лицензии будет лишь иногда ненавязчиво напоминать о том, что лицензия должна быть приобретена для дальнейшего использования.

Качаем версию Sublime Text 3 для нашей ОС, устанавливаем, запускаем.

Устанавливаем Node. js

Для работы некоторых плагинов нам понадобиться Node. js и Python, качаем и устанавливаем node. js. При установке, оставляем все по умолчанию.

Устанавливаем Python

Далее скачиваем и устанавливаем Pyton, последний релиз, ссылка типа Windows x86(или x64) web-based installer.

Устанавливаем Ruby и RubyGems

Должна начаться установка RubyGems.

Устанавливаем Package Control

Теперь, чтобы установить или удалить плагин для Sublime Text, жмем ctr+shift+p, вводим install Package

Я специально проставил ссылки на все плагины Sublime Text 3, чтобы лучше понять, как они работают, не поленитесь пройти по ним и прочесть оригинальные инструкции.

Идем в пользовательские настройки кнопок: Preferences – Key Binding, идем во вкладку User (вторая вкладка), тыкаем в нее курсор, вставляем туда:

Эта запись добавляет горячие клавиши alt+shift+f для команды reindent – форматирования выделенного кода (выравнивания отступов).

Далее создадим файл пользовательских настроек: Preferences – Setting – User, жмем ctrl+s, проверяем так же, через ctrl+o, должен быть файлик Preferences. sublime-settings, если нет, создаем его.

Топ плагины Sublime Text.

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

All Autocomplete – автозаполнение с открытых вкладок.
Каждый раз когда вы начинаете печатать, редактор анализирует набранный текст и предлагает наиболее релевантные варианты (из открытых документов) продолжения слова или функции в виде выпадающего списка. По-умолчанию функция доступна для языков программирования и для HTML, если набранное слово начинается со скобки «<». Для того, чтобы вызвать подсказку вручную, нажмите ctrl+space. Повторное нажатие приведет к выбору следующего в списке элемента.

Anaconda – превращает ваш Sublime Text 3 в полнофункциональную среду разработки Python, включая автозаполнение, кодировку, возможности IDE, поддержку Vagrant и Docker для Sublime Text 3 с использованием Jedi, PyFlakes, pep8, MyPy, PyLint, pep257 и McCabe. Идем в настройки модуля и пишем:

E501 – означает пропуск проверки длины строк (мне не нужно), ну и авто формат включил, пригодиться.

AutoFileName – еще одно автозаполнение для подключения внешних файлов в код: имени файла, картинок в папке с проектом. Не конфликтует c All Autocomplete, скорее дополняет его. Активируется так же: ctrl+space.

Autoprefixer – полезный плагин для Sublime Text который прописывает CSS префиксы для различных браузеров в соответствии с данными caniuse. com

Настройки для двух последних версий браузеров:

Bootstrap 3 Snippets – автозаполнение кода Bootstrap 3 в виде выпадающего списка и по Tab.
В настройки пользователя (Preferences – Setting – User) добавляем строку:

Пример работы: пишем в html-файле – bs3-template: html5, жмем tab, должен появиться код стандартного шаблона html5+Bootstrap 3

Аналоги этого плагина уже имеются для Bootstrap 4, (Bootstrap 4 Snippets и Bootstrap 4 Autocomplete) хотя пока чаще используется Bootstrap 3.

BracketHighlighter – подсвечивает открытие/закрытие тегов и скобок в коде.

Color​Helper – упрощает работу с цветами: подсветка цветовых кодов, позволяет получать доступ к избранным цветам и цветовой палитре документа. Перевод цвета в различные форматы. Легко изменить цвет без знания кода.

Console Wrap – добавление вывода переменной в консоль по горячим клавишам ctrl+shift+q.

CSS Format – форматирование и минификация CSS из контекстного меню.

CSS3 – наиболее полная поддержка CSS для Sublime Text.

Djaneiro – автозаполнение и синтаксис Python Django для Sublime Text.

DocBlockr – это пакет для Sublime Text 3, который делает написание документации на одном дыхании. DocBlockr поддерживает JavaScript (включая ES6), PHP, ActionScript, CoffeeScript, TypeScript, Java, Apex, Groovy, Objective C, C, C++ и Rust.

Dockerfile Syntax Highlighting – подсветка синтаксиса Dockerfile для Sublime Text.

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

Emmet – наш знакомый плагин по статье про Notepad++, позволит нам писать HTML и CSS код быстрее, используя аббревиатуры / ярлыки, затем расширит их до допустимых HTML тегов. Это один из моих самых часто используемых плагинов, который экономит время. Emmet занимает топ 1 по популярности среди плагинов репозитория SublimeText. Как и в прошлый раз настоятельно советую изучить документацию.

GhostText – один из самых крутых плагинов, позволяет связать редактор Sublime Text (со всеми вашими плагинами) с полями для ввода текста в браузере. Например, вы можете работать с CodePen, но все редактировать в Sublime Text. Просто нужно установить плагин и расширение для браузера. Просто выделите текстовую область, которую вы хотите связать, и щелкните расширение браузера: тогда произойдет волшебство.

GitGutter – плагин для отображения информации о файлах в репозитории. Всплывающее окно diff показывает исходный контент из коммита или различия между ним и рабочей областью.

Gitignore – плагин для загрузки шаблонов gitignore из коллекции шаблонов gitignore от Github
Google Search – поиск выделенного текста в Google.

Goto-CSS-Declaration – позволяет находить и переходить к id и классам в открытых CSS, LESS, SASS из редактируемых html, js и PHP-файлов.

jQuery и j​Query Snippets pack– наборы снипетов для jQuery. Эти плагины Sublime Text помогут с функциями jQuery. Они имеют почти все методы jquery в виде фрагментов для автозаполнения в коде и не конфликтуют друг с другом.

j​Query​Docs – это пакет Sublime Text 3, который показывает выделенную функцию jQuery на api. jquery. com по alt+j.

HTML5 – аналогичный набор для набор снипетов для автозаполнения HTML5 в коде.

Icon Fonts – автозаполнение для популярных шрифтов иконок, таких как Font Awesome, Glyphicons и других. ( Ctrl + Space).

Inc-Dec-Value – плагин позволяет уменьшать и увеличивать различные значения по горячим клавишам: числа, преобразовывать друг в друга цветовые форматы hex, rgb, rgba, hsl, hsla. С помощью этого плагина в коде мы можем одним движением заменять true на false, fadeIn на fadeOut, next на prev, дни недели и так далее. Стандартные горячие клавиши больше не работают в Windows, потому добавим в настройки клавиш: