Начинающему веб-разработчику на заметку


Текстовый редактор

Давайте поговорим об инструментах веб-программиста. На мой взгляд, если вести разговор о полноценной разработке сайтов, то прежде, чем перейти непосредственно к рассмотрению тех или иных языков и приёмов программирования, начинать стоит с самых азов. В любом случае html-код, css, а также php и javascript-сценарии не следует писать в «блокноте». На сегодняшний день существует великое множество специальных текстовых редакторов. Я не собираюсь никому давать советы и рекомендации, так как подобные вопросы сродни религиозным – всегда найдутся приверженцы любого из них. Скажу лишь, что сам довольно долго использую Sublime Text 3. В комментариях можете написать, чем пользуетесь или собираетесь пользоваться вы.

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

Браузер

Возможно кто-то рассмеётся мне в лицо, но браузер, а точнее браузеры – столь же важный инструмент веб-разработчика. Во-первых, именно в браузерах можно увидеть как работает написанный вами сценарий и отладить его. Только я говорю, конечно, не про IE и даже не про Edge. Давайте условимся сразу, пусть это будут хорошие современные браузеры, которые имеют инструменты разработчика. Во-вторых, несколько разных браузеров нужны для того, чтобы проверять как работает сайт и ваши скрипты на разных платформах.

Я буду показывать что бы то ни было на примере Мозиллы. С небольшими изменениями то же самое можно делать и в Хроме, касательно же Оперы и остальных товарищей – ничего не скажу. То есть на компьютере, где я веду разработку сайтов, установлено множество самых разных браузеров. Нужно это прежде всего для того, чтобы можно было увидеть как выглядит и работает сайт в разных программах. Сюда же следует отнести и отладку работы сайтов на мобильных устройствах. И так как в Мозиллу встроен плагин для работы с экранами разных размеров, я чаще использую именно её.

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

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

В Мозилле и Хроме запускаются по нажатию F12 или Ctrl + F12. Изначально открывается в одном окне с самим браузером. Чаще всего окно разбивается горизонтально – сайт остаётся вверху, а панели разработчика видны снизу. Однако, на широких мониторах выгоднее располагать эти части горизонтально – слева сайт, справа – инструменты.

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

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

Если на инструмент разработчика посмотреть внимательнее, то в нём можно заметить множество вкладок. Нас с вами вначале пути будут интересовать в основном первые три: инспектор, консоль и отладчик. Однако позже, мы с ними познакомимся поближе.


Comments 0