Трюки инструмента отладки Chrome, о которых вы не знали, день 21: фрагменты

внешний интерфейс Chrome
Трюки инструмента отладки Chrome, о которых вы не знали, день 21: фрагменты

специальное заявление

Эта статья является авторомТомек СулковскиОпубликовано вmediumряд выше. По словам автора, всего 24 статьи, которые обновлены до 24 декабря.
Авторские права принадлежат оригинальному автору.

Автор рекомендует наш китайский перевод в Твиттере, а скриншот в конце.

Переводчик связался с автором перед переводом и получил разрешение на перевод всей серии.
Чтобы не мешать вашему чтению,Авторизованные записи здесь

текст

За 24 дня до праздников я опубликую серию коротких статей о том, как более интересно использовать инструменты разработки,вчерамы смотрелиDevTools WorkspaceЧерная магия, играть сегодняSnippets(кодовый блок):

59. Snippets

иногда я используюJavaScriptКак автоматизированный инструмент для работы со сторонними веб-сайтами и приложениями.

Допустим, я хочу увидеть, сколько людей аплодирует всем моим сообщениям в СМИ. Medium не дает таких сумм, поэтому я собрал этот небольшой скрипт:

 ?('td:last-child .sortableTable-number')
    .map(el => parseInt(el.innerText))
    .reduce((total, value) => total + value);

Когда я открываю страницу состояния и ввожу этот скрипт вConsole, он вернет это значение:

Несмотря на то, что мне не потребовалось слишком много усилий, чтобы написать этот сценарий, на самом деле я запускаю его только время от времени, поэтому мне было бы неприятно помнить такой сценарий:

ЭтоSnippetsгде он появляется: здесь вы хранитеJavaScriptкод дляDevToolsкак способ повторно использовать их позже.

создать такойSnippetВойтиSourcesПанель, выбранная в панели навигацииSnippetsэтот столбец, нажмите“New snippet(新建一个代码块)”, введите свой код, сохраните, и все готово! Вы можете сделать это через контекстное меню или[ctrl] + [enter]Ярлык для его запуска:

60. Запускайте сниппеты откуда угодно (блоки кода операций из других источников)

После того, как вы настроите отличный набор блоков кода, вам даже не нужно посещатьSourcesзапустить их. Самый быстрый способ, как мы много раз обнаруживали на этой неделе, — это использоватьCommand Menu. Если вы войдете!В его поле ввода вы можете выбрать свой кодовый блок по имени

Сегодняшняя подборка здесь~

Рутина: Если вы узнали что-то новое здесь

→ Можешь поставить лайк и уйти~
→ Следуй за мной:Твиттер: Томек Сулковски

другая серия

Другие статьи из этой серии будут переведены в ближайшее время, а соответствующие ссылки будут размещены здесь.

напиши в конце

Если вы положительно относитесь к моему переводу, вы также можете подписаться на меня~ Кстати, мой опенсорсный проект, прошу волну звезд→посмотри сюда, красивая система блогов

Автор рекомендует наш китайский перевод в Твиттере

Категории