Вышла версия V2 расширения Microsoft Edge DevTools for Visual Studio Code. Мы потрудились над тем, чтобы сделать текущий набор функций более стабильным и представили новые.
Интеграция с консолью — упрощает использование console.log() или взаимодействие с документом прямо из инструментов разработчика. Мы обнаружили, что старая интеграция была нестабильной и ее было трудно найти в панели Output.
Зеркальное редактирование CSS — уверенность в том, что ни один из ваших твиков в DevTools не будет потерян. Теперь это выведено из эксперимента и больше не занимает так много места на экране. Вы можете включать и выключать его в инструменте «Стили».
Сообщения о проблемах в вашем коде в реальном времени. Если в вашем коде есть проблемы, вы увидите волнистое подчеркивание. Вы можете навести на него курсор мыши или использовать панель Problems, чтобы узнать, что не так и как это исправить. Мы обновили механизм проблем, чтобы убедиться, что вы получаете самую свежую информацию, и вскоре предложим вам способы настройки проблем, которые вы хотели бы видеть. На данный момент мы удалили отчет об ошибках Internet Explorer, чтобы он мог покоиться с миром.
🆕 Скринкаст с функциями эмуляции — мы добавили совершенно новый предварительный просмотр браузера, который не только предоставляет вам браузер для взаимодействия прямо в редакторе, но и предлагает различные способы эмуляции различных сред. В нижней части предварительного просмотра браузера находится панель инструментов с различными опциями:
Первая — это список устройств. Вы можете выбрать одно из множества различных эмулируемых устройств.
Если не выбирать устройство, а выбрать Responsive, браузер займет все доступное пространство. Вы также можете задать размер области просмотра с помощью формы и повернуть область просмотра с помощью двойной стрелки.
Меню волшебной палочки позволяет имитировать различные медиа-запросы CSS, такие как режим печати, темный/светлый режим или даже имитировать принудительные цвета (высокий контраст). Если вы хотите узнать больше о принудительных цветах, прочитайте эту замечательную статью.
Последнее меню (в настоящее время используется значок глаза) позволяет имитировать различные нарушения зрения, например, видеть страницу в размытом виде или в различных эмуляциях «цветовой слепоты».
🆕 Поддержка Sourcemap для стилей — теперь вы можете отлаживать стили Sass/React и других приложений абстракции, не выходя из Visual Studio Code.
Для получения более подробной информации вы также можете посмотреть Changelog
Начало работы с отладкой стилей с привязкой к источнику
Мы уже рассказывали об этом здесь, когда спрашивали об обратной связи, но теперь это должно стать намного проще. Если вы откроете Терминал, вы можете сделать npm i и npm start, чтобы собрать ваше приложение и запустить сервер. В этом примере приложение теперь доступно по адресу http://localhost:3000.
Если вы нажмете на значок Edge, у вас появится возможность запустить экземпляр Edge или Generate launch.json файл. Выберите последний вариант.
Это сгенерирует файл launch.json в папке .vscode вашего приложения со всеми правильными настройками. Найдите все экземпляры url и измените их на http://localhost:3000:
Сохраните файл и нажмите F5. Visual Studio Code запустит отладчик и откроет окно браузера с вашим приложением и инструментами разработчика прямо внутри редактора.
Если теперь вы редактируете стили любого из элементов вашего приложения, вы изменяете не только CSS файлы в вашем проекте, но и их исходные файлы scss или модульные стили.
Чтобы это работало, вам необходимо правильно настроить карты источников в вашем проекте. Поскольку мы предполагаем, что это может быть проблематично для некоторых людей, у нас есть проблема, открытая в репозитории расширения, где вы можете найти помощь.