Chrome DevTools Code Snippets
Фрагменты кода на вкладке «Источники» Chrome DevTools - чрезвычайно полезный инструмент. Фрагмент JavaScript может быть сохранен как именованный сниппет и выполняться в контексте текущей страницы, как если бы он был выполнен из консоли браузера.
Чтобы создать новый фрагмент кода, откройте DevTools, выберите вкладку «Источники», а затем вкладку «Фрагменты» слева. Он находится рядом с собственными скриптами страницы и вкладками загруженных расширений. Щелкните правой кнопкой мыши в любом месте списка фрагментов и выберите «Создать».
Чтобы выполнить фрагмент кода, нажмите CMD + Enter.
Основные возможности фрагментов кода #
Вы можете устанавливать точки останова и отлаживать код фрагмента, как обычный код JavaScript.
Вы ориентируетесь только на последнюю версию браузера Chrome, поэтому кроссбраузерная совместимость и устаревшие браузеры не являются проблемой.
Из сниппета можно использовать любую библиотеку, уже включенную на страницу, или глобальную переменную.
Я предпочитаю заключать любой код в закрытие, чтобы предотвратить утечку переменных фрагмента кода в глобальное пространство имен.
Консоль автоматически печатает любое значение, возвращаемое из фрагмента кода, таким образом, оно печатается undefined в приведенном выше примере.
Вы не можете передавать какие-либо аргументы фрагменту кода, поэтому вам необходимо изменить сам фрагмент.
Фрагменты кода намного более удобны для пользователя и разработчика, чем букмарклеты - код хорошо виден и может быть изменен и сохранен по желанию.
Фрагменты кода автоматической загрузки #
Фрагменты кода по умолчанию нельзя сохранить или загрузить с локального диска. Таким образом, ими нельзя легко делиться или обновлять. К счастью, если вы управляете веб-сервером, вы можете легко настроить источник для всех последних фрагментов кода, что значительно упростит запуск последнего общего кода.
Я добавил все фрагменты кода, которые я обычно использую, в bahmutov / code-snippets . Теперь я могу загружать любой сниппет динамически, используя прокси-сервер RawGit(Не работает), который обслуживает необработанные скрипты github с правильным типом приложения.
Например, вместо того, чтобы использовать время для непосредственного первого рисования фрагмента, этот сценарий загружает его из Github, а затем выполняет, добавляя новый тег сценария к элементу заголовка документа.
https://github.com/bahmutov/code-snippets
http://bgrins.github.io/devtools-snippets/
https://www.youtube.com/watch?v=S9sktFzL3tQ
••••••••••
Обсудить: