Инструменты разработчика Chrome: что такое поддержка фрагментов?

Начиная с версии 19, Chrome Web Inspector имеет экспериментальную функцию под названием "поддержка фрагментов". Вот как его активировать:

  • Откройте chrome: flags, включите "эксперименты с инструментами разработчика", перезапустите.

  • Откройте веб-инспектор (инструменты для разработчиков), нажмите значок шестеренки настроек в нижнем правом углу, включите поддержку "Поддержка фрагментов", перезапустите.

    enable snippets support

  • Откройте панель "Сценарии", щелкните значок "Дерево навигатора" слева и найдите пустую закладку "Снипеты".

    snippets tab

Мой вопрос: Для чего я могу это использовать? Как я могу заполнить это фрагментами?

Ответы

Ответ 1

Короче говоря, фрагменты являются многострочной консолью, итеративным рабочим процессом JS и постоянным хранилищем для общих помощников по отладке.

developers.google.com/chrome-developer-tools/docs/authoring-development-workflow#snippets

С некоторыми фрагментами, используемыми в прецедентах, могут быть:

  • Bookmarklets - все ваши закладки могут быть сохранены в виде фрагментов, особенно тех, которые вы можете изменить.
  • Утилиты - отладочные помощники для взаимодействия с текущей страницей могут быть сохранены и отлажены. Список доступных утилит доступен сообществам.
  • Отладка. Фрагменты предлагают многострочную консоль с подсветкой синтаксиса и устойчивостью, что делает ее удобной для отладки кода, который больше, чем однострочный.
  • Код исправления для обезьян - код, который вы хотите исправлять во время выполнения, может выполняться с помощью фрагментов, хотя много раз вы можете просто редактировать код на вкладке Источники.

snippets screenshot

Наконец, я лично собирал несколько общих фрагментов, которые вы можете включить в свой арсенал: github.com/paulirish/devtools-addons/wiki/Snippets

Чтобы быстро выполнять фрагменты, теперь вы можете это сделать. Ctrl-Shift-P для "командной палитры", затем обратно, и используйте! префикс, затем введите имя фрагмента, которое вы хотите запустить.

введите описание изображения здесь

Ответ 2

Я спросил Пола Ирриша, знал ли он что-нибудь об этом, он тоже не был уверен, но говорит, что он еще не полностью реализован и указал мне на трекер ошибок, я нашел главу билет, и, глядя на некоторые из кода, отличия имеют много комментариев FIXME: To be implemented..

Ответ 3

Щелкните правой кнопкой мыши, чтобы создать новый.

Chrome DevTools Snippets — New

Ответ 4

Поддержка фрагментов Chrome Developer Tools позволяет создавать/редактировать/сохранять и выполнять фрагменты кода javascript.

Ответ 5

Я не могу сам активировать этот эксперимент (там нет Developer Tools experiments в моем chrome:flags, но из Safari я нашел this Объяснение:

Короче говоря, это "небольшая утилита, которая позволяет вам вводить блоки HTML и CSS и выводить их" на лету ".

Из сообщения в блоге, похоже, что он глючит в Safari, поэтому, возможно, Chrome еще не реализовал его.

Ответ 6

Здесь вы можете найти список полезных фрагментов http://bgrins.github.io/devtools-snippets/

одним из полезных фрагментов является "jquerify.js". Используя это, вы можете включить jQuery на любую страницу, если он еще не включен.