Несколько быстрых советов по отладке, которые я придумал, создавая свой личный блог.
Документация 11ty действительно великолепна, но когда дело доходит до разработки и отладки, я действительно предпочитаю использовать живой отладчик. Это может помочь понять проблему, но также может послужить действительно отличным способом понять, как вы можете подключиться к фреймворку, в данном случае 11ty.
Использование фильтра для отладки 11ty
В моем конфиге для 110 проектов я поставил этот маленький отладочный фильтр.
Вы можете использовать этот фильтр, чтобы узнать доступные атрибуты в публикации, например, для использования в своем шаблоне.
У меня есть объект героя в моих сообщениях:
В моем коде я могу проверить переменные и зарегистрировать их в консоли.
Это может показаться очень глупым, но я нашел это невероятно полезным, особенно при подключении к живому отладчику (показано позже). При сохранении файла я получаю объект, который был передан фильтру, это может быть очень удобно, когда вы видите, с какими переменными вам нужно играть.
Пример console.log
вывода:
Это становится действительно замечательным, если вы используете отладчик VSCode для запуска 11ty, как только вы используете фильтр и нажимаете «Сохранить» из-за оператора debugger
, вы переходите прямо к фильтру отладки.
Отладка с помощью VS Code
Конечно, вы могли бы console.log
, но использование отладчика VS Code для этого может быть чрезвычайно полезным для поиска сокровищ переменных.
Для этого вам нужно будет создать новую задачу отладки, вы можете сделать это в пользовательском интерфейсе, но быстрый способ:
- Создайте папку в рабочей области с именем
.vscode
- Создайте файл с именем внутри
.vscode
папки с именемlaunch.json
- Добавьте задачу отладки для бегуна
eleventy
, вот пример:
Если вы хотите перевести его в режим просмотра в реальном времени, установите для аргументов значение:
- Перейдите на панель отладки и найдите задачу под названием
11ty
, установите точки останова и приступайте к отладке.
Этот подход также очень хорошо работает при написании пользовательских коллекций или использовании данных.
Собрав это вместе, следующий GIF показывает, как это может быть хорошим интерактивным рабочим процессом.
Я надеюсь, что это было полезно для людей, 11ty настолько молниеносно, что объединение его с отладчиком VS Code, когда вы пишете JavaScript, становится супер интерактивным.