Frontend + Инструкция

С этим тегом используют

IT Программирование Javascript IT юмор Веб-разработка Web Программист Гайд Лайфхак Полезное Юмор Вертикальное видео YouTube Игры Все

2 поста сначала свежее

Web.Study

2 года назад

Web-технологии

Как поймать баг в коде: отладка в браузере. Вместо тысячи console.log()⁠⁠

Что такое отладка

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

Как поймать баг в коде: отладка в браузере. Вместо тысячи console.log() Программирование, IT, Инструкция, Баг, Frontend, Web, Длиннопост

Варварская отладка

Самый примитивный вариант отладки — добавить в код на JavaScript метод console.log (), поместив в скобки нужные данные для отладки. Console.log () — это просто способ вывести в консоль какой-нибудь текст.

Например, внутри функции можно сказать: console.log (‘Вызвана такая-то функция’) — и в нужный момент мы увидим, что функция вызвалась (или нет).

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

К счастью, помимо console.log () человечество изобрело много удобных инструментов отладки.

Что нужно для отладки

Для несложных проектов на JavaScript проще всего использовать встроенный отладчик в браузере Google Chrome. Единственное ограничение — он работает только с файлами скриптов, а не со встроенным в страницу кодом. Это значит, что если код скрипта находится внутри HTML-файла внутри тега <script>, то отладка не сработает.

Чтобы открыть панель отладки в Chrome, нажимаем ⌘+⌥+I и переходим на вкладку Sources (Источники):

Открываем скрипт

Допустим, мы хотим посмотреть, как работает какой-либо скрипт.

Всё, что у нас есть, — это код. Чтобы мы смогли его отладить, его нужно положить в отдельный файл скрипта, присоединить к HTML-документу и запустить в браузере.

Открываем любой текстовый редактор, например Sublime Text, вставляем код скрипта и сохраняем файл как temp.js. Имя может быть любым, а после точки всегда должно стоять js — так браузер поймёт, что перед нами скрипт.

После этого в новом файле вставляем шаблон пустой HTML-страницы и подключаем наш скрипт — добавляем в раздел <body> такую строку:

<script type="text/javascript" src="temp.js"></script>

Получиться должно что-то вроде такого:

Сохраняем этот код как HTML-файл, например index.html, и кладём в ту же папку, что и скрипт. Теперь заходим в папку и дважды щёлкаем по HTML-файлу, чтобы открыть эту страницу в браузере:

На странице ничего нет, но нам нужна не страница, а скрипт, поэтому находим слева наш файл temp.js и нажимаем на него — откроется код скрипта. Теперь можно начинать отладку:

Добавляем точки остановки

Точка остановки — это место, в котором наш скрипт должен остановиться и ждать дальнейших действий программиста. Их ещё называют брейкпоинты, от английского breakpoint — точка, где всё останавливается.

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

Брейкпоинт нужен для того, чтобы выполнить скрипт по шагам, начиная с первой команды. Чтобы его установить, нажимаем на номер строки с первой командой — в нашем случае это строка 2:

Обновим страницу и увидим, что скрипт начал работу и остановился. Но он остановился не на второй строке, а на шестой — всё потому, что это первая строка в скрипте, где происходит какое-то действие. Дело в том, что просто объявление новых переменных не влияет на работу скрипта, поэтому он ищет первую команду с действием. В нашем случае — это цикл for:

Пошаговая отладка

Чтобы посмотреть на работу скрипта по шагам, надо нажимать F9 или стрелку вправо с точкой на панели отладки:

Каждый раз, как мы будем нажимать F9 или эту кнопку, скрипт будет переходить к следующей команде, выполнять её и снова становиться на паузу:

Добавляем переменные для отслеживания

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

Чтобы добавить переменную и видеть её значение во время выполнения, в панели отладки в разделе Watch нажимаем плюсик, вводим имя переменной, выбираем её из списка и нажимаем энтер:

Теперь видно, что на этом шаге значение переменной a равно нулю:

Точно так же добавим остальные переменные: i, b, c. Так мы увидим, что первые два цикла только начались, а внутренний прошёл уже три итерации:

Так, нажимая постоянно F9, мы прогоним весь скрипт до конца и посмотрим, при каких значениях какие условия выполняются и как находится решение:

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

Отладка брейкпойнтами

Допустим, нам важно понять, в какой момент скрипт находит и выдаёт решение. Глядя в код, мы понимаем, что как только скрипт дошёл до команды console.log () — он нашёл очередное решение. Это значит, что мы можем поставить брейкпоинт только на эту строчку и не прогонять вручную весь скрипт: он сам остановится, когда дойдёт до неё, а мы сможем посмотреть значения переменных в этот момент.

Для этого:

1. Нажимаем снова на строку 2 и убираем предыдущую точку остановки.

2. Ставим брейкпоинт на строку 20 — там, где происходит вывод решения в консоль.

3. Нажимаем F8.

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

Таких точек остановки можно поставить сколько угодно и в любой момент — на каждой из них отладчик остановится и покажет текущее состояние скрипта.

Зачем это всё

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

В следующей статье мы покажем на примере с реальным кодом, как отладка помогает находить и исправлять такие ошибки. Подпишитесь, на наш телеграм, чтобы не пропустить это – https://t.me/havaevau_webstudy

Показать полностью 13

[моё] Программирование IT Инструкция Баг Frontend Web Длиннопост

TrubaDyrochka

9 лет назад

Как стать frontend-разработчиком и всё таки делать сайты⁠⁠

Моё предложение в дополнение (или продолжение) к этому посту http://pikabu.ru/story/kak_zhe_vsetaki_sdelat_sayt_3974629

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

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

Специалистам и критике - рада. Если обратите моё внимание на недоработки, буду благодарна за подсказки и советы.

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

1. Создание идеи сайта, определение с видом и структурой сайта, знание видов сайта (статичный/динамичный, адаптивный/отзывчивый дизайн), определение с контентом (текст, графика, фото) - этот пункт сугубо ознакомительный, с этого можно начать понимание основной информации о сайтах.

2. Сервер, хостинг, домен - также понимать, как это работает, какой хостинг выбрать, и тд.

3. Проектирование сайта

3.1. Навигация сайта, карта сайта - создание основной структуры, отрисовка основных блоков (можно здесь посмотреть, как работают препроцессоры, либо как отрисовывать вручную).

3.2. Юзабилити (изучить хотя бы основные принципы эргономичного расположения элементов сайта)

4. Дизайн - этот этап реализуют дизайнеры, но верстальщику знание Photoshopa необходимо и для верстки макета в дальнейшем, и для общего развития, конечно.

4.1. Отрисовка макета в Photoshop

4.1.1. Основные инструменты рисования, техника, горячие клавиши.

4.1.2. Направляющие

4.1.3. Шрифты, цвета

4.2. Фреймворки (использование дополнительных бибилиотек может сэкономить время при разработке проекта - дизайне, верстке)

4.2.1. Bootstrap

4.2.2. Foundation

4.2.3. Compas

4.2.4. Material Design

5. Разработка - начинаем оживлять дизайн

5.1. Редакторы кода (Notepad++, Sublime Text, DreamViewer)

5.2. Структура и хранение файлов (создание директорий, помещение файлов в определенные папки, именование файлов)

6. Вёрстка/нарезка макета сайта - трансформация дизайна в HTML / CSS. Вот и добрались до основной части нашей работы.

6.1. HTML - изучаем досконально, не ленимся практиковаться, делать хотя бы легкие странички, экспериментировать.

6.2. CSS - то же самое, только можно изучить еще и применение препроцессорных языков SASS и LESS.

6.3. JavaScript - мне однажды дали совет, что для фронтендщика достаточно знать JQuery, и понимать JavaScript. Так или иначе, покорпеть над ними обоими придется.

6.4. JQuery - им нужно владеть больше чем хорошо.

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

6.6. Git - сюда же поместила и систему управления версиями. Пригодится работающим в команде.

7. Интеграция макета в CMS - если, конечно, вы работаете через CMS. Но мне кажется, всё же мы должны знать хотя бы основные моменты популярных CMS - установка, модули, функционал:

7.1 Joomla

7.2. WordPress

7.3. Drupal

7.4. Bitrix

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

9. Ну и напоследок, средства автоматизации, такие как Emmet, Jade, владение командной строкой, Gulp и Grunt, но это уже после первых 8 пунктов, и еще сюда можно добавить СЕО-оптимизацию, но это всё же не наша зона работы.

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

Показать полностью

[моё] Сайт Frontend Web Дизайн Инструкция Верстка Верстальщик Длиннопост Текст

Посты не найдены