Chrome занимает большую часть мирового рынка браузеров с более чем 64% по данным statscounter.com. Эта доля рынка также отражена в использовании браузера моими друзьями и коллегами, но я склонен видеть, что возможности функций в браузере не используются или используются редко.

Сколько я себя помню, Chrome и Chrome DevTools были важным инструментом в моем наборе инструментов. Я улучшил свой рабочий процесс разработки в Chrome DevTools и расширил свой набор инструментов с помощью этих советов, что привело к повышению общей производительности и эффективности. Я считаю, что эти советы, которыми я делюсь, постоянно возвращаются к нам всякий раз, когда я помогаю кому-то, или что-то, что я нашел действительно полезным или использую ежедневно.

Совет 1: отключите кеш

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

Для этого вам нужно открыть Инструменты разработчика Chrome > вкладка "Сеть" > "Отключить кеш". Вы найдете опцию отключения кэша прямо под вкладкой сети. Помните, что вы отключаете кеш только тогда, когда Chrome DevTools открыт. Теперь можно просто перезагрузить страницу, и кеш в браузере очистится.

Совет 2: файлы Blackboxing

Всякий раз, когда я отлаживаю какой-либо код, написанный во внешнем фреймворке, таком как Angular, или библиотеке, такой как jQuery, я часто просматриваю некоторые из основных файлов фреймворка/библиотек, которые не хочу загрязнять мой процесс отладки. Это означает, что для отладки 2 разных пользовательских файлов javascript мне нужно перейти к 5 основным файлам angular, управляющим рендерингом элементов в компонентах angular, или тем, как за сценой определяются хуки жизненного цикла. Не идеально!

Чтобы решить эту проблему, вы можете щелкнуть правой кнопкой мыши файл, который хотите игнорировать, и нажать «скрипт черного ящика». Теперь этот файл не будет вызываться при отладке вашего приложения. Если у вас есть исключение, возникающее в файле с черным ящиком, оно не будет пропущено.

Если вы хотите заблокировать несколько файлов одновременно, вы можете нажать f1 или три точки в правом верхнем углу в DevTools и перейти в «Настройки».

Затем нажмите Blackboxing в левом меню и нажмите кнопку «Добавить шаблон». Теперь вы сможете вставить регулярное выражение, которое может направить нужные файлы в черный список.

Совет 3: Удалите файлы

Я считаю этот совет полезным для людей, которые все еще копируют все минифицированное содержимое файла в редактор и деминифицируют его там. Чтобы удалить содержимое в Chrome DevTools, посмотрите прямо под содержимым файла в первом наборе инструментов.

С левой стороны вы найдете 2 фигурные скобки с текстом при наведении «Pretty Print». Нажмите эту кнопку, и весь контент будет удален.

Совет 4: редактор box-shadow/кубический редактор Безье

Визуализация того, как определенный стиль будет применяться к элементу, иногда может быть сложной. Для разработчика, который также работает дизайнером, вы, возможно, корректируете код на 1 пиксель, чтобы получить именно тот дизайн, который вам нужен. При работе с тенями блоков несколько переменных могут усложнить стилизацию свойства и отнять много времени. Если у вас при этом нет Hot Module Reloading или live reloading, то количество потраченного времени очень велико.

В Chrome DevTools есть встроенный редактор теней, который просто потрясающий!

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

Эта концепция живого редактора также используется при применении функции плавности к переходу.
Как вы видите ниже, вы можете настроить функцию плавности в зависимости от того, как должна происходить анимация. Фиолетовый шар, перемещающийся горизонтально по редактору, показывает, как выглядит анимация в зависимости от ваших настроек.

Совет 5: Отладка анимации

Если у вас есть анимация на вашем сайте или на другом сайте, где вы хотите проверить, как анимация, то в DevTools также есть инструмент для этого. В GIF ниже у вас есть вкладка внутри DevTools, где вы можете повторно запустить анимацию, замедлить до 25%, 10% от общей продолжительности, а также различать различные анимации, происходящие на сайте. Вы также можете увидеть свойства, используемые в анимации. На моем веб-сайте я использую свойства непрозрачности и преобразования для анимации своего логотипа. Ниже вы можете увидеть, что затронут элемент, и как происходит функция смягчения. Полезный инструмент, если у вас есть более сложная анимация на вашем сайте, и вы хотите замедлить анимацию и убедиться, что синхронизация/координация идеальны в пикселях.

Сноски

Хотя многие из этих советов довольно просты, я надеюсь, что вы нашли некоторые из них полезными или, по крайней мере, узнали что-то новое. Если у вас есть какой-либо совет, который вы считаете полезным в своем ежедневном рабочем процессе разработки, поделитесь им в разделе комментариев ниже.