Существует огромное количество инструментов для веб-разработчиков. Некоторые из них действительно незаменимы, другими можно пользоваться время от времени, выполняя какие-либо специфические задачи. Эти инструменты объединяет одно – они помогают превратить хорошие идеи в превосходный дизайн. Новые инструменты появляются очень часто, а быстрое распространение облачных технологий уже привело к тому, что некоторые разработчики практически не используют программы, которые нужно запускать с жесткого диска – все необходимые для работы инструменты можно найти в онлайне. FreelanceToday предлагает вашему вниманию 10 лучших инструментов для веб-разработчиков.

Тим Петруски, разработчик из Германии, создал очень интересный сайт. Он запустил веб-сервис под названием We Love Icon Fonts, которые работает так же, как Google Web Font, но только не с шрифтами, а с иконками. Его коллекция постоянно пополняется, так что многие разработчики смогут найти на сайте комплекты иконок, которые можно будет использовать в своих проектах. Подключить нужный набор можно всего за несколько минут. Достаточно прописать в CSS предоставленный сервисом код и после этого отображение значков будет обеспечивать выступающий в качестве хостера We Love Icon Fonts.

Maskew – это очень интересная Javascript-библиотека, которая позволяет быстро создавать перекосы элементов. На сайте есть пример, как можно добиться нужного эффекта. Иногда такие элементы смотрятся очень впечатляюще и будет полезно знать, что есть онлайн-инструмент, созданный специально для этого.

Сервис UXPim – это инструмент, который может пригодиться во время совместной работы над проектами. Он разработан для быстрого решения проблем, связанных с UX. Создатели сервиса являются специалистами, хорошо разбирающиеся в различных аспектах UX. Одним из очень важных достоинств UXPin является возможность коллективной работы в режиме реального времени. Это позволяет вовремя отслеживать ошибки на всех этапах создания сайта или приложения. Очень полезный инструмент, который позволяет работать над проектом, одновременно тестируя его на юзабилити.

Этот генератор теней может стать одним из самых полезных инструментов в арсенале веб-разработчика. С его помощью можно создавать красивые эффекты теней для самых разных шрифтов. На сайте можно найти огромное количество бесплатных тем. Чтобы применить эффект, понадобится скачать код и внедрить его в CSS. Использование инструмента открывает большие возможности для дизайнеров – представленные эффекты можно применять к заголовкам, баннерам, логотипам и любым текстовым блокам.

Over API – сервис, который по достоинству оценят все без исключения веб-разработчики. Это ресурс, на котором можно найти подсказку касательно любого вопроса, связанного с созданием сайтов и приложений. Все разложено по полочкам, так что найти нужную информацию не составит труда. По сути, это огромная онлайн-шпаргалка для разработчика. Зная о ней, нет необходимости держать все в голове – нужный код, сценарий и многое другое находится всего в паре кликов.

Scratchpad – это текстовый редактор для работы с HTML и CSS. Работает в режиме реального времени, сразу показывает, как будет отображаться код, с его помощью также можно обмениваться ссылками с другими пользователями. Также Scratchpad умеет сам закрывать теги. Идеальный инструмент для изучения и преподавания HTML/CSS.

CSS3 Generator – очень полезный инструмент, особенно для веб-дизайнеров, которые недостаточно хорошо знакомы с CSS. Если что-то забылось или просто не хочется тратить время на создание кода, можно воспользоваться CSS3 Generator. Там все очень просто: нужно лишь выбрать нужный эффект, настроить его с помощью нескольких ползунков, скопировать код и вставить его в свой проект. Сервис можно использовать как по прямому назначению, так и в качестве учебного пособия – смотря, как меняется код в зависимости от выбранных настроек, становится проще понять, как можно быстро добиться нужного результата.

Viewport Resizer – простой и удобный инструмент для тестирования сайтов на отзывчивость. Если нужно посмотреть, как сайт будет отображаться на различных мобильных устройствах, достаточно просто перетащить мышкой синюю кнопку с надписью Click or Bookmark на вкладку уже открытого для тестирования сайта. Верху страницы появится панель с иконками различных устройств: смартфонов, планшетов, ноутбуков. Кликнув по иконке, можно увидеть, насколько сайт является mobile friendly. Сервис по умолчанию показывает устройства Apple, но с помощью настроек можно выбрать любое другое разрешение экрана.

Инструмент MakeAppIcon преобразует исходное изображение в иконку приложения в формате PNG. Эту несложную операцию можно легко сделать вручную, но сервис может сэкономить немного времени, так как выбранное изображение ресайзится под все стандартный размеры иконок для Android и iOS.

При разработке сайтов порой не бывает под рукой нужных изображений. Но если знать размер картинки, то можно взять любое изображение, которое будет выступать в качестве «рыбы». Но зачем тратить время на поиск и обработку картинки, если есть очень полезный инструмент Fake Images Please? Этот сервис генерирует фиктивные изображение с URL, которые можно с использовать в работе над дизайном. Можно выбрать не только размер, но и цвет и даже текст.

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

Дизайн

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

Subtle Patterns

Patternizer

CodePen стал платформой для демонстрации впечатляющих CSS3- и JS-демок. Если вы ищете вдохновение (или просто классные кнопки), посетите CodePen.

W3 Validator

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

MinCSS

MinCSS - это инструмент, который по заданному URL загружает страницу и её CSS и выясняет, какие из селекторов не используются. Результатом работы является оптимизированная копия оригинала CSS.

Clean CSS

Clean CSS   - это набор инструментов для форматирования и оптимизации кода, причём написанного не только на CSS.

CSSTidy

Это оптимизатор и парсер CSS-кода, доступный для Windows, Linux и macOS.  Управлять им можно как из командной строки, так и через PHP-скрипт.

Koala App

Замечательное кросс-платформенное приложение , которое автоматически компилирует Less/SASS-файлы.

JSFiddle

В нашей области очень важно знать, как выполнить ту или иную задачу, а также использовать творческий подход для выполнения. Однако этого не всегда достаточно. Очень большое значение также имеет выбор правильныx инструментов, с помощью которых задачу можно решить намного проще и быстрее. Ведь очень часто разработчики получают проекты «на вчера», и время — не последний факто для их выполнения. Здесь вашему вниманию предоставлены ресурсы и инструменты для облегчения различных этапов веб-проектов.

Инструменты для создания макетов

MockFlow — сервис на основе Flash, который позволяет создавать вайрфреймы с простыми элементами для разработки прототипов. Он идеально подойдет как дизайнерам-одиночкам, так и командам профессиональных разработчиков интерфейсов, так как имеет весь стандартный набор инструментов для прототипирования интерфейсов.

FrameBox

Frame Box — очень простой онлайн инструмент для создания макетов сайтов. Вы очень быстро сможете создать вайрфрейм с использованием ui-элементов, изменять их размеры и даже установить ширину макета. Вы можете поделить своим макетом также в социальных сетях. Достаточно просто и эффективно.

Иконки

Интересный ресурс для скачивания бесплатных иконок.

Здесь вы сможете найди достаточно много интересных иконок. После выбора вы также сможете изменить его фон, угол наклона, цвет. Поиск происходить по ключевым словам.

Это подходящее место для тех, кто ищет минималистичные иконки. Они могут быть загружены в формате PNG или в SVG.

Все иконки, которые отображаются на этом сайте, созданы на чистом CSS и только в одном блоке DIV HTML.

Сайт, который предоставляет шрифты-иконки. Нужно просто добавить понравившийся шрифт в коллекцию, импортировать в css, привязать к нему класс и применить в нужном месте. Здесь вы можете увидеть пример пример.

Текстуры

Поиск текстур достаточно удобный, так как они поделены на различные категории.

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

На сайте имеется достаточно большое количество бесплатных текстур, изображений и 3D-моделей.

Стоковые изображения

Нужное изображение можно найти без каких-либо усилий.

Dafont предлагает действительно большое количество шрифтов, большинство из них являются бесплатными для коммерческого и личных целей. Здесь вы также сможете сразу просмотреть, как будет выглядеть текст. Для поиска существует много различных категорий. Также сможете найти и кириллические шрифты. У

Крайне удобный сервис для встраивания шрифтов и их автоматической конвертации в форматы TrueType, WOFF, EOT Lite, EOT Compressed и SVG. На сайте также имеется галерея бесплатных шрифтов.

Как встраивать шрифты при помощи Font Squirrel, вы сможете прочитать в статье .

Identifont имеет бесплатные шрифты в раздел под названием Fontset. Но также с помощью этого ресурса вы сможете определить шрифт.

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

Думаем, не имеет смысла описывать данный ресурс. Но все же. С его помощью вы сможете выбрать нужные типы шрифтов и импортировать на ваш сайт.

Инструменты функциональных возможностей

Это библиотека JavaScript, которая направлена ​​обнаружить, поддерживает ли браузер HTML5 и CSS3. В случае, если новые функции не поддерживаются, для тегов HTML применяются некоторые классы.

Кто еще каким-то образом не знаком с библиотекой, можете прочесть на хабре о практическом применении.

Ringmark является веб-тестом для определения возможностей мобильных браузеров.

Полифилы — скрипты, которые имитируют поведение родных API в старых браузерах. Здесь вы сможете найти более 40 скриптов. Во некоторые из них:

• JQuery-Animate-Enhanced метод $.animate() для определения CSS -переходов для Webkit, Mozilla и Opera. Совместим с IE6+ .
• CssSandpaper - библиотека JavaScript, с помощью которой можно создавать достаточно интересные эффекты.
• JQuery-Anystrecht - плагин, который акцентирует внимание на моделировании css3 background-size .
• Transform.js и Transitions.js — также очень полезные плагины, которые открывают новые возможности.

Галереи изображений

Адаптивная галерея изображений с подписями.

Touch Touch - галерея изображений, которая стремится быть идеальным решением для мобильных Android и IOS устройств.

Простой параллакс — слайдер контента с различной анимацией.

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

Генераторы спрайтов

Все знают о преимуществах использования CSS-спрайтов. Автоматический генератор спрайтов может помочь нам значительно сэкономить время. Данный генератор предоставляет возможность создать спрайт в форматах.png , .jpg плюс генерация кода css .

Полезные сайты

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

• World Wide Web Consortium (W3C) — организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины. W3C разрабатывает для Интернета единые принципы и стандарты (называемые «рекомендациями», англ. W3C Recommendations ), которые затем внедряются производителями программ и оборудования. Таким образом достигается совместимость между программными продуктами и аппаратурой различных компаний, что делает Всемирную сеть более совершенной, универсальной и удобной.
• WebPlatform.org — открытый ресурс, где разработчики делятся своим опытом. На сайте вы сможете прочитать об интересных тенденциях HTML5, SVG, CSS3, анимации, видео, WebGL и многом другом.
• Html5 Please - является отличном источником, если вы хотите узнать, какие новинки поддерживают браузеры. Кроме того, здесь есть различные полифилы и откаты, которые можно использовать в том случае, если свойства не поддерживаются.

Перевод — Дежурка

Что бы вы делали, вдруг оказавшись на необитаемом острове в полной пустоте, имея в своём распоряжении лишь USB-накопитель, коммутируемый доступ в Интернет и простейший компьютер, на котором установлена только операционная система? Естественно, первым делом вы бы вызвали помощь через Интернет, ну, а дальше? Как бы вы наладили там свою работу дизайнера?

Ладно, на примере более правдоподобного сценария, наверное, легче выразить суть. Что, если ваш компьютер сломался, все данные и программы стёрлись, а вам через два дня сдавать проект? Или, может, вам хочется быть лёгким на подъём, сниматься с места в считанные минуты и отправляться в путь без долгих сборов, захватив с собой лишь смену белья и USB-накопитель. Будь при вас перечисленные ниже приложения, ни один из описанных сценариев не стал бы для вас серьёзной проблемой.

Приложения, включённые в этот список, могут пригодиться вам для решения любых задач - от программирования до создания графики, ведения бизнеса онлайн и управления проектами, - всё с помощью одной лишь флешки. И, хотя USB-накопители становятся всё объёмнее (по моим последним наблюдениям, 64-гигабайтная флешка уже стоит не так дорого, а она на 4 Гб вместительнее моей нынешней MacBook), вам по-прежнему нужны, в основном, особые программы для достижения полноценной портативности. Приложения в нашем списке как раз отвечают этим требованиям: переносные и достаточно компактные для USB-накопителя (часто и для совсем небольшого).

01. Программирование

-
Портативное издание Notepad++ (Portable Edition) - приложение для написания программ со всеми необходимыми для этого функциями. Составлено на языке C++, работает в Windows. Находится в свободном доступе, выпущено по лицензии GPL.

Портативная версия сохраняет все функции основной. Среди них: многоканальный просмотр данных, поддержка разнородной языковой среды, WYSIWYG-редактор (с отображением материала в конечном виде по ходу обработки), использование автодополнения, подсветка и свёртывание синтаксиса при кодировке, запоминание и воспроизведение выполненных операций, а также другие действия. Это отличное компактное приложение для написания программ.

-
Nvu Portable - портативное издание Nvu Web Authoring Software. Включает WYSIWYG-редактор и мощную систему управления файлами. Предназначено для не слишком технически грамотных пользователей, имеющих начальные (или нулевые) познания в области HTML и CSS-программирования.

-
CSS-редактор Oiko - CSS, (X)HTML и XML- редактор портативного формата с полным набором функций. Работает в модификациях Windows от 98 до XP. Вполне надёжный редактор с простым в использовании интерфейсом, отображением свойств и селекторов по группам, структурным деревом вашей CSS-кодировки, а также функцией текущего просмотра в браузерах IE и Mozilla.

-
Blender Portable - портативная версия программы генерации трёхмерных изображений Blender. Работает на платформе PortableApps.com. Портативный вариант сохраняет все функции основной версии Blender.

-
GIMP Portable - достойная малоформатная альтернатива Adobe Photoshop. Хотя к пользовательскому интерфейсу GIMP не сразу привыкаешь, в отличие от других программ фотообработки, тем не менее, он вполне удобен в использовании.

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

-
Portable Audacity - портативный звуковой редактор для Mac OS X. У Audacity множество различных функций, в том числе, запись "живого" аудиосигнала, редактирование (включая обработку и сведение неограниченного количества треков), наложение эффектов на звуковые файлы, а также настройка совместимости с различными форматами файлов.

-
Portable Inkscape - портативный векторно-графический редактор. Набор функций Inkscape подобен оснащению других программ построения векторной графики, в том числе, Illustrator, CorelDraw и Xara X. Графические изображения сохраняются в формате SVG (Scalable Vector Graphics).

-
FastStone Capture - портативная утилита, снимающая изображение с экрана. Зафиксировать можно что угодно: окна, полноэкранную картинку, участки прямоугольной формы, любые объекты, произвольно очерченные области и даже прокручиваемые окна (серьёзное преимущество перед многими другими программами фиксации экранных снимков, не только портативными).

-
Fotografix - портативная графическая программа, позволяющая вам как редактировать, так и создавать изображения. Содержит набор чертёжных инструментов, допускает его расширение за счёт пользовательских настроек, выделение слоёв и каналов (в том числе, рабочих слоёв и трафаретов), а также включает различные прочие инструменты.

-
Artweaver - портативная программа создания изображений из числа свободно распространяемого ПО. Она позволяет вам сразу превращать фотографии в рисунки и содержит большой набор чертёжных инструментов. Кроме того, вы можете конструировать новые инструменты, а также адаптировать уже имеющиеся.

-
VLC Media Player Portable - портативный проигрыватель аудио и видео файлов. Воспроизводит файлы MPEG-1, MPEG-2, MPEG-4, DivX, WMV, MP3 и множество других форматов. А в дополнение к функции проигрывания ваших медиа-файлов, он может служить и медиа-сервером, направляющим потоки данных одному или нескольким пользователям посредством протоколов IPv4 или IPv6.

-
FileZilla Portable - ещё одно FTP-приложение от PortableApps.com. Поддерживает передачу файлов с помощью протоколов FTP, FTPS и SFTP, а также управление пересылкой объёмных файлов (более 4 Гб). Множество параметров конфигурации. Кроме того, поддерживает HTTP/1.1, SOCKS5 и FTP-proxy, и включает журналирование обращений к файлу, синхронизированный просмотр каталога и удалённый поиск файлов.

-
XAMPP - портативный полный веб-серверный пакет, включающий Apache, MySQL, PHP и Perl. Он поставляется с уже заданной конфигурацией, поэтому вам лишь нужно его разархивировать и установить. В него входят phpMyAdmin, FileZilla FTP Server, SQLite, Zend Optimizer и MiniPerl, помимо прочего. Это FTP, веб-сервер, и серверная база данных в одном полном пакете. Есть и облегчённая версия, включающая Apache, MySQL, phpMyAdmin, SQLite и их пакеты ПО.

* – Для просмотра и редактирования HTML-, CSS- и javascript-кодировки непосредственно на странице.
* – Основное средство просмотра CSS-свойств.
* – Панель инструментов для проверки корректности HTML-кодов в Firefox.
* – Дополнительное меню и панель различных инструментов для веб-разработчиков.
* – HTML/CSS-справочник, встроенный в Firefox.

-
Instant Rails - рабочая среда для Ruby, содержащая Ruby on Rails, Apache и MySQL, готовые к запуску. Вам лишь нужно поместить это приложение в выбранную директорию и ввести его в действие; установочных файлов нет вообще.

-
Portable Chrome - портативная версия браузера Chrome от Google. Имеет все особенности основной версии Chrome, в том числе, стабильность и скорость работы, просмотр страниц с помощью вкладок и запуск механизма поиска прямо из адресной панели.

-
Dia Portable - приложение для составления диаграмм, подобное Microsoft Visio. Однако, в отличие от Visio, оно больше предназначено для построения рабочих диаграмм, то есть, более пригодно для повседневного использования. Работает с XML-файлами, но также способно конвертировать файлы в форматы EPS, SVG, PNG, WMF и XFIG. Посредством Dia можно и распечатывать диаграммы (в том числе, многостраничные).

-
Mozilla Sunbird, Portable Edition - совместимое с Windows и Linux приложение-календарь. Автономный сервис-календарь с полным набором функций, отлично применимый для составления рабочих расписаний и управления проектами в обычном режиме.

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

-
GnuCash Portable - ещё одно приложение от PortableApps.com. Сервис свободного доступа для ведения финансовой отчётности с большинством функций, присущих коммерческим программам финансового планирования. Позволяет вести бух. учёт методом двойной записи, обслуживать счета паевых инвестиционных фондов, работающих с акциями/облигациями, а также обрабатывать накладные и документацию по кредиторской/дебиторской задолженности.

-
OpenOffice.org Portable - версия набора бизнес-программ открытого доступа OpenOffice.org от PortableApps.com. Включает все приложения основного варианта OpenOffice.org: Writer (текстовый процессор), Calc (табличный процессор), Impress (программа создания презентаций), Draw (графический редактор) и Base (база данных).

-
AbiWord Portable - текстовый процессор, способный открывать файлы, созданные в различных текстовых программах, в том числе, Microsoft Word, Word Perfect, Open Document (OpenOffice.org), Office Open XML, RTF, HTML и других. Имеет все основные функции стандартного текстового процессора, включая проверку правописания и грамматики и авто-составление писем из фиксированных форм.

07. Другие полезные приложения

-
Sumatra PDF - компактное, портативное бесплатное средство просмотра PDF-файлов для Windows. Оно само по себе портативное, поэтому ещё более "портативной" его версии нет. Управляется сочетаниями клавиш быстрого доступа, и может конфигурироваться как ваша основная программа просмотра PDF-файлов.

-
Foxit Reader V3.0 - продукция Portable Freeware Collection. Посредством Foxit можно на ходу открывать и читать PDF-документы. Но имейте в виду, что, если верить комментариям на странице загрузки данного приложения, его установка и конфигурирование могут вызывать затруднения.

-
Pidgin Portable - портативная версия клиента отправки мгновенных сообщений Pidgin (бывшего Gaim). Поддерживает работу Интернет-пейджеров AOL, MSN, ICQ, Jabber и Yahoo. Её можно дополнить модулями шифрования для безопасного обмена мгновенными сообщениями.

-
Trillian Anywhere позволяет вам подключать клиент отправки мгновенных сообщений Trillian с USB-накопителя или диска. Благодаря ему, можно захватить с собой список своих контактов и настройки куда угодно, и пользоваться портативной версией Trillian с полным набором функций на любом компьютере с Интернет-подключением.

От автора: на пути к тому, чтобы стать мастером CSS, вам нужно знать, как делается отладка и оптимизация CSS. Как вы диагностируете и устраняете проблемы с рендерингом? Как вы обеспечиваете, чтобы CSS не вызывал проблем с производительностью для конечных пользователей? И как вы обеспечиваете качество кода?

Знание того, какие инструменты использовать, поможет вам обеспечить, чтобы front-end работал оптимально. В этой статье мы рассмотрим браузерные инструменты для разработчиков Chrome, Safari, Firefox и Microsoft Edge.

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

Большинство настольных браузеров включают функцию инспекции элементов, которую вы можете использовать для отладки CSS. Активировать эту опцию вы можете, кликнув правой кнопкой мыши и выбрав пункт «Просмотреть элемент». Пользователи Mac также могут инспектировать элемент, кликнув на нем, удерживая клавишу Ctrl. На приведенном ниже рисунке показано, что вы можете видеть в Firefox Developer Edition.

Инструменты для разработчиков Firefox Developer Edition

JavaScript. Быстрый старт

В Firefox, Chrome и Safari вы также можете нажать Ctrl + Shift + I (Windows / Linux) или Cmd + Option + I (macOS), чтобы открыть панель инструментов разработчика. На приведенном ниже рисунке представлены инструменты для разработчиков Chrome.

Инструменты для разработчиков Chrome

В Microsoft Edge вы можете открыть инструменты для разработчиков, нажав клавишу F12, как показано ниже.

Инструменты для разработчиков Microsoft Edge

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

Microsoft Edge: Инструменты > Инструменты для разработчиков

Firefox: Инструменты > Веб-разработчик

Chrome: Вид > Разработчикам

Safari: Разработка > Показать веб-инспектор

В Safari вам может потребоваться сначала включить меню «Разработка», перейдя Safari > Настройки > Дополнительно и установив флажок «Показать меню» в строке меню. Ниже приведено представление для инструментов разработчика Safari.

Инструменты для разработчиков Safari 11

После открытия интерфейса инструментов для разработчиков вам может понадобиться выбрать нужную панель:

Microsoft Edge: Проводник DOM

Firefox: Инспектор

Chrome: Элементы

Safari: Элементы

Вы поймете, что открыли нужную панель, когда вы увидите HTML с одной стороны панели, а правила CSS — с другой.

Примечание. Разметка, которую вы увидите в панели HTML, является представлением DOM. Оно генерируется, когда браузер завершает анализ документа и может отличаться от исходной разметки. Использовав «Просмотр исходного кола» вы можете увидеть исходную разметку, но имейте в виду, что для приложений JavaScript такой исходной разметки может не быть.

Использование панели стилей

Иногда элемент не выглядит так, как ожидалось. Возможно, не применилось типографическое изменение, или отступ вокруг абзаца меньше, чем вы хотели. Вы можете определить, какие правила влияют на элемент, используя панель веб-инспектора «Стили».

Панель «Стили» организована в различных браузерах вполне согласовано. В первую очередь перечисляются стандартные стили, если они есть. Это стили, заданные с помощью атрибута style HTML, будь то автором CSS или программно с помощью скриптов.

Авторские правила стилей предшествуют стилям агента пользователя. Стилями агента пользователя являются стили браузера по умолчанию. Они также оказывают влияние на внешний вид вашего сайта. (В Firefox вам может потребоваться выбрать параметр «Показать параметры браузера», чтобы просмотреть стили агента пользователя. Этот параметр можно найти в панели «Параметры панели инструментов».)

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

Определение проблем каскада и наследования

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

Определение пар свойств и значений, которые были заменены другим объявлением

JavaScript. Быстрый старт

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

На изображении выше цвет фона, границы и размер шрифта блока отображаются перечеркнутыми. Эти объявления были переопределены теми, что находятся в блоке.close, который является приритетным для в нашем CSS.

Определение недействительных свойств и значений

Вы также можете использовать инспектор элементов для обнаружения недействительных или неподдерживаемых свойств и значений свойств. В Chromium-браузерах неверные правила CSS отображаются перечеркнутыми, а рядом выводится иконка предупреждения:

Определение недопустимого значения свойства CSS с помощью Chrome

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

Как Firefox Developer Edition отображает недопустимые свойства и значения

На скриншоте ниже в Safari перечеркнуты красной линией и выделены желтым фоном и иконкой предупреждения неподдерживаемые правила.

Недопустимое значение свойства CSS в Safari

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

Неподтвержденное значение свойства CSS в Microsoft Edge

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

Отладка адаптивных макетов

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

Chrome

Chrome в инструментах для разработчиков предлагает функцию панели инструментов устройства. Чтобы использовать ее, кликните иконку устройства (на фото ниже) в верхнем левом углу рядом с иконкой «Выбрать элемент».

Иконка режима адаптивного дизайна Chrome

Режим устройства позволяет имитировать несколько видов устройств Android и iOS, включая более старые устройства, такие как iPhone 5 и Galaxy S5. Режим устройства также включает функцию дросселирования сети для приближения к разным скоростям соединения и возможность имитировать оффлайн режим.

Firefox

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

Иконка режима адаптивного дизайна Firefox

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

Microsoft Edge

Microsoft Edge позволяет имитировать мобильные устройства на Windows, такие как вкладка Surface — для этого используется вкладка «Эмуляция». Выберите «Телефон на Windows» в меню «Профиль браузера», как показано ниже.

SitePoint.com с использованием режима эмуляции устройства Microsoft Edge

В дополнение к выбору ориентации и разрешения режим эмуляции позволяет тестировать функции геолокации. Однако вы не можете использовать режим эмуляции для имитации условий различных сетевых соединений.

Safari

Режим адаптивного дизайна Safari находится в инструментах разработчиков. Он похож на режим эмуляции Firefox, но добавляет возможность имитировать iOS-устройства, как показано ниже.

SitePoint.com при просмотре с использованием режима адаптивного дизайна Safari

Чтобы войти в режим адаптивного дизайна Safari, выберите Разработка > Войти в режим адаптивного дизайна или Cmd + Ctrl + R.