#javascript #vue.js #visual-studio-code #chrome-debugging
#javascript #vue.js #visual-studio-code #chrome-отладка
Вопрос:
Я разрабатываю приложения VueJS / Express, занимаясь более продвинутыми веб-разработками, чем раньше. Я использую VSCode и разрабатываю серверную часть и интерфейс в одном проекте. Я могу использовать VSCode debugger для серверной части и использовать Chrome debugger для интерфейса.
VSCode отлично работает. Конец этой истории.
Chrome мощный, но причудливый. В итоге я немного отлаживаю то, что происходит с отладчиком Chrome. Добавьте к этому непостижимые внутренние компоненты Vue, которые всегда появляются, добавляя еще один уровень, который нужно пройти (или проигнорировать). Но самая большая проблема, с которой я сталкиваюсь, заключается в том, что я не могу проверять переменные экземпляра в компонентных сценариях, только переменные, которые являются локальными для функции, в которой находится точка останова. Это сводит мой процесс к выполнению множества одноразовых инструкций console.log(), где нужно просто быстро проверить «это».[что-нибудь] ‘ переменная экземпляра.
Я просто мирился с этим в течение нескольких месяцев, но в последнее время, проводя некоторый рефакторинг, это замедлило мой прогресс до обхода, поэтому я хочу посмотреть, есть ли способ преодолеть это препятствие и ускорить процесс отладки.
У кого-нибудь есть предложения? Есть ли способ настроить Chrome для включения проверки объектных переменных? Существует ли более эффективный метод или инструмент отладки для разработки интерфейса Vue?
Помимо этого, объединение внешнего и внутреннего кода в один проект было отличным. VSCode качается.
Комментарии:
1. Я могу порекомендовать chrome.google.com/webstore/detail/vuejs-devtools /. … Это не универсальное решение, но оно может ускорить некоторые задачи отладки,
2. Я использую vuejs devtools, иногда это полезно. Я чувствую, что мне чего-то не хватает, поскольку я не могу проверять переменные в экземплярах объектов, которые используются в функции, которую я отлаживаю. Консоль. журнал работает, но это неэффективный, примитивный способ сделать это.
3. Я обнаружил, что иногда при использовании наблюдаемой переменной больше шансов отобразить значение переменной, чем при наведении курсора на нее в коде.
Ответ №1:
Я нашел обходной путь для Vue, который заключается в размещении точки останова в разделе просмотра с помощью кнопки в пользовательском интерфейсе. В этой точке останова часы в отладчике Chrome имеют доступ к переменным «this». Коллеги-разработчики сказали мне, что это распространенная проблема, с которой они сталкиваются постоянно. Когда я получу больше понимания условий, влияющих на эту проблему доступа к области, я добавлю ее.