Недавно я начал Vets Who Code. В рамках нашей первой недели лагеря мы установили несколько плагинов для Chrome. Это был бурный вечер, поэтому я провел день, изучая некоторые из установленных нами плагинов. Я экспериментировал с плагинами SVG Grabber, Site Palette и Lighthouse. Я также провел некоторое время, играя с Инструментами разработчика Chrome.

Захват SVG

Я зашел на apartmenttherapy.com (один из моих любимых сайтов) и сначала попробовал SVG Grabber. Я действительно хочу поиграть с этим еще немного на других сайтах, чтобы узнать, какие SVG я могу загрузить. Очень здорово, что вы можете так легко загрузить логотип ApartmentTherapy.

Палитра сайта

Затем я попробовал Site Palette, который быстро стал моим любимым плагином. Так приятно иметь возможность быстро черпать вдохновение из моих любимых веб-сайтов.

Маяк

Наконец, я проверил отчет Маяк для ApartmentTherapy.com. Я заметил, что в разделе Best PracticesApartment Therapy отмечена ошибка за использование document.write(), о чем я только недавно узнал! Я был рад увидеть то, чему я научился в дикой природе, и узнать, почему это не лучшая практика (это может повлиять на пользователей с более медленным соединением).

Инструменты разработчика

Стрелка выбора элемента

Я начал экспериментировать, выбирая различные элементы с помощью стрелки "Выбрать элемент" и исследуя, как различные элементы вложены в DOM.

Вкладка «Консоль»

Затем я проверил вкладку Консоль, которая, честно говоря, немного сбила меня с толку. Похоже, что есть некоторые ресурсы, вызываемые JavaScript, которые недоступны, но я с нетерпением жду возможности узнать больше о том, что вы можете узнать из вкладки «Консоль» и как ее использовать для отслеживания ошибок.

Вкладка "Источники"

Последней моей остановкой была вкладка Источники. Я сделал несколько руководств по JavaScript и смог немного расшифровать это, что было захватывающе!

Вывод

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