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

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

Использование фильтра для отладки 11ty

В моем конфиге для 110 проектов я поставил этот маленький отладочный фильтр.

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

У меня есть объект героя в моих сообщениях:

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

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

Пример console.log вывода:

Это становится действительно замечательным, если вы используете отладчик VSCode для запуска 11ty, как только вы используете фильтр и нажимаете «Сохранить» из-за оператора debugger, вы переходите прямо к фильтру отладки.

Отладка с помощью VS Code

Конечно, вы могли бы console.log, но использование отладчика VS Code для этого может быть чрезвычайно полезным для поиска сокровищ переменных.

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

  1. Создайте папку в рабочей области с именем .vscode
  2. Создайте файл с именем внутри .vscode папки с именем launch.json
  3. Добавьте задачу отладки для бегуна eleventy, вот пример:

Если вы хотите перевести его в режим просмотра в реальном времени, установите для аргументов значение:

  1. Перейдите на панель отладки и найдите задачу под названием 11ty, установите точки останова и приступайте к отладке.

Этот подход также очень хорошо работает при написании пользовательских коллекций или использовании данных.

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

Я надеюсь, что это было полезно для людей, 11ty настолько молниеносно, что объединение его с отладчиком VS Code, когда вы пишете JavaScript, становится супер интерактивным.