Max Home IndustryИнструменты разработчика F12 в Internet Explorer были обновлены Microsoft для сопровождения новых выпусков IE11.
В новую версию добавлена возможность отслеживать изменения в инструментах CSS, а также улучшена отладка. Теперь вы можете отлаживать код, который вы написали, например CoffeeScript или TypeScript, с поддержкой исходных карт. Также есть возможность отлаживать только свой собственный код при использовании библиотек других разработчиков.
В сообщении в блоге об улучшениях члены команды F12 говорят, что одним из преимуществ таких инструментов, как F12, является то, что они позволяют редактировать внешний вид веб-сайтов прямо в браузере. Проблема заключается в том, что после того, как вы внесли несколько изменений и хотите применить эти изменения к исходному источнику, может быть сложно отслеживать изменения, внесенные вами в CSS. В обновленной версии есть возможность записывать и отслеживать изменения, как визуально с помощью «полос изменений», так и с помощью новой панели CSS «Изменения» в проводнике DOM.
Согласно сообщению в блоге:
«Любое изменение правил и свойств CSS на панели« Стили »в DOM Explorer будет иметь визуальную подсказку в левом поле рядом с отредактированным свойством или правилом. Это «панели изменений», которые отображаются зеленым цветом для новых свойств, желтым — для измененных свойств и значений и красным — для удаленных свойств. Эти панели изменений будут сохранены, даже если вы начнете смотреть на другие узлы DOM ».
Понимая, что вы можете вносить несколько изменений во многие узлы, команда также добавила новую вкладку на панели CSS, в которой перечислены все изменения в текущем сеансе F12 в виде представления «diff», чтобы вы могли использовать его в качестве контрольного списка, когда вы вручную редактируете исходный код.
Параметр отладки «Только мой код» предназначен для предотвращения случайных попыток отладки стороннего кода при использовании сторонних библиотек, таких как jQuery или Angular. В сообщении блога говорится, что «мы часто видим разработчиков, которые отлаживают свой код в коде библиотеки и погружаются в глубины этой библиотеки, прежде чем смогут вернуться к своему коду для отладки своей проблемы». Visual Studio некоторое время поддерживает функцию под названием «Just My Code» (JMC) управляемых языков, а в Visual Studio 2012 она также включена для JavaScript. Это означает, что вы никогда не «войдете» в файл, помеченный как код библиотеки. Вы можете пометить библиотеку с помощью средства выбора файлов в отладчике (см. Ниже), даже если вы вошли в файл. После отметки любая пошаговая операция приведет вас к вашему коду.
Одним из приятных улучшений этой версии является поддержка исходных карт. Вы можете использовать это, чтобы преодолеть проблему, вызванную минимизацией кода JavaScript, который был скомпилирован в JavaScript с другого языка. Если вы пишете код на другом языке, а затем скомпилируете его в JavaScript, в браузере выполняется и отлаживается именно JavaScript, а не исходный код из вашего редактора. Это вызывает головную боль при отладке. Сообщество разработчиков разработало карты источников, которые отслеживают происхождение, исходные и скомпилированные файлы. В F12 добавлена поддержка версии 3 спецификации Source Map. В сообщении блога говорится: «Когда скомпилированный файл JavaScript определяет допустимую исходную карту, F12 по умолчанию загружает исходный исходный файл, а не запущенный JS-файл, когда включены« исходные карты »(кнопка в отладчике)».
Другие улучшения включают поддержку «трехсторонних снимков», где вы можете сравнивать три снимка, созданные профилировщиками памяти, когда вы пытаетесь отладить утечку памяти — до, после и обратно в нормальное состояние; а также возможность использовать инструменты отладки и повышения производительности Visual Studio для Internet Explorer на Windows Phone 8.1.
В сообщении блога есть полный список изменений, и команда говорит, что в течение следующих нескольких недель они будут публиковать записи блога, которые будут более подробными и покажут вам, как использовать F12. Обновленные инструменты можно загрузить со страницы загрузок и инструментов IE в Центре разработки Internet Explorer.