Повысьте продуктивность веб-разработки с помощью этих советов для разработчиков.

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

Возможно, они являются одной из самых важных технологий, и большинство людей используют их ежедневно.

Современные браузеры содержат всевозможные замечательные инструменты для разработчиков, которых не существовало всего несколько лет назад.

Знаете ли вы, что в инструментах разработки вашего браузера есть множество функций и хитростей, о которых вы, вероятно, не знаете?

Эти функции сделают вашу жизнь веб-разработчика намного проще.

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

Большинство упомянутых советов применимы к обоим браузерам, но синтаксис может немного отличаться.

Поклонник Edge или Brave?

Они оба основаны на Chromium, так что все применимо и к ним.

Если вы используете Safari или Internet Explorer, вам нужна машина времени, чтобы добраться до 2023 года.

Использование инструментов разработчика Chrome в первый раз

Если вы не знаете, что такое инструменты разработчика Chrome, не волнуйтесь.

Вам не нужно программировать или быть разработчиком, чтобы использовать их.

Хотя они могут быть немного пугающими, как только вы научитесь открывать их, это похоже на получение сверхспособности в Интернете.

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

Начнем с открытия Chrome DevTools.

Если вы работаете в Windows, введите следующую команду:

Ctrl+Shift+I

На Mac:

Command+Option+I

Вы должны увидеть что-то вроде этого:

Открытие командного меню в инструментах разработчика Chrome

Если у вас есть опыт работы с Chrome DevTools, вы можете не знать, что в Chrome есть палитра команд, как и в VS Code.

В нем есть множество команд.

Когда у вас открыты инструменты разработчика, вы находитесь всего в одном шаге от открытия командного меню.

В Windows используйте:

Ctrl+Shift+P

На Mac:

Command+Shift+P

Введите угловую скобку, и это даст вам список всех команд, имеющихся в вашем распоряжении в DevTools.

Вы должны увидеть что-то вроде следующего в меню DevTools:

Полезной командой, особенно если вы хотите показать свой банковский счет, является скриншот, который позволяет вам сделать скриншот всей страницы, пользовательской области или отдельного узла DOM.

Я написал полную статью о том, как сделать скриншот в браузере, ЗДЕСЬ.

Изучение файлов с помощью Chrome DevTools

Давайте копнем немного глубже.

Идите вперед и снова откройте палитру команд. Но на этот раз ничего не печатайте.

Вы заметите большой список файлов.

Эти файлы представляют собой фактический HTML, CSS, JavaScript и изображения, загружаемые этой веб-страницей.

Когда вы нажимаете на один из них, вы попадаете на вкладку источников, где вы можете редактировать и проверять файл.

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

Поиск визуального покрытия с помощью Chrome DevTools

В правом нижнем углу открытого файла найдите параметр покрытия.

Мне пришлось использовать другой файл, чтобы показать это, поэтому, если вы хотите продолжить, зайдите на CNN.com.

Выполните ранее упомянутые шаги, чтобы открыть командную палитру и найти файл, показанный на фотографии ниже.

Нажмите на файл, и вы попадете на панель покрытия.

Панель покрытия сообщает вам, сколько файлов JavaScript или CSS влияют на визуальные элементы на этой странице.

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

Выполнение кода JavaScript прямо в браузере

Знаете ли вы, что вы можете выполнять код JavaScript в браузере?

Находясь в DevTools, перейдите на вкладку Консоль.

Отсюда вы можете использовать знак доллара, как и jQuery, в качестве псевдонима document.querySelector или использовать двойной знак доллара, например querySelectorAll, для захвата нескольких элементов.

Если вы сначала перейдете на вкладку «Элементы» и выберете что-то, а затем вернетесь на вкладку «Консоль» и наберете «$ 0», он захватит текущий элемент.

После того, как вы захватили элемент, вы можете посмотреть, как его значение меняется с течением времени.

Вы можете выполнять одну и ту же строку кода снова и снова, но есть более разумный способ!

Нажмите на значок глаза.

Это закрепит элемент на консоли как живое выражение и будет автоматически обновляться каждый раз при изменении состояния приложения.

Запуск сложного кода в Chrome DevTools

В некоторых случаях может потребоваться запуск более сложного кода.

Если вы откроете палитру команд, есть возможность создать новый фрагмент.

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

Для этого примера это код, который я использовал:

alert("I'm learning here")

Чтобы проверить свой код, снова откройте палитру команд и введите bang.

Ваш код должен быть там.

Нажмите на нее и выполните.

Копирование элементов для парсинга веб-сайтов с помощью Chrome DevTools

Играть с JavaScript — это одно, но чаще всего вы, вероятно, используете инструменты разработчика браузера для отладки HTML и CSS.

Перейдите на вкладку «Элементы».

Если вы черпаете вдохновение для дизайна и хотите скопировать элемент в свой проект, вы можете использовать печально известную комбинацию клавиш ctrl+c, но знаете ли вы, что если щелкнуть правой кнопкой мыши, вы получите множество различных вариантов копирования?

Если вам действительно нравится, как выглядит элемент, вы можете скопировать его стили и вставить их прямо в свой CSS.

Когда вы нажимаете на элемент в DOM, он покажет вам все стили CSS, которые применяются к нему на вкладке стилей.

Более сложной задачей является проверка элемента, который находится в другом состоянии, например, когда он наведен или сфокусирован.

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

Выбор этой опции приведет к тому, что элемент останется замороженным в этом состоянии, что упростит проверку этого CSS.

Будете ли вы использовать какие-либо из этих хаков Chrome в 2023 году?

Это одни из моих любимых приемов и советов по Chrome, которые я использую ежедневно, чтобы увеличить скорость разработки.

Надеемся, вы сможете повысить свою продуктивность!

Если вы хотите узнать некоторые другие интересные хаки или советы Google. У меня есть пара постов в блоге именно об этом.

Если вы хотите создать текстовый редактор AI в Google Docs, я написал статью об этом.

Я также написал нечто подобное для добавления OpenAI в Google Sheets, если это ваш любимый инструмент для работы с электронными таблицами.

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

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

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.