Если вы разработчик веб-разработчика, то вы, безусловно, потратите довольно некоторое время, покинув в браузерах DEV Tools или веб-консоль. Осмотрите элементы, модифицирующие команды CSS или запущенные команды в консоли – это некоторые основные вещи, которые каждый веб-разработчик знает, как сделать использование инструментов разработчиков браузеров. Однако в вашем браузере есть еще несколько вещей, которые вы можете сделать в вашем браузере, чтобы сделать вашу отладочную, разработку и веб-дизайн намного более эффективной. Вот несколько скрытых или менее известных особенностей Chrome devtools О чем вы должны знать, а какие вы будете использовать каждый день …
Красивый массив печати в качестве таблицы
При работе с большим количеством данных в JavaScript (например, создание визуализации данных), вещи никогда не работают на первом попынке, и вы неизбежно должны идти на веб-консоль и просматривать данные – возможно, с console.log Отказ Это даст JavaScript Object (JSON), который в случае 2D-массивов будет трудно прочитать и трудно найти полезную информацию в. Но для этого есть простое решение:
Все, что нужно, это заменить console.log с Console.table.table. . Эта функция может легко отображать 1D и 2D массивы, но что делает эту функцию очень полезной, состоит в том, что она также может правильно отображать имена столбцов и сверху того, что он также позволяет отсортировать по каждому из этих столбцов. Итак, чтобы получить таблицу, как указанный выше, вы будете использовать данные в следующем формате:
[
{ "country": "Austria", "percentage": 11.6429, "year": 2012},
{ "country": "Belgium", "percentage": 8.5718, "year": 2012},
{ "country": "Czechia", "percentage": 3.1569, "year": 2012},
{ "country": "Denmark", "percentage": 13.0096, "year": 2012},
{ "country": "Estonia", "percentage": 8.3903, "year": 2012},
{ "country": "Finland", "percentage": 23.3728, "year": 2012},
{ "country": "France", "percentage": 10.1641, "year": 2012},
{ "country": "Germany", "percentage": 7.4749, "year": 2012},
{ "country": "Greece", "percentage": 9.2186, "year": 2012},
{ "country": "Hungary", "percentage": 10.4749, "year": 2012},
{ "country": "Iceland", "percentage": 13.9053, "year": 2012}
]
Использование Multi Cursor.
Одной из наиболее основных функций и ярлыков в каждом редакторе кода является Multi Cursor и Multi Select. Если вы пытаетесь быть максимально эффективным, насколько это возможно, как и я, то вы, наверняка наденьте эти ярлыки для хорошего использования:
Multi Cursor с использованием Ctrl + Нажмите :
Multi Cursor полезен, но не очень точный и маленький громоздкий, когда вам нужно выбрать и заменить много вхождений текста. Для тех случаев вы можете использовать гораздо более подходящие Ctrl. + D ярлык:
В GIF выше вы можете увидеть, как можно использовать Ctrl + D выбрать (и необязательно Ctrl + U Чтобы отменить выбор) вхождения текста, чтобы легко изменить их или заменить их.
Используя командную палитру
Есть много инструментов, вкладок, файлов, команд и т. Д. В Chrome devtools. и вспоминая имя или место, где можно найти каждый, и все из них могут не осуществимы. Чтобы помочь с этим, вы можете использовать Командная палитра который можно открыть с помощью Ctrl. + Shift + P Отказ В этой палитре вы найдете все ярлыки, панели, настройки консоли, вкладки, настройки и многое другое.
Также, если вы опускаете Сдвиг В этом ярлыке и вместо этого используйте Ctrl + P Он даст вам список всех доступных файлов, которые вы можете открыть. Это также может быть удобно, если у вашего сайта есть много исходных файлов.
Удобный сборщик цветов
Я, наверное, не единственный, кто бесконечно беспокоит и настраивает шрифты, цвета и что не в CSS. Чтобы сделать, по крайней мере, цвет настраивается немного легче, вы можете использовать Цветовой сборщик Который вы можете открыть, находя элемент, какой цвет вы хотите изменить и нажать на его поле CSS.
Это хорошая особенность, но настоящий шаннин игры – это возможность выбрать любой цвет с веб-сайта, просто нажав на него, пока Цветовой сборщик открыт – вроде так:
Темный режим
С помощью скриншотов и GIFS вы, наверное, уже заметили, что я использую Deark Mode в Chrome devtools. . Итак, если вам интересно, как изменить из режима света в темный режим, вы можете перейти к началу правого угла Devtools – нажмите на 3 вертикальные точки Значок, следующий Выбор Больше инструментов а потом Настройки Отказ В меню настроек выберите Предпочтения и, наконец, установить Тема к Темно . Вот и все! Добро пожаловать в Темная сторона Действительно
Найти, где определяется свойство CSS
Работа с CSS включает в себя много испытаний и ошибок (по крайней мере, для меня, в любом случае) и вместо того, чтобы идти между редактированным кодом в IDE и освежающем вкладке браузера, почему бы не сохранить некоторое время и сделать все это в Devtools? Одним из таких временных трюков является использование Ctrl + Нажмите Чтобы найти, где определяется свойство CSS, чтобы вы могли редактировать его в исходном файле:
Сделать веб-сайт редактируемый с режимом дизайна
Другой трюк CSS/Design – использовать Режим дизайна Чтобы напрямую редактировать все на сайте. Не нужно модифицировать исходные файлы HTML и CSS – просто нажмите/выделите что-нибудь на странице и измените его! Чтобы включить этот режим на просто введите Document.designMode в консоль и начать проектирование (Ну, действительно просто возиться с чем-либо и все):
Условные точки останова
Как правило, довольно сложно/раздражает правильно отладку JavaScript, работающего в браузере, используя IDE. Таким образом, вместо того, чтобы использовать IDE, давайте используем Devugger devtools.
Установка базовых точек останова в отладчике не очень интересно, и вы, безусловно, знаете, как это сделать. Как насчет Условные точки останова , хотя? Иногда у вас может быть для петли который итерации более 1000 или более записей, и вы знаете, что поверхности ошибок только при выполнении определенного условия – например Когда Если Заявление внутри указанного цикла возвращается ложь Отказ Чтобы остановиться на точке останова только тогда, когда эти условия будут выполнены, мы можем настроить Условная точка останова :
Сначала мы щелкнем правой кнопкой мыши на существующей точке останова (Red Dot), затем нажмите на Редактировать точку останова и вставьте наше желаемое выражение. Когда это выражение оценивает истинный Точка останова будет вызвать и у нас будет шанс ткнуть вокруг. Эта условная точка останова не должна быть добавлена только на линии с Если Заявления – это может быть на любой строке, и его выражение будет оценено каждое время выполнения кода, проходит через него.
Пока вы покидаете, ищу ошибку во время приостановленного исполнения, вы также можете рассмотреть возможность добавления подозревающих переменных в Смотреть Вкладка, так что вы можете следить за ними, когда значения изменяются. Чтобы добавить переменную в Смотреть Вы можете сделать следующее:
Имитация медленного интернета
Большинство людей знают о Сеть Вкладка в devtools, в которых вы можете увидеть, как долго требуется каждая функция, операция или нагрузка на файл. Однако большинство людей не знают, что вы также можете использовать Сеть Вкладка для моделирования медленного подключения к Интернету с помощью Сеть дросселирование Отказ Вот как это сделать:
После добавления и выбора этого профиля все, что осталось сделать, это обновить страницу и посмотреть, как он выполняет с ужасным подключением к Интернету. Остерегайтесь – пробуя это – вы можете просто понять, насколько медленно ваш сайт действительно (вроде депрессии Личный Опыт).
Измерение производительности сайта
Находясь на тему производительности, давайте рассмотрим, что Chrome devtools может сделать для нас с точки зрения профилирования приложений. Чтобы запустить профилировщик, нам нужно переключиться на Производительность вкладка в devtools. Когда на этой вкладке мы просто должны ударить Ctrl + Shift + E Отказ Этот ярлык с запуском профилирования и одновременно обновлять страницу. После нагрузки страницы нам нужно снова нажать этот же ярлык, чтобы остановить запись Profiler.
Отсюда мы можем копаться в производительность сети, анимации, время функции и т. Д. Там много вещей, на которых вы могли бы посмотреть, но, в частности, было бы проверить время функции. Чтобы проверить некоторые из этих функций, вы можете нажать на оранжевые полосы на диаграмме и выберите Снизу вверх вкладка в нижней части. Если вы тогда отсортируете их по Общее время Вы можете найти некоторые части вашего кода, которые забирают слишком много времени для завершения.
Вывод
Это всего лишь некоторые из моих любимых советов и трюков, и это определенно не исчерпывает список всех функций в Chrome devtools. . Вы можете найти много полезных функций в Chrome devtools. Гиды Это соответствует вашему рабочему процессу. Кроме того, я предлагаю держать и смотреть на Что нового раздела Для последних обновлений, которые приносят более полезные инструменты в ваш браузер.
Если вы пропустите какие-либо конкретные функции, это стоит проверить Расширение devtools на Chrome WebStore Поскольку есть дополнительные инструменты, созданные как Google, так и пользовательским сообществом. И если вы не можете найти инструмент/расширение для вашей конкретной проблемы, может быть, рассмотреть вопрос о том, чтобы построить что-то себя, используя Расширение devtools руководство. 😉
Оригинал: “https://dev.to/martinheinz/hidden-features-of-chrome-devtools-477o”